[译]开启webpack之旅( 一 )：动机

原文地址

现今Web网页正逐步向Web App进化，主要体现在：

• 越来越多依赖JavaScript的使用。

• 现代浏览器提供了多样化的接口。

• 更多的局部加载代替全局刷新，甚至单个页面代码量的提升。

因此，客户端将承载大量代码！
大量的底层代码需要被组织。而模块系统则提供了一个可以将底层代码分割成不同模块的方式。

常见的模块系统风格

对于如何定义依赖与引用，存在许多不同的标准：

• 模块向全局对象（即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;
  });

  优势

  • 满足客户端异步调用风格

  • 可平行加载多个模块

  不足

  • 头部声明不利于阅读和编写

  • 看上去像是一种妥协

  具体应用

  • 客户端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的官方文档都翻译一遍，未翻译的链接，翻译后会改成相应中文翻译页面。