手写一个简单的 webpack 编译代码

时间  2021-08-12
标签 html node webpack git github web npm json api 浏览器 栏目 HTML 繁體版
原文   原文链接

1、webpack 打包编译的主要流程

compiler 的流程：
  1. 将 webpack.config.js 做为参数传入 Compiler 类 (entry-options）
  2. 建立 Compiler 实例
  3. 调用 Compiler.run 开始编译 （make）
  4. 建立 Compilation（ compiler 内建立 compilation 对象，并将 this 传入，compilation 就包含了对 compiler 的引用）
  5. 基于配置开始建立 Chunk （读取文件，转成 AST ）
  6. 使用 Parser 从 Chunk 开始解析依赖 （找到依赖关系）
  7. 使用 Module 和 Dependency 管理代码模块相互依赖关系 (build-module）
  8. 使用 Template 基于 Compilation 的数据生成结果代码
  • 能够简单分为这三个阶段
step

2、准备工做

咱们先建一个项目，目录以下：html

selfWebpack
    - src
      - data.js
      - index.js
      - random.js
复制代码
// index.js
import data from './data.js'
import random from './random.js'

console.log('🐻我是数据文件--->', data)
console.log('🦁我是随机数--->', random)
console.log('🐺我是index.js')
复制代码
// data.js
const result = '我是文件里面的数据'

export default result
复制代码
// random.js
const random = Math.random()

export default random

复制代码

而后咱们先用 webpack 进行一次打包，分析一下 咱们须要作什么工做node

// 基本安装
npm init -y
npm install webpack@4.44.2 webpack-cli@4.2.0 --save-dev
复制代码
// package.json
// 修改
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode development"
},
复制代码

整理一下打包后的代码webpack

(function(modules) {
  var installedModules = {};
  function __webpack_require__(moduleId) {
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} };
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    module.l = true;
    return module.exports;
  }
  // Load entry module and return exports
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
})({
  "./src/data.js": function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
    const result = '我是文件里面的数据'
    __webpack_exports__["default"] = (result);

  },
  "./src/index.js": function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
    var _random_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./src/random.js");
    console.log('🐻我是数据文件--->', _data_js__WEBPACK_IMPORTED_MODULE_0__["default"])
    console.log('🦁我是随机数--->', _random_js__WEBPACK_IMPORTED_MODULE_1__["default"])
    console.log('🐺我是index.js')
  },
  "./src/random.js": function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
    const random = Math.random()
    __webpack_exports__["default"] = (random);
  }
});
复制代码

最外层是一个当即执行函数，入参是全部的 modules（模块） list。传入的 modules 参数是一个对象。git

  • 对象的格式是，文件名: 方法。
  • key 是 index.js 文件的相对路径，value 是一个匿名函数，函数体里面就是我们写在 index.js 里的代码。（这就是 webpack 加载模块的方式）
咱们要是实现的两个功能
  1. import 变成 __webpack_require__
  2. 读取模块中的全部依赖，生成一个 Template

3、开始搭建本身的 selfpack

  • 实现 打包编译的代码，放在 src 同级的 selfpack 目录，再增长一个配置文件(selfpack.config.js)，以下：
selfWbpack
    + src
    // 新增
    - selfpack
      - compilation.js
      - compiler.js
      - index.js
      - Parser.js
    - selfpack.config.js
复制代码
// selfpack.config.js
const { join } = require('path')
module.exports = {
  entry: join(__dirname, './src/index.js'),
  output: {
    path: join(__dirname, './dist'),
    filename: 'main.js'
  }
}
复制代码

4、实现转换 AST

  • 为何要转成 ast ？ 由于有 import ，咱们要把它替换成 webpack_require 。
  • 怎么作？ 遍历 AST ，把其中 import 语句引入的文件路径收集起来。
  1. 第一步，实现经过参数找到入口文件并获取文件内容
  2. 第二步，转成 AST
  3. 第三步，解析主模块文件依赖
  4. 第四步，将 AST 转换回 JS 代码
  5. 第五步，分析模块之间的依赖关系，将 import 替换成 webpack_require
4.1 获取入口文件
// selfpack/index.js
const Compiler = require('./Compiler')
const options = require('../selfpack.config.js')
const compiler = new Compiler(options)
compiler.run()
复制代码
// selfpack/compilation.js
const fs = require('fs')

