Question

好的，现在是2016年。Webpack看起来像是requirejs和browserify的胜利者。我一直在阅读这3种技术，以解决一个非常具体的问题。 我希望在我的HTML文件中避免这种情况（AngularJS应用程序的一部分）

<script src="some-file.js"></script>
<script src="some-file2.js"></script>
<script src="some-file3.js"></script>
<!-- Dozens of similar lines here... -->

当然，我的HTML文件中这些行的顺序很重要。 Bootstrap将要求jQuery等。

我找到的第一件事是：requirejs。你只需指定这样的东西：

<script src="my-bundled-file.js"></script>

然后，您使用JS解决了依赖性问题。更进一步，我在这里找到了两种方法：

CommonJS（browserify）
AMD（require.js）

Webpack可以使用这两种方法，听起来不错。

最后，3个工具可以用于同一件事：仅在一个中捆绑多个文件。但我担心的是捆绑这些文件的顺序。

我不想关心这个，看起来像是使用这些解决方案（甚至是gulp + gulp-concat，就像建议的那样here），我只是在解决这个问题：现在，我指定了我的应用程序使用JS代码的模块，但我仍然需要按正确的顺序放置模块，即使使用WebPack（示例here：require调用必须是按照正确的顺序）

所以，我的问题：

我误解了这些工具吗？我只是想解决加载顺序问题，看起来我没有这样做
这些工具是否可以解决另一个问题（ES5中缺少原生模块，这会影响全球范围）？

Answer 1

我是否误解了这些工具？我只是想解决加载顺序问题，看起来我没有这样做

我想是的，是的。使用CommonJS和捆绑它的工具，负载顺序在很大程度上变得无关紧要，这是您不需要管理的东西。您只需require()所需的内容即可。在某些情况下，它仍然具有相关性，但主要与全局副作用和循环依赖性等事情有关。使用CommonJS并捆绑它与连接一系列脚本完全不同。

这些工具是否解决了另一个问题（ES5中缺少原生模块，这会驱使全球范围受到污染）？

CommonJS模块系统旨在解决JavaScript中缺少本机模块的问题，并在Node中使用它的一个版本。 Browserify的标题是＆＃34;浏览器＆＃34;的捆绑节点模块，虽然在实践中它还用于创建在Node中运行的捆绑包以及仅用于在浏览器中运行的捆绑模块。

在Node捆绑模块中是不必要的，因为Node包装您执行的代码并为其模块语义提供实现。要在浏览器中使用该系统运行模块，您需要将其捆绑，因为浏览器不会包装代码以向其提供构成模块接口的内容，例如require()，module， exports。捆绑器为您做的一部分：包装代码以提供该接口。

它为您做的另一件事，即解决有关排序的问题，是递归发现依赖关系。就像我说的那样，你require()在你需要的地方你需要什么，并将捆绑器指向一个入口脚本。捆绑器将分析脚本以查找任何require()并包括它们在捆绑中引用的模块。对于这些模块，它将无限期地重复。

我认为你会发现CommonJS比AMD有更多的牵引力，但是我说远远没有明确的Webpack胜过Browserify。两者都很受欢迎。 Browserify被广泛使用，包括构建Babel和React等项目的一部分。

我的建议是从Node风格的CommonJS模块和Browserify开始（注意：我是Browserify的维护者）。

在你更好地理解这一点之前，我建议不要使用涉及Angular的任何内容作为参考，以便在CommonJS模块化方面做些什么。我认为将Angular npm包装成适当的CommonJS形状会让他们感到很麻烦。

Requirejs vs browserify vs webpack for js loading order：am我只是将情况从一边移动到另一边？

1 个答案: