阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      实现⼩型Javascript打包⼯具

      问题

      实现⼩型Javascript打包⼯具

      答案

      该⼯具可以实现以下两个功能

      • 将 ES6 转换为 ES5

      • ⽀持在 JS ⽂件中 import CSS ⽂件

      通过这个⼯具的实现,⼤家可以理解到打包⼯具的原理到底是什么

      实现

      因为涉及到 ES6 转 ES5 ,所以我们⾸先需要安装⼀些 Babel 相关的⼯具

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

      接下来我们将这些⼯具引⼊⽂件中

      const fs = require('fs')
      const path = require('path')
      const babylon = require('babylon')
      const traverse = require('babel-traverse').default
      const { transformFromAst } = require('babel-core')
      

      ⾸先,我们先来实现如何使⽤ Babel 转换代码

      function readCode(filePath) {
          // 读取⽂件内容
          const content = fs.readFileSync(filePath, 'utf-8')
          // ⽣成 AST
          const ast = babylon.parse(content, {
              sourceType: 'module'
          })
          // 寻找当前⽂件的依赖关系
          const dependencies = []
          traverse(ast, {
              ImportDeclaration: ({ node }) => {
                  dependencies.push(node.source.value)
              }
          })
          // 通过 AST 将代码转为 ES5
          const { code } = transformFromAst(ast, null, {
              presets: ['env']
          })
          return {
              filePath,
              dependencies,
              code
          }
      }
      

      ⾸先我们传⼊⼀个⽂件路径参数,然后通过 fs 将⽂件中的内容读取出来

      接下来我们通过 babylon 解析代码获取 AST ,⽬的是为了分析代码中是否还引⼊了别的⽂件

      通过 dependencies 来存储⽂件中的依赖,然后再将 AST 转换为 ES5 代码

      最后函数返回了⼀个对象,对象中包含了当前⽂件路径、当前⽂件依赖和当前⽂件转换后的代码

      接下来我们需要实现⼀个函数,这个函数的功能有以下⼏点

      调⽤ readCode 函数,传⼊⼊⼝⽂件

      分析⼊⼝⽂件的依赖

      识别 JS 和 CSS ⽂件

      function getDependencies(entry) {
          // 读取⼊⼝⽂件
          const entryObject = readCode(entry)
          const dependencies = [entryObject]
          // 遍历所有⽂件依赖关系
          for (const asset of dependencies) {
              // 获得⽂件⽬录
              const dirname = path.dirname(asset.filePath)
              // 遍历当前⽂件依赖关系
              asset.dependencies.forEach(relativePath => {
              // 获得绝对路径
                  const absolutePath = path.join(dirname, relativePath)
                  // CSS ⽂件逻辑就是将代码插⼊到 `style` 标签中
                  if (/\.css$/.test(absolutePath)) {
                      const content = fs.readFileSync(absolutePath, 'utf-8')
                      const code = `
                      const style = document.createElement('style')
                      style.innerText = ${JSON.stringify(content).replace(/\\r\\n/g, ''
                      document.head.appendChild(style)
                      `
                      dependencies.push({
                          filePath: absolutePath,
                          relativePath,
                          dependencies: [],
                          code
                      })
                      } else {
                          // JS 代码需要继续查找是否有依赖关系
                          const child = readCode(absolutePath)
                          child.relativePath = relativePath
                          dependencies.push(child)
                      }
                  })
              }
              return dependencies
          }
      

      ⾸先我们读取⼊⼝⽂件,然后创建⼀个数组,该数组的⽬的是存储代码中涉及到的所有⽂ 件

      接下来我们遍历这个数组,⼀开始这个数组中只有⼊⼝⽂件,在遍历的过程中,如果⼊⼝ ⽂件有依赖其他的⽂件,那么就会被 push 到这个数组中

      在遍历的过程中,我们先获得该⽂件对应的⽬录,然后遍历当前⽂件的依赖关系

      在遍历当前⽂件依赖关系的过程中,⾸先⽣成依赖⽂件的绝对路径,然后判断当前⽂件是 CSS ⽂件还是 JS ⽂件

      如果是 CSS ⽂件的话,我们就不能⽤ Babel 去编译了,只需要读取 CSS ⽂件中的代 码,然后创建⼀个 style 标签,将代码插⼊进标签并且放⼊ head 中即可

      如果是 JS ⽂件的话,我们还需要分析 JS ⽂件是否还有别的依赖关系

      最后将读取⽂件后的对象 push 进数组中

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

      function bundle(dependencies, entry) {
          let modules = ''
          // 构建函数参数,⽣成的结构为
          // { './entry.js': function(module, exports, require) { 代码 } }
          dependencies.forEach(dep => {
              const filePath = dep.relativePath || entry
              modules += `'${filePath}': (
                  function (module, exports, require) { ${dep.code} }
              ),`
          })
          // 构建 require 函数,⽬的是为了获取模块暴露出来的内容
          const result = `
              (function(modules) {
                  function require(id) {
                  const module = { exports : {} }
                  modules[id](module, module.exports, require)
                  return module.exports
              }
              require('${entry}')
              })({${modules}})
          // 当⽣成的内容写⼊到⽂件中
          fs.writeFileSync('./bundle.js', result)
      }
      

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

      // entry.js
      var _a = require('./a.js')
      var _a2 = _interopRequireDefault(_a)
      function _interopRequireDefault(obj) {
          return obj && obj.__esModule ? obj : { default: obj }
      }
      console.log(_a2.default)
      // a.js
      Object.defineProperty(exports, '__esModule', {
          value: true
      })
      var a = 1
      exports.default = a
      

      Babel 将我们 ES6 的模块化代码转换为了 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 的⽅式让外部获取到

      最后再将打包出来的内容写⼊到单独的⽂件中

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

      ;(function(modules) {
          function require(id) {
              // 构造⼀个 CommonJS 导出代码
              const module = { exports: {} }
              // 去参数中获取⽂件对应的函数并执⾏
              modules[id](module, module.exports, require)
              return module.exports
          }
          require('./entry.js')
      })({
          './entry.js': function(module, exports, require) {
          // 这⾥继续通过构造的 require 去找到 a.js ⽂件对应的函数
          var _a = require('./a.js')
          console.log(_a2.default)
          },
          './a.js': function(module, exports, require) {
          var a = 1
          // 将 require 函数中的变量 module 变成了这样的结构
          // module.exports = 1
          // 这样就能在外部取到导出的内容了
          exports.default = a
          }
          // 省略
      })
      

      虽然实现这个⼯具只写了不到 100 ⾏的代码,但是打包⼯具的核⼼原理就是 这些了

      • 找出⼊⼝⽂件所有的依赖关系

      • 然后通过构建 CommonJS 代码来获取 exports 导出的内容

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录