class Compilation {
  constructor(compiler) {
    const { options } = compiler
    this.options = options
  }compiler
  static ast(path){
    const content = fs.readFileSync(path, 'utf-8') // 读取文件
    console.log('获取文件', content)
  }
  buildModule(absolutePath, isEntry) {
    this.ast(absolutePath)
  }
}
module.exports = Compilation
复制代码

npm install tapablegithub

// selfpack/compiler.js
const { SyncHook } = require('tapable')
const Compilation = require('./Compilation')

class Compiler {
  constructor(options) {
    this.options = options
    this.hooks = {
      run: new SyncHook()
    }
  }
  run() {
    this.compile()
  }
  compile() {
    const compilation = new Compilation(this)
     //经过entry找入口文件
     const entryModule = compilation.buildModule(this.options.entry, true)
  }
}
module.exports = Compiler
复制代码

静态方法 MDNweb

// selfpack/Parser.js
const fs = require('fs')
class Parser{
  static ast(path) {
    const content = fs.readFileSync(path, 'utf-8') // 读取文件
    console.log('读取文件', content)
  }
}
module.exports = Parser
复制代码

将 selfpack.config.js 做为参数传入 Compiler 类,执行 run 方法。 经过 new 一个 Compilation 实例，调用 buildModule()npm

  • buildModule( absolutePath, isEntry )
    • absolutePath: 入口文件的绝对路径
    • isEntry: 是不是主模块

获取入口文件的结果：json

getEntryFile

第一步成功实现，下面实现第二步转成ASTapi

4.2 转化成AST

这一步须要用到 @babel/parser ， 将代码转化为 AST 语法树。
npm install @babel/parser sourceType 表明咱们要解析的是ES模块浏览器

  • 调用 Parser.ast()
  • 经过 readFileSync 读取文件内容，传给 parser.parse() 获得 AST。
// selfpack/Parser.js
const fs = require('fs')
const parser = require('@babel/parser')

class Parser{
  static ast(path) {
    const content = fs.readFileSync(path, 'utf-8') // 读取文件
    console.log('读取文件', content)
    const _ast = parser.parse(content, {
      sourceType: 'module' //表示咱们要解析的是ES模块
    })
    console.log(_ast)
    console.log('我是body内容', _ast.program.body)
    return _ast
  }
}
module.exports = Parser
复制代码
getAST

到这一步咱们很顺利！ 这是整个文件的信息，而咱们须要的文件内容在它的属性 program 里的 body 里。 看一下 body 的内容

getASTBody

这是 src/index.js 的一个 import 的 Node 属性，它的类型是 ImportDeclaration。

4.3 解析主模块文件依赖

接下来，解析主模块。

遍历AST要用到 @babel/traverse
npm install @babel/traverse
traverse() 的用法：第一个参数就是 AST ，第二个参数就是配置对象

// selfpack/Parser.js
const traverse  = require('@babel-traverse').default
const fs = require('fs')
const parser = require('@babel/parser')
const path = require('path')

class Parser{
  static ast(path){
    const content = fs.readFileSync(path, 'utf-8') // 读取文件
    const _ast = parser.parse(content, {
      sourceType: 'module' //表示咱们要解析的是ES模块
    })
    console.log(_ast)
    console.log('我是body内容', _ast.program.body)
    return _ast
  }
  static getDependecy(ast, file) {
    const dependecies = {}
    traverse(ast, {
      ImportDeclaration: ({node}) => {
        const oldValue = node.source.value
        const dirname = path.dirname(file)
        const relativepath = "./" + path.join(dirname, oldValue) 
        dependecies[oldValue] = relativepath
        node.source.value = relativepath // 将 ./data.js 转化成 ./src/data.js
      }
    })
    return dependecies
  }
}
module.exports = Parser
复制代码
  • 调用 Parser.getDependecy 方法，获取主模块的依赖路径，修改源码。
  • getDependecy()： 静态方法，是对 type 为 ImportDeclaration 的节点的处理。
  • node.source.value： 就是 import 的值。
  • 由于咱们打包后的代码，入参部分的 key 变成了 ./src/data.js，因此这里也须要作出相应的改变

import data from './data.js' ==> require('./data.js') ==> require('./src/data.js')

relativepath： 这里获取的是依赖的文件路径
dependecies： 是收集的依赖对象，key 为 node.source.value ，value 为转换后的路径。

