阅读 642

手写简易版bundler.js

webpack的定位是一个bundler,最基本的要解决的是将多个JS模块打包成可以在浏览器上运行的代码。接下来我们将实现一个简易的miniWebpack也就是一个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对象,生成可以在浏览器执行的代码。

模块分析

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

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: { './msg.js': './src/msg.js' },
  code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports["default"] = void 0;\n\nvar _msg = _interopRequireDefault(require("./msg.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(_msg["default"]);\nvar _default = index;\nexports["default"] = _default;' }
复制代码

执行moduleAnalyser(module),可以返回module的fileName、dependencies、code信息。注意在code里,import语法已经变成一个require函数了,export语法,也变成了在给一个exports变量赋值。

依赖图谱生成

调用moduleAnalyser('./src/index.js')拿到入口文件的dependencies映射,接下来再把入口文件的依赖路径再一次做模块分析,再把依赖模板的依赖路径再一次做模块分析...... 其实就是广度优先遍历,可以很轻松得到这次打包所有需要的模块的分析结果。

//生成依赖图谱
const makeDependenciesGraph = (entry) => {
  //entryModule:入口文件的dependencies映射
  const entryModule = moduleAnalyser(entry);
  //graphArray:图谱动态数组,初始只有一个元素entryModule
  const graphArray = [entryModule];
  for (let i = 0; i < graphArray.length; i++) {
    const item = graphArray[i];
    //dependencies:当前模块的dependencies映射
    const { dependencies } = item;
    //如果当前模块有依赖文件,则遍历dependencies,调用moduleAnalyser,对依赖文件进行模板分析
    if (dependencies) {
      for (let j in dependencies) {
        graphArray.push(moduleAnalyser(dependencies[j]))
      }
    }
  }
  //graph:遍历graphArray生成更利于打包使用的graph。其中key为fileName,value为dependencies和code
  const graph = {};
  graphArray.forEach(item => {
    graph[item.fileName] = {
      dependencies: item.dependencies,
      code: item.code
    }

  })
  return graph;
}
复制代码

生成依赖图谱流程图如下: 调用console.log(makeDependenciesGraph('./src/index.js')),可以在控制台打印出以下内容:

{ './src/index.js': 
   { dependencies: { './msg.js': './src/msg.js' },
     code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports["default"] = void 0;\n\nvar _msg = _interopRequireDefault(require("./msg.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(_msg["default"]);\nvar _default = index;\nexports["default"] = _default;' },
  './src/msg.js': 
   { dependencies: { './word.js': './src/word.js' },
     code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports["default"] = void 0;\n\nvar _word = _interopRequireDefault(require("./word.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar msg = "hello ".concat(_word["default"]);\nvar _default = msg;\nexports["default"] = _default;' },
  './src/word.js': 
   { dependencies: {},
     code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports["default"] = void 0;\nvar word = \'miniWebpack\';\nvar _default = word;\nexports["default"] = _default;' } }

复制代码

生成代码

我们需要开始生成最终可运行的代码了。在上文”模块分析“部分,我们知道利用@babel/core结合@babel/preset-env生成的浏览器可执行代码里,import语法已经变成一个require函数了,export语法,也变成了在给一个exports变量赋值。所以我们的”生成代码“部分,需要提供一个require函数了和exports对象。

//generateCode 根据依赖图谱生成浏览器可执行代码
const generateCode = (entry) => {
   //根据entry,调用makeDependenciesGraph生成依赖图谱graph
  const graph = JSON.stringify(makeDependenciesGraph(entry))
  //根据依赖图谱生成浏览器可执行代码
  return `
  可运行代码...
  `
}
复制代码

为了不污染全局作用域,我们使用立即执行函数来包装我们的代码,将依赖图谱graph作为参数传入:

(function(graph){
  // todo
})(${graph})
复制代码

在graph中找到入口文件的code,并运行它:

  return `
  (function(graph){
    function require(module){
      eval(graph[module].code)
    }
    require('${entry}')
  })(${graph})
复制代码

在入口文件的code,我们同样需要调用require去获取依赖模块模块导出的对象exports,所以require函数必须有导出对象,还要支持内部调用require函数。但是注意!!此require并非现在声明的require函数,定义code内部使用的require函数 -> localRequire。因为我们观察之前编译出的代码,可以知道在code中,require函数传的参数是相对于当前module的相对路径,但是我们打包生成可运行代码时,需要的是相对于bundler.js的相对路径。这时候,我们之前给每个module存的dependencies映射再次派上了用场,localRequire() 传入依赖相对于module的相对路径,根据graph对象,返回依赖相对于bundler.js的相对路径。

(function(graph){
  function require(module){
    function localRequire(relativePath){
      return require(graph[module].dependencies[relativePath])
    }
    var exports={};
    eval(graph[module].code)
    return exports;
  }
  require('${entry}')
})(${graph})
复制代码

为了防止模块内部变量污染其它模块,我们在eval外面包一层立即执行函数,将localRequire、exports和code作为参数传入。

  (function(graph){
    function require(module){
      function localRequire(relativePath){
        return require(graph[module].dependencies[relativePath])
      }
      var exports={};
      (function(require,exports,code){
        eval(code)
      })(localRequire,exports,graph[module].code)
      return exports;
    }
    require('${entry}')
  })(${graph})
复制代码

由此一个bundler就写完了,最终生成的代码,也是可以直接在浏览器中运行的。 调用console.log(generateCode('./src/index.js')),可以在控制台打印出以下内容:

  (function(graph){
    function require(module){
      function localRequire(relativePath){
        return require(graph[module].dependencies[relativePath])
      }
      var exports={};
      (function(require,exports,code){
        eval(code)
      })(localRequire,exports,graph[module].code)
      return exports;
    }
    require('./src/index.js')
  })({"./src/index.js":{"dependencies":{"./msg.js":"./src/msg.js"},"code":"\"use strict\";\n\nvar _msg = _interopRequireDefault(require(\"./msg.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nconsole.log(_msg[\"default\"]); // export default index;"},"./src/msg.js":{"dependencies":{"./word.js":"./src/word.js"},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports[\"default\"] = void 0;\n\nvar _word = _interopRequireDefault(require(\"./word.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar msg = \"hello \".concat(_word[\"default\"]);\nvar _default = msg;\nexports[\"default\"] = _default;"},"./src/word.js":{"dependencies":{},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports[\"default\"] = void 0;\nvar word = 'miniWebpack';\nvar _default = word;\nexports[\"default\"] = _default;"}})  
复制代码

将这段代码赋值到浏览器控制台,可以看到代码执行情况: 完整的bundle.js代码如下:

const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

//moduleAnalyser:分析一个模块的文件依赖
const moduleAnalyser = (fileName) => {
  // 1.fs模块根据路径读取到了入口文件的内容
  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);
      //newFile 相对于bundler.js的相对路径,打包的时候用这个。
      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
  }
}
//生成依赖图谱
const makeDependenciesGraph = (entry) => {
  //entryModule:入口文件的dependencies映射
  const entryModule = moduleAnalyser(entry);
  //graphArray:图谱动态数组,初始只有一个元素entryModule
  const graphArray = [entryModule];
  for (let i = 0; i < graphArray.length; i++) {
    const item = graphArray[i];
    //dependencies:当前模块的dependencies映射
    const { dependencies } = item;
    //如果当前模块有依赖文件,则遍历dependencies,调用moduleAnalyser,对依赖文件进行模板分析
    if (dependencies) {
      for (let j in dependencies) {
        graphArray.push(moduleAnalyser(dependencies[j]))
      }
    }
  }
  //graph:遍历graphArray生成更利于打包使用的graph。其中key为fileName,value为dependencies和code
  const graph = {};
  graphArray.forEach(item => {
    graph[item.fileName] = {
      dependencies: item.dependencies,
      code: item.code
    }

  })
  return graph;
}
//generateCode 根据依赖图谱生成浏览器可执行代码
const generateCode = (entry) => {
  const graph = JSON.stringify(makeDependenciesGraph(entry))
  //大的闭包,防止打包生成的代码污染全局环境
  //浏览器可执行的代码里有require方法,有exports对象,bundler.js打包后的代码需要提供一个require方法和exports对象。
  //小的闭包,防止模块内部变量污染其它模块
  //localRequire 传入依赖相对于module的相对路径,根据graph对象,返回依赖相对于bundler.js的相对路径
  return `
  (function(graph){
    function require(module){
      function localRequire(relativePath){
        return require(graph[module].dependencies[relativePath])
      }
      var exports={};
      (function(require,exports,code){
        eval(code)
      })(localRequire,exports,graph[module].code)
      return exports;
    }
    require('${entry}')
  })(${graph})
  `
}

const code = generateCode('./src/index.js');
console.log(code)
复制代码

欢迎关注公众号阅读原文~