Jor*_*alo 17 javascript requirejs browserify webpack
好吧,这是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... -->
Run Code Online (Sandbox Code Playgroud)
当然,我的HTML文件中这些行的顺序很重要.Bootstrap将要求jQuery等.
我找到的第一件事是:requirejs.你只需指定这样的东西:
<script src="my-bundled-file.js"></script>
Run Code Online (Sandbox Code Playgroud)
然后,您使用JS解决依赖性问题.更进一步,我在这里发现了两种方法:
Webpack适用于这两种方法,听起来不错.
最后,3个工具可以用于同一件事:只在一个文件中捆绑几个文件.但我担心的是这些文件捆绑的顺序.
我不想关心这个,看起来像使用这些解决方案(甚至gulp + gulp-concat,就像这里建议的那样),我只是在解决问题:现在,我指定我的应用程序使用的模块JS代码,但我仍然需要以正确的顺序放置模块,即使使用WebPack(这里的示例:require
调用必须按正确顺序)
所以,我的问题:
我误解了这些工具吗?我只是想解决加载顺序问题,看起来我没有这样做
我想是的,是的.使用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形状.