miniwebpack实现原理

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)