Copyright © 1998-2023 maxiaoke.com All rights reserved.

当前位置:　 首页>> 技术小册>> web前端面试完全指南

小册名称：web前端面试完全指南

在这一章节中，我将会带大家来实现一个几十行的迷你打包工具，该工具可以实现以下两个功能

  • 将 ES6 转换为 ES5
  • 支持在 JS 文件中 import CSS 文件

通过这个工具的实现，大家可以理解到打包工具的原理到底是什么。

实现

因为涉及到 ES6 转 ES5，所以我们首先需要安装一些 Babel 相关的工具

  1. yarn add babylon babel-traverse babel-core babel-preset-env

接下来我们将这些工具引入文件中

  1. const fs = require('fs')
  2. const path = require('path')
  3. const babylon = require('babylon')
  4. const traverse = require('babel-traverse').default
  5. const { transformFromAst } = require('babel-core')

首先，我们先来实现如何使用 Babel 转换代码

  1. function readCode(filePath) {
  2.   // 读取文件内容
  3.   const content = fs.readFileSync(filePath, 'utf-8')
  4.   // 生成 AST
  5.   const ast = babylon.parse(content, {
  6.     sourceType: 'module'
  7.   })
  8.   // 寻找当前文件的依赖关系
  9.   const dependencies = []
  10.   traverse(ast, {
  11.     ImportDeclaration: ({ node }) => {
  12.       dependencies.push(node.source.value)
  13.     }
  14.   })
  15.   // 通过 AST 将代码转为 ES5
  16.   const { code } = transformFromAst(ast, null, {
  17.     presets: ['env']
  18.   })
  19.   return {
  20.     filePath,
  21.     dependencies,
  22.     code
  23.   }
  24. }
  • 首先我们传入一个文件路径参数，然后通过 fs 将文件中的内容读取出来
  • 接下来我们通过 babylon 解析代码获取 AST，目的是为了分析代码中是否还引入了别的文件
  • 通过 dependencies 来存储文件中的依赖，然后再将 AST 转换为 ES5 代码
  • 最后函数返回了一个对象，对象中包含了当前文件路径、当前文件依赖和当前文件转换后的代码

接下来我们需要实现一个函数，这个函数的功能有以下几点

  • 调用 readCode 函数，传入入口文件
  • 分析入口文件的依赖
  • 识别 JS 和 CSS 文件
  1. function getDependencies(entry) {
  2.   // 读取入口文件
  3.   const entryObject = readCode(entry)
  4.   const dependencies = [entryObject]
  5.   // 遍历所有文件依赖关系
  6.   for (const asset of dependencies) {
  7.     // 获得文件目录
  8.     const dirname = path.dirname(asset.filePath)
  9.     // 遍历当前文件依赖关系
  10.     asset.dependencies.forEach(relativePath => {
  11.       // 获得绝对路径
  12.       const absolutePath = path.join(dirname, relativePath)
  13.       // CSS 文件逻辑就是将代码插入到 `style` 标签中
  14.       if (/\.css$/.test(absolutePath)) {
  15.         const content = fs.readFileSync(absolutePath, 'utf-8')
  16.         const code = `
  17.           const style = document.createElement('style')
  18.           style.innerText = ${JSON.stringify(content).replace(/\\r\\n/g, '')}
  19.           document.head.appendChild(style)
  20.         `
  21.         dependencies.push({
  22.           filePath: absolutePath,
  23.           relativePath,
  24.           dependencies: [],
  25.           code
  26.         })
  27.       } else {
  28.         // JS 代码需要继续查找是否有依赖关系
  29.         const child = readCode(absolutePath)
  30.         child.relativePath = relativePath
  31.         dependencies.push(child)
  32.       }
  33.     })
  34.   }
  35.   return dependencies
  36. }
  • 首先我们读取入口文件，然后创建一个数组，该数组的目的是存储代码中涉及到的所有文件
  • 接下来我们遍历这个数组，一开始这个数组中只有入口文件，在遍历的过程中，如果入口文件有依赖其他的文件，那么就会被 push 到这个数组中
  • 在遍历的过程中，我们先获得该文件对应的目录，然后遍历当前文件的依赖关系
  • 在遍历当前文件依赖关系的过程中，首先生成依赖文件的绝对路径，然后判断当前文件是 CSS 文件还是 JS 文件
    • 如果是 CSS 文件的话，我们就不能用 Babel 去编译了，只需要读取 CSS 文件中的代码，然后创建一个 style 标签，将代码插入进标签并且放入 head 中即可
    • 如果是 JS 文件的话，我们还需要分析 JS 文件是否还有别的依赖关系
    • 最后将读取文件后的对象 push 进数组中