import data from './data.js'
import random from './random.js'
复制代码

node.source.value： 指的是 from 后面的 './data.js' 、'./random.js'

path.relative(from, to)： 方法根据当前工做目录返回 ( from ) 到 ( to ) 的 ( 相对路径 )

process.cwd()： 返回 Node.js 进程的当前工做目录（path.resolve()）

// selfpack/compilation.js
const Parser = require('./Parser')
const path = require('path')

class Compilation {
  constructor(compiler) {
    const { options } = compiler
    this.options = options
    this.entryId
    // 增长
    this.root = process.cwd() // 执行命令的当前目录
  }
  buildModule(absolutePath, isEntry) {
    let ast = ''
    ast = Parser.ast(absolutePath)
    const relativePath = './' + path.relative(this.root, absolutePath)
    if(isEntry){
      this.entryId = relativePath
    }
    const dependecies = Parser.getDependecy(ast, relativePath)
    console.log("依赖项", dependecies)
  }
}
module.exports = Compilation
复制代码

遍历以后 在 ast 里面找到节点类型， 经过 index.js 的 ast 获取到 index.js 文件的依赖（也就是data.js、random.js）

getDependecies

主模块的依赖路径已经所有找到啦！ 走到这一步，离成功就不远了。

4.4 转换代码

接下来是转换代码，就是将修改后的 AST 转换成 JS 代码。
用到了 @babel/core 的 transformFromAst 和 @babel/preset-env。
安装一下 npm install @babel/core @babel/preset-env

  • transformFromAst： 就是将咱们传入的 AST 转化成咱们在第三个参数（@babel/preset-env）里配置的模块类型，会返回转换后的代码

@babel/preset-env 是将咱们使用的 JS 新特性转换成兼容的代码。

此时 Parser.js 长这样

// selfpack/Parser.js 完整
const traverse  = require('@babel-traverse').default
const fs = require('fs')
const parser = require('@babel/parser')
const path = require('path')
// 增长
const { transformFromAst } = require('@babel/core')

class Parser{
  static ast(path){
    const content = fs.readFileSync(path, 'utf-8') // 读取文件
    const _ast = parser.parse(content, {
      sourceType: 'module' //表示咱们要解析的是ES模块
    })
    console.log(_ast)
    console.log('我是body内容', _ast.program.body)
    return _ast
  }
  static getDependecy(ast, file) {
    const dependecies = {}
    traverse(ast, {
      ImportDeclaration: ({node}) => {
        const oldValue = node.source.value
        const dirname = path.dirname(file)
        const relativepath = "./" + path.join(dirname, oldValue) 
        dependecies[oldValue] = relativepath
        node.source.value = relativepath // 将 ./data.js 转化成 ./src/data.js
      }
    })
    return dependecies
  }
  // 增长
  static transform(ast) {
    const { code } = transformFromAst(ast, null, {
        presets: ['@babel/preset-env']
    })
    return code
  }
}
module.exports = Parser
复制代码
// selfpack/compilation.js
  ...
  buildModule(absolutePath, isEntry) {
    let ast = ''
    ast = Parser.ast(absolutePath)
    const relativePath = './' + path.relative(this.root, absolutePath)
    if(isEntry){
      this.entryId = relativePath  // 保存主入口的文件路径
    }
    const dependecies = Parser.getDependecy(ast, relativePath)
    // 增长
    const transformCode = Parser.transform(ast)
    console.log("转换后的代码 ", transformCode)
    return {
      relativePath,
      dependecies,
      transformCode 
    }
  }
}
  ...
复制代码

先来看下结果:

getTransformFromAst

能够看到 const 成功转换成了 var，可是 require("./data.js") 引用的路径尚未和 modules 的 key 保持一致。

4.5 递归收集依赖

咱们怎么去肯定一个模块应该包含什么信息呢？
首先要肯定这个文件的惟一性，因此咱们须要要的文件路径，由于这个是惟一的。
而后再来分析文件的内容：

  • 是否引入了其余文件
  • 本身的主体内容

因此咱们须要的模块信息以下：

  • 该模块的路径
  • 该模块的依赖
  • 该模块转换后的代码

这里咱们获取转换后的代码，并在 buildModule 返回一个对象，返回值结构以下：

// 获取的模块信息
  {
    relativePath: './src/xxx',
    dependecies: {
      './data.js': './src/data.js',
      './random.js': './src/random.js'
    },
    transformCode: {
      ...
    }
  }
