实现一个简单的webpack，了解打包原理

前言

• 在项目中经常会用到webpack进行打包，但是对它做了什么不是很了解。我们通过一个bundler.js实现webpack的基本功能。

该项目主要实现两个功能

• 将ES6代码转换为ES5代码
• 生成依赖图谱，将代码打包代码到一个JS文件中

准备

创建三个文件，用于测试

• 在src目录下有以下文件：

//word.js
export const word = 'hello'

//message.js
import {word} from './word.js';
const message = `say ${word}`
export default message;

//index.js
import message from './message.js'
console.log(message)

步骤一：转换代码、 生成依赖

在项目中，安装所需依赖

"devDependencies": {
  "@babel/core": "^7.17.9",
  "@babel/parser": "^7.17.9",
  "@babel/preset-env": "^7.16.11",
  "@babel/traverse": "^7.17.9"
},  

// 先导入包
const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

主要步骤

1. 读取文件，利用@babel/parser生成AST抽象语法树
2. 利用@babel/traverse进行AST遍历，记录依赖关系
3. 通过@babel/core和@babel/preset-env进行代码转换

function stepOne(filename){
    // 第一步：读取文件，生成AST抽象树
    const content =  fs.readFileSync(filename, 'utf-8')
    const ast = parser.parse(content, {
        sourceType: 'module'// babel官方规定必须加这个参数，不然无法识别ES Module
    })
    const dependencies = {}
    
    // 第二步：遍历AST抽象语法树，记录依赖
    traverse(ast, {
        // 获取通过import引入的模块
        ImportDeclaration({node}){
            const dirname = path.dirname(filename)// 获取路径，依赖模块所在文件夹
            const newFile = './' + path.join(dirname, node.source.value) // 拼接上文件名
            // 保存所依赖的模块（文件名：路径）
            dependencies[node.source.value] = newFile
        }
    })
    // 第三步：通过@babel/core和@babel/preset-env进行代码的转换
    const {code} = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    })
    return{
        filename,//该文件名
        dependencies,//该文件所依赖的模块集合(键值对存储)
        code//转换后的代码
    }
}

经过这一步，得到了转换后的代码和模块集合（文件名：文件路径，比如 word.js: "./src\word.js"）

步骤二：生成依赖图谱

分析：

• 上一步得到的模块集合为入口文件所依赖的模块，但是这些模块可能也有自己的依赖，那么也需要将这些依赖获取到。
• 所以需要对这些依赖模块进行上一步的操作。

（当然，可能会有更多层依赖的引用情况，这里只考虑了两层。）

主要分两步

1. 遍历入口文件依赖的模块，查找它们的依赖
2. 生成包含文件名与转换代码、模块对应关系的对象，{filename: {dependencies:'', code: ''}}

// 生成依赖图谱
function stepTwo(entry) {
  // 获取上一步的结果, entry为入口文件
  const entryModule = stepOne(entry)

  const graphArray = [entryModule]// 将入口模块和模块依赖放入数组
  for (let i = 0; i < graphArray.length; i++) {
    const item = graphArray[i];
    const { dependencies } = item; // 拿到文件所依赖的模块集合(键值对存储)
    for (let j in dependencies) {// 遍历模块集合，查找它们的依赖的模块
      graphArray.push(
          stepOne(dependencies[j]) 
        ) // 最后得到有入口模块和所有相关模块，以及转换代码
    }
  }
  // 接下来对数据进行处理，生成图谱
  // 生成一个文件名与转换代码、模块对应的对象，{filename: {dependencies:'', code: ''}}
  const graph = {}
  graphArray.forEach(item => {
    graph[item.filename] = {
      dependencies: item.dependencies,
      code: item.code
    }
  })
  return graph
}

这里测试一下，得到下面的结果

步骤三：生成代码字符串

• return一个模板字符串，这个字符串就是要打包输出的代码
• 输出的代码主要：
  • 获取依赖模块的exports变量（这里会递归调用）
  • 执行入口模块的代码
  • 导出入口模块的exports变量
• 也就是执行完其他所有依赖的模块代码，得到它们的expots变量，才会执行入口模块的代码

function step3(entry){
//要先把对象转换为字符串，不然在下面的模板字符串中会默认调取对象的toString方法，参数变成[Object object],显然不行
    const graph = JSON.stringify(stepTwo(entry))
    return `
        (function(graph) {
            //require函数的本质是执行一个模块的代码，然后将相应变量挂载到exports对象上
			require('${entry}')
            function require(module) {
                //localRequire的本质是拿到依赖包的exports变量
                function localRequire(relativePath) {
                    return require(graph[module].dependencies[relativePath]);
                }
                var exports = {};
                (function(require, exports, code) {
                    eval(code);
                })(localRequire, exports, graph[module].code);
                return exports;//函数返回指向局部变量，形成闭包，exports变量在函数执行后不会被摧毁
            }
        })(${graph})`
}

步骤四：输出文件

新建dist文件夹，并在该文件夹下创建index.js文件，写入上一步得到的代码

fs.mkdir('dist', (err) => {
  if (err) {
    console.log(err)
  } else {
    fs.writeFile('./dist/index.js', step3('./src/index.js'), (err) => {
      if (err) {
        fs.unlink('dist')
        console.log('输出错误', err)
      } else {
        console.log('输出完成')
      }
    })
  }
})

执行bundler.js可以在项目根目录下看到dist文件夹

总结

1. 对入口模块进行转换代码、获取依赖
2. 对入口模块所依赖的模块进行上一步的操作，也就是转换代码、获取依赖，然后对数据进行整理，生成依赖图谱（文件名：{依赖，转换代码}）方便后续使用数据。
3. 输出一个字符串，该字符串输出后是一个立刻执行函数，该函数的流程是执行模块代码，获取它们的expots对象，然后执行入口模块中的代码
4. 输出文件

参考

慕课webpack实战

实现一个简单的Webpack