前端基础走查(四)：模块化和工程化以及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

模拟实现一个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(抽象语法树)

参考

posted @ 2020-12-16 14:19  mingL  阅读(240)  评论(0)  编辑  收藏  举报