复制代码

可是 buildModule 只能收集一个模块的依赖，而咱们最终的目的是收集全部依赖，因此咱们要作一个递归处理。 修改一下 compiler.js

// selfpack/compiler.js
  ...
  compile() {
    const compilation = new Compilation(this)
     //经过entry找入口文件
    const entryModule = compilation.buildModule(this.options.entry, true)

    // 增长
    this.modules.push(entryModule)
    this.modules.map((_module) => {
      const deps = _module.dependecies
      for (const key in deps){
        if (deps.hasOwnProperty(key)){
          this.modules.push(compilation.buildModule(deps[key], false))
        }
      }
    })
    console.log('最终的 modules', this.modules)
  }
  ...
复制代码

先来看一下 compile 中递归的方法：

  1. 将主入口文件传入buildModule ，获得主入口的文件模块
  2. 最外层遍历的主入口文件的模块
  3. 而后获取主模块的依赖全部模块
  4. 把依赖的模块 push 到 this.modules 里

来看一下最终的 modules

getModules

成功获得了包含全部模块的：路径、依赖、转换后的代码。

5、生成 webpack 模版文件

编译的最后一步就是 生成模板文件，并放到 output 目录。
咱们直接借用文章开头那段打包出来的 dist/main.js 文件的内容，而后作些修改。
来看修改后的的 compilation.js

// selfpack/compilation.js 完整
const path = require('path')
const Parser = require('./Parser')
const fs = require('fs')


class Compilation {
  constructor(compiler) {
    // 修改
    const { options, modules } = compiler
    this.options = options
    this.root = process.cwd() // 执行命令的当前目录
    this.entryId
    // 增长
    this.modules = modules
  }
  buildModule(absolutePath, isEntry) {
    let ast = ''
    ast = Parser.ast(absolutePath)
    const relativePath = './' + path.relative(this.root, absolutePath)
    if(isEntry){
      this.entryId = relativePath
    }
    const dependecies = Parser.getDependecy(ast, relativePath)
    const transformCode = Parser.transform(ast)
    // console.log("依赖项", dependecies)
    // console.log("转换后的代码 ", transformCode)
    return {
      relativePath,
      dependecies,
      transformCode 
    }
  }
  // 增长
  emitFiles(){
    let _modules = ''
    const outputPath = path.join(
      this.options.output.path,
      this.options.output.filename
    )
    this.modules.map((_module) => {
      // 记得加引号
      _modules += `'${_module.relativePath}': function(module, exports, require){ ${_module.transformCode} },`
    })
    const template = ` (function(modules) { var installedModules = {}; function __webpack_require__(moduleId) { // Check if module is in cache if(installedModules[moduleId]) { return installedModules[moduleId].exports; } var module = installedModules[moduleId] = { exports: {} }; modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); return module.exports; } // 执行的入口函数 return __webpack_require__('${this.entryId}'); })({ ${_modules} }) `
    const dist = path.dirname(outputPath)
    fs.mkdirSync(dist)
    fs.writeFileSync(outputPath, template, 'utf-8')
  }
}
module.exports = Compilation
复制代码

打包以后的文件内容，大致上长这样，还有点小瑕疵。
看下 emitFiles 函数的做用

  1. 获取 selfpack.config.js 中的 output 对象的 path，filename
  2. 遍历全部的 modules 并放在模板的入参位置
  3. 新建一个文件，将编译后的代码写入

完整的 compiler

// selfpack/compiler.js 完整
const { SyncHook } = require('tapable')
const Compilation = require('./Compilation')

class Compiler {
  constructor(options) {
    this.modules = []
    this.options = options
    this.hooks = {
      run: new SyncHook()
    }
  }
  run() {
    this.compile()
  }
  compile() {
    const compilation = new Compilation(this)
    const entryModule = compilation.buildModule(this.options.entry, true)
    this.modules.push(entryModule)
    this.modules.map((_module) => {
      const deps = _module.dependecies
      for (const key in deps){
        if (deps.hasOwnProperty(key)){
          this.modules.push(compilation.buildModule(deps[key], false))
        }
      }
    })
    // 增长
    compilation.emitFiles()
  }
}
module.exports = Compiler
复制代码

编译后的代码以下：

