从零实现简易版Webpack

什么是bundler

市面上现在有很多bundler,最著名的就是webpack,此外常见的还有 browserifyrollupparcel等。虽然现在的bundler进化出了各种各样的功能,但它们都有一个共同的初衷,就是能给前端引入模块化的开发方式,更好的管理依赖、更好的工程化。

Modules(模块)

目前最常见的模块系统有两种:

ES6 Modules

// 引入模块
import _ from 'lodash';

// 导出模块
export default someObject;

CommonJS Modules

// 引入模块
const _ = require('lodash');

// 导出模块
module.exports = someObject;

Dependency Graph(依赖关系图)

一般项目需要一个入口文件(entry point),bundler从该入口文件进入,查找项目依赖的所有模块,形成一张依赖关系图,有了依赖关系图bundler进一步将所有模块打包成一个文件。

依赖关系图:

dependency graph

Bundler实现思路

要实现一个bundler,有三个主要步骤:

  1. 解析一个文件并提取它的依赖项
  2. 递归地提取依赖并生成依赖关系图
  3. 将所有被依赖的模块打包进一个文件

本文使用一个小例子展示如何实现bundler,如下图所示,有三个js文件:入口文件 entry.jsentry.js 的依赖文件 greeting.jsgreeting.js 的依赖文件 name.js

example

三个文件内容分别如下:

entry.js:

import greeting from './greeting.js';

console.log(greeting);

greeting.js:

import { name } from './name.js';

export default `hello ${name}!`;

name.js:

export const name = 'MudOnTire';

实现bundler

首先我们新建一个bundler.js文件,bundler的主要逻辑就写在里面。

1. 引入JS Parser

按照我们的实现思路,首先需要能够解析JS文件的内容并提取其依赖项。我们可以把文件内容读取为字符串,并用正则去获取其中的import, export语句,但是这种方式显然不够优雅高效。更好的方式是使用JS parser(解析器)去解析文件内容。JS parser能解析JS代码并将其转化成抽象语法树(AST)的高阶模型,抽象语法树是把JS代码拆解成树形结构,且从中能获取到更多代码的执行细节。

AST Explorer 这个网站上面可以查看JS代码解析成成抽象语法树之后的结果。比如,greeting.js 的内容用 acron parser 解析后的结果如下:

greeting AST

可以看到抽象语法树其实是一个JSON对象,每个节点有一个 type 属性和 importexport 语句解析后的结果等等。将代码转成抽象语法树之后更方便提取里面的关键信息。

接下来,我们需要在项目里面引入一个JS Parser。我们选择 babylon(babylon也是babel的内部使用的JS parser,目前以 @babel/parser 的身份存在于babel的主仓库)。

安装babylon:

npm install --save-dev @babel/parser

或者yarn:

yarn add @babel/parser --dev

bundler.js 中引入babylon:

bundler.js:

const parser = require('@babel/parser');

2. 生成抽象语法树

有了JS parser之后,生成抽象语法树就很简单了,我们只需要获取到JS源文件的内容,传入parser解析就行了。

bundler.js:

const parser = require('@babel/parser');
const fs = require('fs');

/**
 * 获取JS源文件的抽象语法树
 * @param {String} filename 文件名称
 */
function getAST(filename) {
  const content = fs.readFileSync(filename, 'utf-8');
  const ast = parser.parse(content, {
    sourceType: 'module'
  });
  console.log(ast);
  return ast;
}

getAST('./example/greeting.js');

执行 node bundler.js 结果如下:

get ast

3. 依赖解析

生成抽象语法树后,便可以去查找代码中的依赖,我们可以自己写查询方法递归的去查找,也可以使用 @babel/traverse 进行查询,@babel/traverse 模块维护整个树的状态,并负责替换,删除和添加节点。

安装 @babel/traverse:

npm install --save-dev @babel/traverse

或者yarn:

yarn add @babel/traverse --dev

使用 @babel/traverse 可以很方便的获取 import 节点。

bundler.js:

const traverse = require('@babel/traverse').default;

/**
 * 获取ImportDeclaration
 */
function getImports(ast) {
  traverse(ast, {
    ImportDeclaration: ({ node }) => {
      console.log(node);
    }
  });
}

const ast = getAST('./example/entry.js');
getImports(ast);

执行 node bundler.js 执行结果如下:

get imports

由此我们可以获得 entry.js 中依赖的模块和这些模块的路径。稍稍修改一下 getImports 方法获取所有的依赖:

bundler.js:

function getImports(ast) {
  const imports = [];
  traverse(ast, {
    ImportDeclaration: ({ node }) => {
      imports.push(node.source.value);
    }
  });
  console.log(imports);
  return imports;
}

执行结果:

dependencies

最后,我们将方法封装一下,为每个源文件生成唯一的依赖信息,包含依赖模块的id、模块的相对路径和模块的依赖项:

let ID = 0;

