前端基础走查(四)：模块化和工程化以及webpack原理

模块化发展历程

IIFE： 使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。

(function(){
  return {
	data:[]
  }
})()

AMD(Asynchronous Module Definition)： 使用requireJS 来编写模块化，特点：依赖必须提前声明好。

define('./index.js',function(code){
// code 就是index.js 返回的内容
})

CMD(Common Module Definition)： 使用seaJS 来编写模块化，特点：支持动态引入依赖文件。

define(function(require, exports, module) {  
  var indexCode = require('./index.js');
});

CommonJS： nodejs 中自带的模块化。

var fs = require('fs');

UMD：兼容AMD，CommonJS 模块化语法。

webpack(require.ensure)：webpack 2.x 版本中的代码分割。

ES Modules： ES6 引入的模块化，支持import 来引入另一个 js 。

import a from 'a';

es6模块和commonjs模块

浏览器支持使用es6模块，node支持使用commjs模块
es6 import加载和node commonjs加载

import a from 'a-module'; // 编译时加载
const a = require('a-module'); // 运行时加载

• 问：编译时与运行时分别是什么，有什么区别？
• 答：编译时即代码翻译的过程，将人能理解的代码翻译成机器能理解的代码。运行时即代码执行的过程，机器解读代码。所以我们的require可以在代码的任何地方运行成功，import只能写在模块的开头。

es6模块：export + import
commonjs模块：module.exports + require

• 问：node.js(v13.2以上版本)里要使用import和export怎么办？
• 答：文件扩展名改成.mjs

package.json文件指定模块入口文件，main和exports
优先级： exports > main

es6模块中不存在以下变量

1. this
2. arguments
3. require
4. module
5. exports
6. __filename
7. __dirname

前端模块化的重要意义？

1. 合作：多人协作互不干扰，避免全局污染
2. 灵活架构，焦点分离
3. 解耦：方便模块间组合、分解 、解耦
4. 方便单个模块功能调试、升级
5. 测试：可测试性，单元测试

模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。

webpack工作原理

将js模块（entry）打包成一个js文件（output），在这个过程中可以添加一些文件转化操作（loader）和文件处理操作（plugin）。这些配置都统一配置到webpack.config.js中，webpack能读取这个配置文件，按照这个规则进行打包。webpack真正的核心是能让用户自己写loader和plugin自定义打包规则，能很大程度的按照用户的意愿打包出满意的js和css文件，例如我们可以使用代码压缩插件来减少包体积，可以使用样式转换loader来将css文件引入到我们的js文件中，css-loader、style-loader等等。本质上，webpack是一种事件流的机制，它的工作流程就是各个插件串联起来，而实现这一切的核心就是Tapable。

手写一个webpack的loader和plugin

• 写一个自定义的loader

• 写一个自定义的plugin

模拟实现一个webpack

webpack可以做什么？重要的两个点如下

• 转换 ES6 语法成 ES5，语法转换，只做js文件的转换。
• 处理模块加载依赖，依赖加载。

问题汇总(FAQ)

1. 实现require()函数
2. es6模块和commonjs模块区别
3. 写一个webpack plugin
4. webpack plugin和loader有啥区别？
5. 做过哪些webpack优化？
6. 什么是tree shaking？它的作用？如何使用？
7. webpack打包多页应用
8. babel与ast(抽象语法树)

参考

• 第 26 题: 介绍模块化发展历程
• MDN文档 JavaScript modules 模块
• MDN文档 IIFE（立即调用函数表达式）
• 浅谈JavaScript 模块化
• webpack工程化打包原理解析与实现
• astexplorer
• 不容错过的 Babel7 知识
• 深入解析ES Module（一）：禁用export default object
• ECMAScript 6 入门 Module 的语法
• ECMAScript 6 入门 Module 的加载实现
• webpack中文网 编写一个 loader
• webpack中文网 编写一个插件
• 手写一个webpack插件
• webpack实战-手写一个loader