如何将 Gulp 和 Browserify 用于我的 javascript 应用程序？答案

【问题标题】：How can I use Gulp and Browserify for my javascript app?如何将 Gulp 和 Browserify 用于我的 javascript 应用程序？
【发布时间】：2016-01-13 21:26:56
【问题描述】：

我终于尝试将现代构建系统引入我的应用程序，我希望有人能提供帮助。我认为我需要进行一些范式转换。

这就是我的应用程序的结构：

/src
  /components
    /Base
      /App.jsx
      /Pages.jsx
      /...
    /Page1
      /Page1Component1.jsx
      /Page1Component2.jsx
      /...
    /Page2
      /Page2Component1.jsx
      /Page2Component2.jsx
      /...
    /...
  /libs
    /bootstrap.js
    /jquery.js
    /react.js
    /...
  /scripts
    /index.js
    /utils.js
  /styles
    /main.css
  /html
    /index.html

现在我已经设置了 gulp 来执行此操作：

创建一个新文件夹/dest 来放置所有内容
将/scripts中的所有内容组合起来，命名为main.js，放入dest
将/libs中的所有内容合并，命名为libs.js，放入dest
合并/components中的所有内容，通过babel运行，命名为comps.js，放入dest
复制一个/html文件和一个/styles文件到dest

然后这是应用程序的运行方式：

打开index.html
该页面请求main.js
main.js 请求 libs.js 和 comps.js
一切正常

但这是我遇到的问题：这里的很多东西都依赖于全局的其他东西。 index.js 等待 comps.js 和 libs.js 加载，然后调用ReactDOM.render(<App />...)，这意味着 ReactDOM 和 App 都需要是全局的。

现在我正在尝试添加需要 require() 的内容，并尝试使用 Browserify。但是 Browserify 采用了需要 require 的代码，并以一种我相信使 nothing 全局化的方式将其包装起来。

我意识到我需要将我的应用程序变成实际的模块，而不仅仅是一堆相互连接和调用的文件。而且我知道从长远来看，避免使用全局变量将是一件好事。但我很难弄清楚如何做。

例如，我有超过 50 个 React 模块。将module.exports 添加到每一个中似乎是错误的，然后将它们全部导入主文件。此外，/lib 中的一些内容是不作为模块导出的库，它们被设计为在 <head> 标记中运行，例如 Google Charts。

所以我想我的问题是：

我的模块导出应该在哪里，它们如何适应我的 gulp 任务？我要连接然后导出吗？
如何处理不是模块的库？
我的应用程序布局真的很糟糕，我只需要从头开始重组吗？

谢谢，很抱歉这个乱七八糟的问题。

【问题讨论】：

这样想：App 只需要require 它直接渲染的组件。这些组件中的每一个都只有requires 他们每个人都需要。所以是的，每个模块的module.exports 都是正确的。
哦，这确实有些道理！所以 App 需要它渲染的组件，而每个组件都需要它们渲染的任何东西，而且它有点像这样的级联。每个组件都只是导出自己。非常感谢，这有助于我思考这个问题。

标签： javascript node.js module reactjs gulp

【解决方案1】：

首先，您的文件结构没有问题。

其次，你能做的最好的事情就是遵循“一个模块，一个文件”的规则。这确实意味着将module.exports 或export default 添加到每个文件中。这只是好的 JavaScript。但这并不意味着将它们全部导入到您的主文件中，这使我们能够：

第三，考虑模块化。文件应该require 或import 正是他们需要的，而不是他们不需要的。例如，如果您的 App 使用 Page1 并且 Page1 使用 Page1Component1，那么您的导入应该是这样工作的：

App -> Page1 -> Page1Component1
             -> Page1Component2
    -> Page2 -> Page2Component1
             -> ...

这确保了关注点的分离，并保护您的代码免受以后容易触发的错误（例如来自嵌套依赖项更改的错误）。并且您的构建系统应该生成一个文件（但您可以稍后如果需要通过分块等来解决性能问题）。

你是对的，在这种结构中，使用 Browserify 或 Webpack 将确保没有任何东西是全局的 - 这是一件好事（尽管我会注意到你可以明确告诉他们公开组件，这有时是必要的图书馆）。

这会留下您无法控制且无法导入的库。这不适用于 Bootstrap、jQuery 或 React，它们都具有来自 NPM 的 require-able 模块。但是假设你有一个你没有提到的库，它不能通过 NPM 获得，你仍然可以使用 script 标签将它全局包含在你的 HTML 中，并告诉 Browserify 或 Webpack 公开它以供需要。

【讨论】：

感谢您的想法。我现在开始明白了。我认为现代构建系统可能不会有任何串联。我立即遇到的一件事：Browserify 似乎不喜欢 JSX。我的直觉是制作一个/temp 文件夹。 Gulp 首先 babel 将所有内容放入 temp 中，然后 browserify 将所有内容捆绑并放入 /dest。这是“正确的”，就像现代建筑看起来一样的明智之举？
很高兴它有帮助！通过正确的配置，Browserify 或 Webpack 将完全按照您的意愿行事，而无需任何临时目录。你也可能不需要 gulp。顺便说一句 - 如果您在使用 Browserify 构建时遇到问题，您可能需要发布另一个问题。也许缺少转换？
上次我查看 Webpack 和我的应用程序时，我不知道如何让它工作。不过现在，我想我可以把所有东西都变成模块，让 Webpack 正常工作。我会这样做，而不是试图将我的旧 gulp 文件破解为新格式。再次感谢！
@fnsjdnfksjdb 要使 Browserify 与 jsx 一起工作，您需要将其添加到扩展选项中。所以你的电话应该是var bundler = browserify({ entries: paths, debug: true, extensions: ['.jsx'], cache: {}, packageCache: {} });
@fnsjdnfksjdb 上述原因是 Node.js 和扩展的 browserify 仅在您执行 require('SomeFile') 时查找 .js 文件。因此，通过添加扩展名，它还将查找文件的 .jsx 版本。