必会！
参考文档：

作者：Sunshine_Lin

采用面向对象的方式，对上一篇【从零开始实现webpack核心打包过程】（面向过程）进行了封装，零散的方法封装成类调用，更具有webpack的形状，通过config.js配置
github代码仓库： https://github.com/all-smile/webpack-easy

原图理解

  1. 首先肯定是要先解析入口文件entry，将其转为AST(抽象语法树)，使用@babel/parser
  2. 然后使用@babel/traverse去找出入口文件所有依赖模块
  3. 然后使用@babel/core+@babel/preset-env将入口文件的AST转为Code
  4. 将2中找到的入口文件的依赖模块，进行遍历递归，重复执行1，2，3
  5. 重写require函数，并与4中生成的递归关系图一起，输出到bundle中

857cf7c7368d730b170e58860c04d7fc.png

代码实现

webpack具体实现原理是很复杂的，这里只是简单实现一下，了解一下webpack是怎么运作的。在代码实现过程中，大家可以自己console.log一下，看看ast，dependcies，code这些具体长什么样，我这里就不展示了，自己去看会比较有成就感，嘿嘿！！

项目目录

image.png

config.js

这个文件中模拟webpack的配置

  1. const path = require('path')
  2. module.exports = {
  3.   entry: './src/index.js',
  4.   output: {
  5.     path: path.resolve(__dirname, './dist'),
  6.     filename: 'main.js'
  7.   }
  8. }

入口文件

src/index.js是入口文件

  1. // src/index
  2. import add from "./add.js";
  3. console.log(add(1 , 2))
  5. // src/add.js
  6. export default (a, b) => a + b

1. 定义Compiler类

  1. // index.js
  2. class Compiler {
  3.   constructor(options) {
  4.     // webpack 配置
  5.     const { entry, output } = options
  6.     // 入口
  7.     this.entry = entry
  8.     // 出口
  9.     this.output = output
  10.     // 模块
  11.     this.modules = []
  12.   }
  13.   // 构建启动
  14.   run() {}
  15.   // 重写 require函数,输出bundle
  16.   generate() {}
  17. }

2. 解析入口文件,获取 AST

我们这里使用@babel/parser,这是babel7的工具,来帮助我们分析内部的语法,包括 es6,返回一个 AST 抽象语法树

  1. const fs = require('fs')
  2. const parser = require('@babel/parser')
  3. const options = require('./webpack.config')
  5. const Parser = {
  6.   getAst: path => {
  7.     // 读取入口文件
  8.     const content = fs.readFileSync(path, 'utf-8')
  9.     // 将文件内容转为AST抽象语法树
  10.     return parser.parse(content, {
  11.       sourceType: 'module'
  12.     })
  13.   }
  14. }
  16. class Compiler {
  17.   constructor(options) {
  18.     // webpack 配置
  19.     const { entry, output } = options
  20.     // 入口
  21.     this.entry = entry
  22.     // 出口
  23.     this.output = output
  24.     // 模块
  25.     this.modules = []
  26.   }
  27.   // 构建启动
  28.   run() {
  29.     const ast = Parser.getAst(this.entry)
  30.   }
  31.   // 重写 require函数,输出bundle
  32.   generate() {}
  33. }
  35. new Compiler(options).run()

3. 找出所有依赖模块