// dist/main.js
(function (modules) {
  var installedModules = {};
  function __webpack_require__(moduleId) {
    // Check if module is in cache
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
      exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    return module.exports;
  }
  // 执行的入口函数
  return __webpack_require__('./src/index.js');
})({
  './src/index.js': function (module, exports, require) {
 "use strict";

    var _data = _interopRequireDefault(require("./src/data.js"));

    var _random = _interopRequireDefault(require("./src/random.js"));

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

    console.log('🐻我是数据文件--->', _data["default"]);
    console.log('🦁我是随机数--->', _random["default"]);
    console.log('🐺我是index.js');
  }, './src/data.js': function (module, exports, require) {
 "use strict";

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports["default"] = void 0;
    var result = '我是文件里面的数据';
    var _default = result;
    exports["default"] = _default;
  }, './src/random.js': function (module, exports, require) {
 "use strict";

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports["default"] = void 0;
    var random = Math.random();
    var _default = random;
    exports["default"] = _default;
  },
})
复制代码

走到这里一个简单 webpack 的编译流程代码就算写完啦。
把代码复制到浏览器测试一下

6、实现 webpack 的 Plugins 功能

怎么开发一个自定义的plugins？
webpack中内部实现了本身的一套生命周期，而 plugins 就是用 apply 来调用webpack里面提供的生命周期。
而 webpack 的生命周期主要就是 tapable 来实现的。
这里只用到了 SyncHook，更多可参考这篇 Tapable 详解。

咱们修改一下官网的 ConsoleLogOnBuildWebpackPlugin.js 例子。
在 src同级目录新建一个 plugins

+ src
  - plugins
    - ConsoleLogOnBuildWebpackPlugin.js
复制代码

编写一个简单的 plugins

// ConsoleLogOnBuildWebpackPlugin.js
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log('The webpack build process is starting!!!');
    });
    // 在文件打包结束后执行
    compiler.hooks.done.tap(pluginName,(compilation)=> {
      console.log("整个webpack打包结束")
    })
    // 在webpack输出文件的时候执行
    compiler.hooks.emit.tap(pluginName,(compilation)=> {
        console.log("文件开始发射")
    })
  }
}
module.exports = ConsoleLogOnBuildWebpackPlugin;
复制代码

而后再配置文件引入这个 plugins

// selfpack.config.js
const { join } = require('path')
const ConsoleLogOnBuildWebpackPlugin = require('./plugins/ConsoleLogOnBuildWebpackPlugin')

module.exports = {
  entry: join(__dirname, './src/index.js'),
  output: {
    path: join(__dirname, './dist'),
    filename: 'main.js'
  },
  plugins: [new ConsoleLogOnBuildWebpackPlugin()],
}
复制代码

要让咱们的 selfwebpack 支持 plugins ，还要作些改动。

// selfpack/index.js
const Compiler = require('./Compiler')
const options = require('../selfpack.config.js')
const compiler = new Compiler(options)
const plugins = options.plugins
for (let plugin of plugins) {
    plugin.apply(compiler)
}
compiler.run()
复制代码
// selfpack/compiler.js
const { SyncHook } = require('tapable')
const Compilation = require('./Compilation')

class Compiler {
  constructor(options) {
    this.modules = []
    this.options = options
    this.hooks = {
      run: new SyncHook(),
      // 增长
      emit: new SyncHook(),
      done: new SyncHook()
    }
  }
  run() {
    this.compile()
  }
  compile() {
    const compilation = new Compilation(this)
    // 增长
    this.hooks.run.call()
     //经过entry找入口文件
    const entryModule = compilation.buildModule(this.options.entry, true)
    this.modules.push(entryModule)
    this.modules.map((_module) => {
      const deps = _module.dependecies
      for (const key in deps){
        if (deps.hasOwnProperty(key)){
          this.modules.push(compilation.buildModule(deps[key], false))
        }
      }
    })
    // console.log('最终的 modules', this.modules)
    compilation.emitFiles()
    // 增长
    this.hooks.emit.call()
    this.hooks.done.call()

  }
}
module.exports = Compiler
复制代码

在 compiler 函数一初始化的时候就定义本身的 webpack 的生命周期，而且在 run 期间进行相应的调用，这样咱们就实现了本身的生命周期。

打印结果以下：
runPlugins

本文只实现了简单的编译原理，更多实现请看 webapck-github

对应的代码放到了这里 github

参考文章：手写webpack核心原理

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程