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

Jor*_*alo 17 javascript requirejs browserify webpack

好吧,这是2016年的WebPack看起来像对一个胜利者requirejsbrowserify.我一直在阅读这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... -->
Run Code Online (Sandbox Code Playgroud)

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

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

<script src="my-bundled-file.js"></script>
Run Code Online (Sandbox Code Playgroud)

然后,您使用JS解决依赖性问题.更进一步,我在这里发现了两种方法:

  • CommonJS(browserify)
  • AMD(require.js)

Webpack适用于这两种方法,听起来不错.

最后,3个工具可以用于同一件事:只在一个文件中捆绑几个文件.但我担心的是这些文件捆绑的顺序.

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

所以,我的问题:

  • 我误解了这些工具吗?我只是想解决加载顺序问题,看起来我没有这样做
  • 这些工具能否解决一个不同的问题(ES5中缺少原生模块,这会驱使全球范围受到污染)?

JMM*_*JMM 9

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

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

这些工具能否解决一个不同的问题(ES5中缺少原生模块,这会驱使全球范围受到污染)?

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

在Node中,捆绑模块不是必需的,因为Node包装您执行的代码并为其模块语义提供实现.要使用运行在浏览器中,你需要将其捆绑,因为浏览器不换行代码为它提供了组成模块接口的东西,系统模块,例如require(),module,exports.这是捆绑器为您做的一部分:包装代码以提供该接口.

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

我认为你会发现CommonJS比AMD更具吸引力,但我认为Webpack远远超过了Browserify的明显胜利.两者都很受欢迎.Browserify被广泛使用,包括构建像Babel和React这样的项目的一部分.

我的建议是从Node风格的CommonJS模块和Browserify开始(注意:我是Browserify的维护者).

在你更好地理解这一点之前,我建议不要使用任何涉及Angular的东西作为参考,以便在CommonJS模块化方面做些什么.我认为他们有很多麻烦只是让Angular npm包进入适当的CommonJS形状.

  • 真正完整的答案!感谢您的意见。我参与了一个 AngularJS 项目,我必须“模块化”它,使用任何可以完成的事情。主要关心的是摆脱那些几十个 &lt;script src="..."&gt; 调用。我认为 'require' 调用中的顺序很重要,但如果我理解你的话,它看起来并不重要。打包器将分析脚本以找到包含模块的正确方法。那我就试试browserify。 (2认同)
  • 是的,在大多数情况下,您不必担心订单.(你可能会有一些具有全局效果或副作用的东西.)它将摆脱数十个`<scripts>`.你可能想看一下我的回购:https://github.com/miniminirepro/browserify/tree/api.它是Browserify设置的基本示例.将你想要在页面加载中运行的代码放在`entry.js`和`require()`中,无论你需要什么顺序的任何顺序(只要它没有使其显着的全局副作用). (2认同)