Babel 提供了@babel/traverse(遍历)方法维护这 AST 树的整体状态,我们这里使用它来帮我们找出依赖模块。

  1. const fs = require('fs')
  2. const path = require('path')
  3. const options = require('./webpack.config')
  4. const parser = require('@babel/parser')
  5. const traverse = require('@babel/traverse').default
  7. const Parser = {
  8.   getAst: path => {
  9.     // 读取入口文件
  10.     const content = fs.readFileSync(path, 'utf-8')
  11.     // 将文件内容转为AST抽象语法树
  12.     return parser.parse(content, {
  13.       sourceType: 'module'
  14.     })
  15.   },
  16.   getDependecies: (ast, filename) => {
  17.     const dependecies = {}
  18.     // 遍历所有的 import 模块,存入dependecies
  19.     traverse(ast, {
  20.       // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
  21.       ImportDeclaration({ node }) {
  22.         const dirname = path.dirname(filename)
  23.         // 保存依赖模块路径,之后生成依赖关系图需要用到
  24.         const filepath = './' + path.join(dirname, node.source.value)
  25.         dependecies[node.source.value] = filepath
  26.       }
  27.     })
  28.     return dependecies
  29.   }
  30. }
  32. class Compiler {
  33.   constructor(options) {
  34.     // webpack 配置
  35.     const { entry, output } = options
  36.     // 入口
  37.     this.entry = entry
  38.     // 出口
  39.     this.output = output
  40.     // 模块
  41.     this.modules = []
  42.   }
  43.   // 构建启动
  44.   run() {
  45.     const { getAst, getDependecies } = Parser
  46.     const ast = getAst(this.entry)
  47.     const dependecies = getDependecies(ast, this.entry)
  48.   }
  49.   // 重写 require函数,输出bundle
  50.   generate() {}
  51. }
  53. new Compiler(options).run()

4. AST 转换为 code

将 AST 语法树转换为浏览器可执行代码,我们这里使用@babel/core 和 @babel/preset-env。

  1. const fs = require('fs')
  2. const path = require('path')
  3. const options = require('./webpack.config')
  4. const parser = require('@babel/parser')
  5. const traverse = require('@babel/traverse').default
  6. const { transformFromAst } = require('@babel/core')
  8. const Parser = {
  9.   getAst: path => {
  10.     // 读取入口文件
  11.     const content = fs.readFileSync(path, 'utf-8')
  12.     // 将文件内容转为AST抽象语法树
  13.     return parser.parse(content, {
  14.       sourceType: 'module'
  15.     })
  16.   },
  17.   getDependecies: (ast, filename) => {
  18.     const dependecies = {}
  19.     // 遍历所有的 import 模块,存入dependecies
  20.     traverse(ast, {
  21.       // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
  22.       ImportDeclaration({ node }) {
  23.         const dirname = path.dirname(filename)
  24.         // 保存依赖模块路径,之后生成依赖关系图需要用到
  25.         const filepath = './' + path.join(dirname, node.source.value)
  26.         dependecies[node.source.value] = filepath
  27.       }
  28.     })
  29.     return dependecies
  30.   },
  31.   getCode: ast => {
  32.     // AST转换为code
  33.     const { code } = transformFromAst(ast, null, {
  34.       presets: ['@babel/preset-env']
  35.     })
  36.     return code
  37.   }
  38. }
  40. class Compiler {
  41.   constructor(options) {
  42.     // webpack 配置
  43.     const { entry, output } = options
  44.     // 入口
  45.     this.entry = entry
  46.     // 出口
  47.     this.output = output
  48.     // 模块
  49.     this.modules = []
  50.   }
  51.   // 构建启动
  52.   run() {
  53.     const { getAst, getDependecies, getCode } = Parser
  54.     const ast = getAst(this.entry)
  55.     const dependecies = getDependecies(ast, this.entry)
  56.     const code = getCode(ast)
  57.   }
  58.   // 重写 require函数,输出bundle
  59.   generate() {}
  60. }
  62. new Compiler(options).run()

image.png

