脚本宝典收集整理的这篇文章主要介绍了[译]开启webpack之旅( 一 )：动机，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
@H_745_@R_406_2621@@
模块向全局对象（即window对象）暴露一个接口，模块通过全局对象访问依赖的接口。
缺点：

全局空间的污染
需要合理的加载顺序
开发者要解决模块/库的依赖
大型项目中列表冗长且难以管理

CommonJs:同步调用
CommonJs采用require方法同步调用依赖并返回暴露的接口。一个模块可以通过添加暴露对象的属性或设定module.exports的值被暴露出来。

      

      
      
      
      
require("module");
require("../file.js");
exports.DOStuff = function() {};
module.exports = someValue;

该方法以通过node.js被使用于服务端。
优势

服务端模块可以被复用
有大量现成的模块(如npm)
简单且易于使用

不足

阻塞式并不能很好地适用于互联网，网络环境需要异步调用
无法平行加载多个模块

具体应用

服务端node.js
browserify
webmake：编译成为一个bundle
客户端wreq

AMD：异步调用
异步模块的定义
在客户端其他同步模块系统有着同样的问题，下面介绍一种异步的版本，包括其如何定义变量与暴露值：

      

      
      
      
      
require(["module", "../file"], function(module, file) { /* ... */ });
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});
优势

满足客户端异步调用风格
可平行加载多个模块

不足

头部声明不利于阅读和编写
看上去像是一种妥协

@H_823_304@具体应用

客户端require.js
客户端curl
关于更多CommonJS与AMD

ES6模块
ecmascript6向JavaScript添加了许多语言结构，因此形成了另一种模块系统。

      

      
      
      
      
import "jquery";
export function doStuff() {}
module "localModule" {}

优势

易于静态解析
未来将成为ES标准

不足

还有待浏览器支持
由于比较新，这种方式的实现较少

客观的意见
应然开发者自己选择模块风格，使已存在的代码与库可以正常工作，以简单的方式添加习惯的模块风格。
加载
由于模块需要在客户端执行，因此需要在客户端加载服务端模块。
以下是两种比较极端的模块加载：

一个模块写一个加载
所有模块写在一个加载中
两者都应用广泛，但都有所不足：

一个模块写一个加载

优势：只有一个模块需要加载
不足：越多模块意味着越多的顶部声明
不足：由于需要较长的加载时间，应用启动较慢



所有模块写一个加载

优势：更少的顶部声明，更快的加载
不足：不需要的模块也同时被加载



分块加载
一种更灵活的加载似乎更好。一种介于这两种极端中间的方式对大多数情况来的更好。
当编译所有模块时：把模块的集合拆分成许多更小的chunk（块）。
这能实现更小更快的加载。由模块组成的chunks在初始化的时候并不会被加载。当需要使用模块时，才加载块，这加快了应用加载的速度。
如何分割模块集合取决于开发者。
这让组织大量代码成为可能！
注意：这一想法来源于Google’s GWT。
了解更多关于代码拆分
为何只提到JavaScript
有许多其他资源如样式、图片、字体、HTML 模板也需要处理，为何只提及JavaScript？也还有其他需要编译的资源：coffee script，elm，less，jade，i18n等。
如果把他们都看成chunk（块）事情就变得很简单：

      

      
      
      
      
require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");
了解更多关于使用加载
静态解析
当编译所有这些模块时，静态解析会试图找到它的依赖。
通常，只能解析一些简单的格式，但像("./template/" + templateName + ".jade") 又是一种常见的书写格式。
并且多数库都采用不同的写法，有些写法时很奇特的…
策略
一款好的语法分析程序可以是大多数现存代码正常运行。如果开发者风格奇特，它也会试图去找到最合适的解决方法。
译者注:
这个系列会试图将webpack的官方文档都翻译一遍，未翻译的链接，翻译后会改成相应中文翻译页面。
脚本宝典总结
       
以上是脚本宝典为你收集整理的[译]开启webpack之旅( 一 )：动机全部内容，希望文章能够帮你解决[译]开启webpack之旅( 一 )：动机所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。