01 - 动机 - Webpack 官方文档翻译 Get Started

如果您觉得该文档对您有帮助，请打赏，五毛十毛均可。另外，转载请注明作者及出处。

Web 应用程序已经变得非常复杂，我们需要用项目构建工具来应对这种复杂性，处理各种可能遇到的问题

模块系统的标准问题

目前模块系统有几种不同的标准：

• 各个模块中的接口都会被导入到全局对象中，比如 window 对象；这样就可以在任何地方通过全局对象访问这些接口

  问题：

  • 可会能引发冲突
  • 加载顺序难以管理
  • 依赖问题难以管理
  • 引入的脚本会非常多，难以阅读和理解

  CommonJs 标准：同步 require

  创建模块的时候，通过给 exports 对象添加属性和方法，或者通过给 module.exports 设置值来定义模块的接口。

  引用的时候，使用同步 require 方法导入模块的接口。

  //导入模块
  require("module");
  require("../file.js");
  
  //创建模块接口
  exports.doStuff = function() {};
  module.exports = someValue;
  

  这种方法常常被用在服务端的 node.js 程序中。

  优点

  • 在服务端，模块可以被重用
  • 已经有大量这样的模块，通过 npm 管理
  • 简单

  缺点

  • 因为是同步导入模块，会导致程序挂起，不适用于网络应用
  • 不能并行导入多个模块

  实现

  • node.js 用在服务端
  • browserify
  • modules-webmake 编译成一个包
  • wreq 用在客户端

  AMD 标准：异步 require

  AMD 标准中，定义模块和导入模块的方式与 CommonJs 是不一样的

  //导入模块
  require(["module", "../file"], function(module, file) { /* ... */ });
  
  //定义模块
  define("mymodule", ["dep1", "dep2"], function(d1, d2) {
    return someExportedValue;
  });
  
  

  优点：

  • 适用于网络应用
  • 可以并行导入多个模块

  缺点：

  • 编码复杂，阅读和书写都很困难
  • 有很多替代方法

  实现：

  • require.js 客户端
  • curl 客户端

  ES6 模块

  EcmaScript6 从语言层面内建了模块系统

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

  优点：

  • 行业标准

  确定：

  • 目前很多浏览器还不支持 ES6
  • 目前很少有模块使用这种方式

  最佳方式

  能够让开发者自己选择模块标准，即时可以使用已经存在的代码库，也能容易的添加自己定义的模块。

  传输问题

  如果想让模块在客户端执行，必须通过网络从服务端将他们传输过来。极端情况下，会出现下面这两种情况：

  • 为每个模块发送一个请求
  • 所有模块只用一个请求

  通常，我们两种情况都会遇到，两种情况都存在一些问题：

  • 每个模块一个请求

    • 优点：只请求需要的模块
    • 缺点：会有很多请求，造成性能问题

  • 所有模块一个请求

    • 优点：请求少，不会造成性能问题
    • 确定：会引入很多无用的模块

  折中方式

  折中的方式是：将所有模块编译成几个小的分块，减少了请求数量，也减少了无效的引用

  资源管理问题

  当前的 Web 引用已经很复杂，除了 Javascript ，还有其他各种资源需要引入：

  • stylesheets 样式表
  • images 图片
  • webfonts 字体
  • html 模板
  • 其他

  除此以外，还有一些翻译转换工作

  • coffeescript → javascript
  • elm → javascript
  • less stylesheets → css stylesheets
  • jade templates → javascript which - generates html
  • i18n files → something
  • 其他

  我们希望能像下面这样引入资源

  require("./style.css");
  require("./style.less");
  require("./template.jade");
  require("./image.png");
  

  依赖管理问题

  现代 Web 应用会导入很多外部依赖，管理起来非常困难，特别是某些依赖还是以表达式的形式出现，比如

  require("./template/" + templateName + ".jade")
  

  除此以外，还有很多其他稀奇古怪的形式。

  策略

  一个优秀的解析器可以让使用各种古怪依赖管理的代码正常运行。