5. 递归解析所有依赖项,生成依赖关系图

  1. const fs = require('fs')
  2. const path = require('path')
  3. const options = require('./webpack.config')
  4. const parser = require('@babel/parser')
  5. const traverse = require('@babel/traverse').default
  6. const { transformFromAst } = require('@babel/core')
  8. const Parser = {
  9.   getAst: path => {
  10.     // 读取入口文件
  11.     const content = fs.readFileSync(path, 'utf-8')
  12.     // 将文件内容转为AST抽象语法树
  13.     return parser.parse(content, {
  14.       sourceType: 'module'
  15.     })
  16.   },
  17.   getDependecies: (ast, filename) => {
  18.     const dependecies = {}
  19.     // 遍历所有的 import 模块,存入dependecies
  20.     traverse(ast, {
  21.       // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
  22.       ImportDeclaration({ node }) {
  23.         const dirname = path.dirname(filename)
  24.         // 保存依赖模块路径,之后生成依赖关系图需要用到
  25.         const filepath = './' + path.join(dirname, node.source.value)
  26.         dependecies[node.source.value] = filepath
  27.       }
  28.     })
  29.     return dependecies
  30.   },
  31.   getCode: ast => {
  32.     // AST转换为code
  33.     const { code } = transformFromAst(ast, null, {
  34.       presets: ['@babel/preset-env']
  35.     })
  36.     return code
  37.   }
  38. }
  40. class Compiler {
  41.   constructor(options) {
  42.     // webpack 配置
  43.     const { entry, output } = options
  44.     // 入口
  45.     this.entry = entry
  46.     // 出口
  47.     this.output = output
  48.     // 模块
  49.     this.modules = []
  50.   }
  51.   // 构建启动
  52.   run() {
  53.     // 解析入口文件
  54.     const info = this.build(this.entry)
  55.     this.modules.push(info)
  56.     this.modules.forEach(({ dependecies }) => {
  57.       // 判断有依赖对象,递归解析所有依赖项
  58.       if (dependecies) {
  59.         for (const dependency in dependecies) {
  60.           this.modules.push(this.build(dependecies[dependency]))
  61.         }
  62.       }
  63.     })
  64.     // 生成依赖关系图
  65.     const dependencyGraph = this.modules.reduce(
  66.       (graph, item) => ({
  67.         ...graph,
  68.         // 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容
  69.         [item.filename]: {
  70.           dependecies: item.dependecies,
  71.           code: item.code
  72.         }
  73.       }),
  74.       {}
  75.     )
  76.   }
  77.   build(filename) {
  78.     const { getAst, getDependecies, getCode } = Parser
  79.     const ast = getAst(filename)
  80.     const dependecies = getDependecies(ast, filename)
  81.     const code = getCode(ast)
  82.     return {
  83.       // 文件路径,可以作为每个模块的唯一标识符
  84.       filename,
  85.       // 依赖对象,保存着依赖模块路径
  86.       dependecies,
  87.       // 文件内容
  88.       code
  89.     }
  90.   }
  91.   // 重写 require函数,输出bundle
  92.   generate() {}
  93. }
  95. new Compiler(options).run()

image.png