function getAsset(filename) {
  const ast = getAST(filename);
  const dependencies = getImports(ast);
  const id = ID++;
  return {
    id,
    filename,
    dependencies
  }
}

const mainAsset = getAsset('./example/entry.js');
console.log(mainAsset);

执行结果:

assets

4. 生成Dependency Graph

然后,我们需要写一个方法生成依赖关系图,该方法应该接受入口文件路径作为参数,并返回一个包含所有依赖关系的数组。生成依赖关系图可以通过递归的方式,也可以通过队列的方式。本文使用队列,原理是不断遍历队列中的asset对象,如果asset对象的dependencies不为空,则继续为每个dependency生成asset并加入队列,并为每个asset增加mapping属性,记录依赖之间的关系。持续这一过程直到queue中的元素被完全遍历。具体实现如下:

bundler.js

/**
 * 生成依赖关系图
 * @param {String} entry 入口文件路径
 */
function createGraph(entry) {
  const mainAsset = getAsset(entry);
  const queue = [mainAsset];

  for (const asset of queue) {
    const dirname = path.dirname(asset.filename);
    asset.mapping = {};
    asset.dependencies.forEach((relPath, index) => {
      const absPath = path.join(dirname, relPath);
      const child = getAsset(absPath);
      asset.mapping[relPath] = child.id;
      queue.push(child);
    });
  }

  return queue;
}

生成的依赖关系如下:

dependency graph

5. 打包

最后,我们需要根据依赖关系图将所有文件打包成一个文件。这一步有几个关键点:

  1. 打包后的文件需要能够在浏览器运行,所以代码中的ES6语法需要先被babel编译
  2. 浏览器的运行环境中,编译后的代码依然需要实现模块间的引用
  3. 合并成一个文件后,不同模块的作用域依然需要保持独立

(1). 编译源码

首先安装babel并引入:

npm install --save-dev @babel/core

或者yarn:

yarn add @babel/core --dev

bundler.js:

const babel = require('@babel/core');

然后对 getAsset 方法稍作修改,这里我们使用 babel.transformFromAstSync() 方法对生成的抽象语法树进行编译,编译成浏览器可以执行的JS:

function getAsset(filename) {
  const ast = getAST(filename);
  const dependencies = getImports(ast);
  const id = ID++;
  // 编译
  const { code } = babel.transformFromAstSync(ast, null, {
    presets: ['@babel/env']
  });
  return {
    id,
    filename,
    dependencies,
    code
  }
}

源码编译后生成的依赖关系图内容如下:

compiled

可以看到编译后的代码中还有 require('./greeting.js') 语法,而浏览器中是不支持 require()方法的。所以我们还需要实现 require() 方法从而实现模块间的引用。

(2). 模块引用

首先打包之后的代码需要自己独立的作用域,以免污染其他JS文件,在此使用IIFE包裹。我们可以先勾勒出打包方法的结构,在bundler.js中新增 bundle() 方法:

bundler.js:

/**
 * 打包
 * @param {Array} graph 依赖关系图
 */
function bundle(graph) {
  let modules = '';

  // 将依赖关系图中模块编译后的代码、模块路径和id的映射关系传入IIFE
  graph.forEach(mod => {
    modules += `${mod.id}:[
      function (require, module, exports) { ${mod.code}},
      ${JSON.stringify(mod.mapping)}
    ],`
  })

  // 
  return `
    (function(){})({${modules}})
  `;
}

我们先看一下执行 bundle() 方法之后的结果(为方便阅读使用 js-beautifycli-highlight 进行了美化 ):

bundled

现在,我们需要实现模块之间的引用,我们需要实现 require() 方法。实现思路是:当调用 require('./greeting.js') 时,去mapping里面查找 ./greeting.js 对应的模块id,通过id找到对应的模块,调用模块代码将 exports 返回,最后打包生成 main.js 文件。bundle() 方法的完整实现如下:

bundler.js:

/**
 * 打包
 * @param {Array} graph 依赖关系图
 */
function bundle(graph) {
  let modules = '';

  // 将依赖关系图中模块编译后的代码、模块路径和id的映射关系传入IIFE
  graph.forEach(mod => {
    modules += `${mod.id}:[
      function (require, module, exports) { ${mod.code}},
      ${JSON.stringify(mod.mapping)}
    ],`
  })

  const bundledCode = `
    (function (modules) {

      function require(id) {
        const [fn, mapping] = modules[id];

        function localRequire(relPath) {
          return require(mapping[relPath]);
        }

        const localModule = { exports : {} };
        
        fn(localRequire, localModule, localModule.exports);

        return localModule.exports;
      }

      require(0);

    })({${modules}})
  `;
  fs.writeFileSync('./main.js', bundledCode);
}

最后,我们在浏览器中运行一下 main.js 的内容看一下最后的结果:

result

一个简易版本的Webpack大功告成!

本文源码:https://github.com/MudOnTire/...

你可能感兴趣的:(webpack,babel,bundle,module,module-bundler)