@david 编辑：Discourse 的主题系统现已内置对 多个 JS 文件 的支持。此 webpack 方法不再需要。
大家好！在我 开发 handsfree-discourse 组件 时，遇到了一些文件管理方面的问题。我的主要问题是需要一种方法将代码拆分到多个文件中。另一个问题是我需要包含第三方库，而无需要求管理员启用 CORS 或触发额外的 HTTP 请求。
为了解决这些问题，我创建了 discourse-webpack，这是一个用于快速搭建重度 JS 组件的样板项目！其功能包括：
- 支持实时重载的本地开发服务器
- 包含一个提交脚本，可将源代码和编译后的代码保留在不同的分支中！
本主题其余部分将解释如何使用它以及其工作原理。我刚刚为正在开发的几个其他组件完成了测试，所以如果您遇到任何问题或有具体需求，请告诉我！
快速为您的 Discourse 社区搭建重度 JavaScript 组件，并附带提交脚本，将源代码和构建代码保留在不同的分支中，助您保持 快速 交付！
安装
首先，确保您的本地机器上已安装 NodeJS >= 8 和 git。然后，依次输入以下各行：
# 下载此仓库
git clone https://github.com/browsehandsfree/discourse-webpack
# 进入目录
cd discourse-webpack
# 安装依赖
npm install
接下来，您需要在 package.json 中编辑以下内容，将所有链接替换为您自己的。具体包括：
{
name: 'your-project',
repository: {
url: 'git+https://github.com/username/repo'
},
author: '',
bugs: {
url: 'https://github.com/username/repo/issues'
},
homepage: 'https://example.com'
}
最重要的是，确保 repository.url 正确无误，并以 git+ 开头。当您运行 npm run discourse 时，它会将更改提交并推送到该仓库。
另外，别忘了 设置您的 Discourse 的 about.json，它位于 /src/discourse/about.json。
开发
运行 npm install 后，您将得到以下目录结构：
discourse-webpack
|- node_modules/ # 依赖项
|- src/ # 主要源文件
|--|- discourse/ # Discourse 主题文件
|--|--|- common/
|--|--|- desktop/
|--|--|- mobile/
|--|- main.css # 主样式表
|--|- main.js # 主 JavaScript 入口
|--|- sandbox.html # 本地开发沙盒
|- .gitignore
|- discourse-push.js # 特殊提交脚本
|- README.md
|- webpack.config.js # Webpack 配置
|- yarn.lock
命令行脚本
此外，您可以在项目根目录下使用以下命令：
# 在 localhost:8080 启动开发服务器
# - 支持实时重载
# - 使用 `/src/sandbox.html` 帮助您在本地调试
npm run dev
# 将组件编译到 `/dist`
npm run build
# 将组件编译到 `/dist`
# - 然后将 `/dist` 提交到 `discourse` 分支
npm run discourse
工作原理
下载仓库并安装依赖项后，就可以开始开发了！使用 npm run dev 在 localhost:8080 启动一个支持实时重载的服务器。
访问该 URL 将加载位于 /src/sandbox.html 的 HTML 文件。该文件实际上并未在 Discourse 中使用，仅用于帮助您在本地（Discourse 上下文之外）开发脚本。
主要的 webpack 入口点是 /src/main.js。从那里，您可以 import 其他脚本，webpack 会将所有内容打包在一起，并注入到以下文件中：
/src/sandbox.html/src/discourse/common/body_tag.html
main.js 会自动编译并注入到 sandbox.html 中，但由于以下代码，它需要手动内联注入到 body_tag.html 中：
<script>
<%= compilation.assets['main.js'].source() %>
</script>
如果您想将脚本注入到另一个模板（如 after_header.html），只需将该 script 标签复制到该模板中即可。这样，您可以在开发时将 HTML 和 JavaScript 分离，但在部署时又能将它们合并在一起！
编译
当您使用 npm run build 进行编译时，会发生以下情况：
- 首先，
/src/main.js及其依赖项会被打包 - 然后，
/src/discourse/中的所有文件都会被复制到/dist/ - 同时，
main.js会被 内联 注入到任何包含以下代码的模板文件中：
<script>
<%= compilation.assets['main.js'].source() %>
</script>
部署
当您运行 npm run discourse 时，将调用 /discourse-push.js 脚本并执行以下操作：
- 首先，它会像运行
npm run build一样进行编译 - 然后，它会在
/dist内初始化一个新的 git 仓库 - 接着，它将
/dist提交到您项目的discourse分支（如果该分支不存在，则会创建它）
使用 discourse 分支
以下每个
/relative/urls/均相对于您的论坛基础 URL，例如：https://example.com/relative/urls/
安装组件
通过访问 /admin/customize/themes 并选择“从网络导入”，从您的项目仓库（例如：https://github.com/my-awesome/discourse-component）安装组件。
然后将分支设置为 discourse。如果保留为 master，它将无法工作，因为 Discourse 会尝试加载未编译的文件（如果它能运行的话）。
在您自己的主机上调试特定主题文件
- 安装 Discourse Theme CLI
- 登录 https://theme-creator.discourse.org
- 进入该目录，然后运行
discourse_theme watch . - 使用
https://theme-creator.discourse.org作为基础 URL- 使用您从
theme-creator获取的 API 密钥
- 使用您从
如果您是 Discourse 的新手并希望分叉此项目，以下文章可能会有所帮助。