手写简易版bundler.js

webpack的定位是一个bundler，最基本的要解决的问题是将多个JS模块打包成可以在浏览器上运行的代码。接下来我们将实现一个简易的webpack也就是一个bundler：由入口文件对代码进行打包，打包成可以在浏览器运行的代码。

一、被打包项目介绍

整个演示项目的目录结构如下所示，其中src下的文件是bundler.js需要打包的代码。

├── bundler.js
├── package-lock.json
└── src
    ├── index.js
    ├── msg.js
    └── word.js

src下各文件内容如下：

word.js:

const word = 'miniWebpack';
export default word;

msg.js:

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

index.js:

import msg from './msg.js'
console.log(msg)
export default index;

二、实现bundler.js

要实现bundler，我们需要实现3部分功能：

moduleAnalyser：模块分析。分析模块，得到模块的依赖、代码等信息。

makeDependenciesGraph：生成依赖图谱。遍历打包项目，得到所有需要的模块的分析结果 。

generateCode：生成可执行代码。提供require()函数和exports对象，生成可以在浏览器执行的代码。

1

模块分析

使用fs模块读取module的内容；使用@babel/parser将文件内容转换成抽象语法树AST；使用@babel/traverse遍历了AST ，对每个ImportDeclaration节点（保存的相对于module的路径信息）做映射，把依赖关系拼装在 dependencies对象里；使用@babel/core结合@babel/preset-env预设，将AST转换成了浏览器可以执行的代码。

moduleAnalyser():

const moduleAnalyser = (fileName) => {
  // 1.fs模块根据路径读取到了module的内容
  const content = fs.readFileSync(fileName, 'utf-8');
  // 2.使用@babel/parser将文件内容转换成抽象语法树AST
  const ast = parser.parse(content, {
    sourceType: 'module'
  })
  // 3.使用@babel/traverse遍历了AST ，对每个ImportDeclaration节点做映射，把依赖关系拼装在 dependencies对象里
  let dependencies = {};
  traverse(ast, {
    ImportDeclaration({ node }) {
      const dirName = path.dirname(fileName);
      const newFile = './' + path.join(dirName, node.source.value);
      // key是相对于当前模块的路径，value为相对于bundler.js的路径。
      dependencies[node.source.value] = newFile;
    }
  })
  // 4.使用@babel/core结合@babel/preset-env预设，将AST转换成了浏览器可以执行的代码
  const { code } = babel.transformFromAst(ast, null, {
    presets: ["@babel/preset-env"]
  })
  return {
    fileName,
    dependencies,
    code
  }
}

模块分析流程图如下：

调用console.log(moduleAnalyser('./src/index.js'))，可以在控制台打印出以下内容：

{ fileName: './src/index.js',
  dependencies: { './ms