Bundler源码编写

webpack

 2019/09/30 

实现代码

实现一个类似webpack的打包工具，代码如下：

const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')
 
const moduleAnalyser = (filename) => {
  const content = fs.readFileSync(filename, 'utf-8') //  content为用fs得到的入口文件的源代码
  const ast = parser.parse(content, { //  ast为由源代码得到的抽象语法树
    sourceType: 'module'
  })
  const dependencies = {}
  traverse(ast, { //  用traverse在抽象语法树中找到有ImportDeclaration的部分（代码中的import的语句）
    ImportDeclaration({ node }) {
      const dirname = path.dirname(filename)
      const newFile = './' + path.posix.join(dirname, node.source.value)
      dependencies[node.source.value] = (newFile) 
    }
  })
  const { code } = babel.transformFromAst(ast, null, {
    presets: ['@babel/preset-env']
  })
  return { //  这是分析结果
    filename,
    dependencies,
    code
  }
}

const makeDependencoesGraph = (entry) => { 
  const entryModule = moduleAnalyser(entry) //  拿到分析结果
  const graphArray = [entryModule] //  用队列，遍历加递归，实现将各层依赖加进这个数组中，得到依赖图谱
  for (let i = 0; i < graphArray.length; i++) {
    const item = graphArray[i]
    const { dependencies } = item
    if (dependencies) {
      for (let j in dependencies) {
        graphArray.push(
          moduleAnalyser(dependencies[j])
        )
      }
    }
  }
  const graph = {}  //  对图谱做一个简化，方便之后用
  graphArray.forEach(item => {
    graph[item.filename] = {
      dependencies: item.dependencies,
      code: item.code
    }
  })
  return graph
}

const generateCode = (entry) => {
  const graph = JSON.stringify(makeDependencoesGraph(entry))
  //  依赖图谱中各个依赖的代码其实都有require和export，但是浏览器是无法识别的，所以我们要自己写
  //  require('${entry}')中要加单引号，因为我们的要拼接一些代码而不是真正去执行一些代码
  return `
    (function(graph) {
      function require(module) {
        function localRequire(relativePath) {
          return require(graph[module].dependencies[relativePath])
        }
        var exports = {};
        (funcrion(require, exports, code) {
          eval(code);
        })(localRequire, exports, graph[module].code);
        return exports;
      };
      require('${entry}')
    })(${graph});
  `;
}