现在我们已经获取到了所有的依赖文件，接下来就是实现打包的功能了

  1. function bundle(dependencies, entry) {
  2.   let modules = ''
  3.   // 构建函数参数，生成的结构为
  4.   // { './entry.js': function(module, exports, require) { 代码 } }
  5.   dependencies.forEach(dep => {
  6.     const filePath = dep.relativePath || entry
  7.     modules += `'${filePath}': (
  8.       function (module, exports, require) { ${dep.code} }
  9.     ),`
  10.   })
  11.   // 构建 require 函数，目的是为了获取模块暴露出来的内容
  12.   const result = `
  13.     (function(modules) {
  14.       function require(id) {
  15.         const module = { exports : {} }
  16.         modules[id](module, module.exports, require)
  17.         return module.exports
  18.       }
  19.       require('${entry}')
  20.     })({${modules}})
  21.   `
  22.   // 当生成的内容写入到文件中
  23.   fs.writeFileSync('./bundle.js', result)
  24. }

这段代码需要结合着 Babel 转换后的代码来看，这样大家就能理解为什么需要这样写了

  1. // entry.js
  2. var _a = require('./a.js')
  3. var _a2 = _interopRequireDefault(_a)
  4. function _interopRequireDefault(obj) {
  5.     return obj && obj.__esModule ? obj : { default: obj }
  6. }
  7. console.log(_a2.default)
  8. // a.js
  9. Object.defineProperty(exports, '__esModule', {
  10.     value: true
  11. })
  12. var a = 1
  13. exports.default = a

Babel 将我们 ES6 的模块化代码转换为了 CommonJS（如果你不熟悉 CommonJS 的话，可以阅读这一章节中关于 模块化的知识点） 的代码，但是浏览器是不支持 CommonJS 的，所以如果这段代码需要在浏览器环境下运行的话，我们需要自己实现 CommonJS 相关的代码，这就是 bundle 函数做的大部分事情。

接下来我们再来逐行解析 bundle 函数

  • 首先遍历所有依赖文件，构建出一个函数参数对象
  • 对象的属性就是当前文件的相对路径，属性值是一个函数，函数体是当前文件下的代码，函数接受三个参数 module、exports、 require
    • module 参数对应 CommonJS 中的 module
    • exports 参数对应 CommonJS 中的 module.export
    • require 参数对应我们自己创建的 require 函数
  • 接下来就是构造一个使用参数的函数了，函数做的事情很简单，就是内部创建一个 require 函数，然后调用 require(entry)，也就是 require('./entry.js')，这样就会从函数参数中找到 ./entry.js 对应的函数并执行，最后将导出的内容通过 module.export 的方式让外部获取到
  • 最后再将打包出来的内容写入到单独的文件中

如果你对于上面的实现还有疑惑的话，可以阅读下打包后的部分简化代码

  1. ;(function(modules) {
  2.   function require(id) {
  3.     // 构造一个 CommonJS 导出代码
  4.     const module = { exports: {} }
  5.     // 去参数中获取文件对应的函数并执行
  6.     modules[id](module, module.exports, require)
  7.     return module.exports
  8.   }
  9.   require('./entry.js')
  10. })({
  11.   './entry.js': function(module, exports, require) {
  12.     // 这里继续通过构造的 require 去找到 a.js 文件对应的函数
  13.     var _a = require('./a.js')
  14.     console.log(_a2.default)
  15.   },
  16.   './a.js': function(module, exports, require) {
  17.     var a = 1
  18.     // 将 require 函数中的变量 module 变成了这样的结构
  19.     // module.exports = 1
  20.     // 这样就能在外部取到导出的内容了
  21.     exports.default = a
  22.   }
  23.   // 省略
  24. })

小结

虽然实现这个工具只写了不到 100 行的代码，但是打包工具的核心原理就是这些了

  1. 找出入口文件所有的依赖关系
  2. 然后通过构建 CommonJS 代码来获取 exports 导出的内容

该分类下的相关小册推荐：

Web响应式布局入门到实战
Web响应式布局入门到实战
uniapp快速入门与实战
uniapp快速入门与实战
WebGL开发指南
WebGL开发指南
vue高级应用开发与构建
vue高级应用开发与构建