6. 重写 require 函数,输出 bundle

  1. const fs = require('fs')
  2. const path = require('path')
  3. const options = require('./webpack.config')
  4. const parser = require('@babel/parser')
  5. const traverse = require('@babel/traverse').default
  6. const { transformFromAst } = require('@babel/core')
  8. const Parser = {
  9.   getAst: path => {
  10.     // 读取入口文件
  11.     const content = fs.readFileSync(path, 'utf-8')
  12.     // 将文件内容转为AST抽象语法树
  13.     return parser.parse(content, {
  14.       sourceType: 'module'
  15.     })
  16.   },
  17.   getDependecies: (ast, filename) => {
  18.     const dependecies = {}
  19.     // 遍历所有的 import 模块,存入dependecies
  20.     traverse(ast, {
  21.       // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
  22.       ImportDeclaration({ node }) {
  23.         const dirname = path.dirname(filename)
  24.         // 保存依赖模块路径,之后生成依赖关系图需要用到
  25.         const filepath = './' + path.join(dirname, node.source.value)
  26.         dependecies[node.source.value] = filepath
  27.       }
  28.     })
  29.     return dependecies
  30.   },
  31.   getCode: ast => {
  32.     // AST转换为code
  33.     const { code } = transformFromAst(ast, null, {
  34.       presets: ['@babel/preset-env']
  35.     })
  36.     return code
  37.   }
  38. }
  40. class Compiler {
  41.   constructor(options) {
  42.     // webpack 配置
  43.     const { entry, output } = options
  44.     // 入口
  45.     this.entry = entry
  46.     // 出口
  47.     this.output = output
  48.     // 模块
  49.     this.modules = []
  50.   }
  51.   // 构建启动
  52.   run() {
  53.     // 解析入口文件
  54.     const info = this.build(this.entry)
  55.     this.modules.push(info)
  56.     this.modules.forEach(({ dependecies }) => {
  57.       // 判断有依赖对象,递归解析所有依赖项
  58.       if (dependecies) {
  59.         for (const dependency in dependecies) {
  60.           this.modules.push(this.build(dependecies[dependency]))
  61.         }
  62.       }
  63.     })
  64.     // 生成依赖关系图
  65.     const dependencyGraph = this.modules.reduce(
  66.       (graph, item) => ({
  67.         ...graph,
  68.         // 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容
  69.         [item.filename]: {
  70.           dependecies: item.dependecies,
  71.           code: item.code
  72.         }
  73.       }),
  74.       {}
  75.     )
  76.     this.generate(dependencyGraph)
  77.   }
  78.   build(filename) {
  79.     const { getAst, getDependecies, getCode } = Parser
  80.     const ast = getAst(filename)
  81.     const dependecies = getDependecies(ast, filename)
  82.     const code = getCode(ast)
  83.     return {
  84.       // 文件路径,可以作为每个模块的唯一标识符
  85.       filename,
  86.       // 依赖对象,保存着依赖模块路径
  87.       dependecies,
  88.       // 文件内容
  89.       code
  90.     }
  91.   }
  92.   // 重写 require函数 (浏览器不能识别commonjs语法),输出bundle
  93.   generate(code) {
  94.     // 输出文件路径
  95.     const filePath = path.join(this.output.path, this.output.filename)
  96.     // 懵逼了吗? 没事,下一节我们捋一捋
  97.     const bundle = `(function(graph){
  98.       function require(module){
  99.         function localRequire(relativePath){
  100.           return require(graph[module].dependecies[relativePath])
  101.         }
  102.         var exports = {};
  103.         (function(require,exports,code){
  104.           eval(code)
  105.         })(localRequire,exports,graph[module].code);
  106.         return exports;
  107.       }
  108.       require('${this.entry}')
  109.     })(${JSON.stringify(code)})`
  111.     // 把文件内容写入到文件系统
  112.     fs.writeFileSync(filePath, bundle, 'utf-8')
  113.   }
  114. }
  116. new Compiler(options).run()

7. 看看main里的代码

实现了上面的代码，也就实现了把打包后的代码写到main.js文件里，咱们来看看那main.js文件里的代码吧：

  1. (function (graph) {
  2.   function require(module) {
  3.     if (!module) {
  4.       return;
  5.     }
  6.     function localRequire(relativePath) {
  7.       return require(graph[module].dependecies[relativePath]);
  8.     }
  9.     var exports = {};
  10.     (function (require, exports, code) {
  11.       eval(code);
  12.     })(localRequire, exports, graph[module].code);
  13.     return exports;
  14.   }
  15.   require("./src/index.js");
  16. })({
  17.   "./src/index.js": {
  18.     dependecies: { "./add.js": "./src\\add.js" },
  19.     code: '"use strict";\n\nvar _add = _interopRequireDefault(require("./add.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log((0, _add["default"])(1, 2));',
  20.   },
  21.   "./src\\add.js": {
  22.     dependecies: {},
  23.     code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports["default"] = void 0;\n\nvar _default = function _default(a, b) {\n  return a + b;\n};\n\nexports["default"] = _default;',
  24.   },
  25. });

大家可以执行一下main.js的代码，输出结果是：

  1. 3