实现一个简单的Webpack

你们好，我是神三元，今天经过一道面试题来和你们聊一聊webpack。

1、什么是Webpack

我相信，尽管不少开发者会根据官方文档进行webpack的相关配置，但仍然并不了解Webpack到底是起什么做用的，在前端工程化扮演者什么角色，观念仍然简单地停留在“代码打包工具”上。真的是这样吗？ 让咱们来看看官方定义:

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。

相信这个定义已经说的很是清楚了。首先，它的本质是一个模块打包器，其工做是将每一个模块打包成相应的bundle。那么在这中间究竟作了什么事情呢？

2、场景引入

假如你是一个面试者，请看题：

在src目录下有如下文件：

//word.js
export const word = 'hello'
复制代码

//message.js
import {word} from './word.js';
const message = `say ${word}`
export default message;
复制代码

//index.js
import message from './message.js'
console.log(message)
复制代码

请编写一个bundler.js,将其中的ES6代码转换为ES5代码，并将这些文件打包，生成一段能在浏览器正确运行起来的代码。(最后输出say hello)

若是你真正理解了Webpack的定义，那么这里思路应该很是清晰：

• 一、利用babel完成代码转换,并生成单个文件的依赖
• 二、生成依赖图谱
• 三、生成最后打包代码

接下来，让咱们来一步步解开bundler的面纱。

3、步步为营

第一步:转换代码、 生成依赖

转换代码须要利用@babel/parser生成AST抽象语法树，而后利用@babel/traverse进行AST遍历，记录依赖关系，最后经过@babel/core和@babel/preset-env进行代码的转换

//先安装好相应的包
npm install @babel/parser @babel/traverse @babel/core @babel/preset-env -D
复制代码

//导入包
const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')
复制代码

function stepOne(filename){
    //读入文件
    const content =  fs.readFileSync(filename, 'utf-8')
    const ast = parser.parse(content, {
        sourceType: 'module'//babel官方规定必须加这个参数，否则没法识别ES Module
    })
    const dependencies = {}
    //遍历AST抽象语法树
    traverse(ast, {
        //获取经过import引入的模块
        ImportDeclaration({node}){
            const dirname = path.dirname(filename)
            const newFile = './' + path.join(dirname, node.source.value)
            //保存所依赖的模块
            dependencies[node.source.value] = newFile
        }
    })
    //经过@babel/core和@babel/preset-env进行代码的转换
    const {code} = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    })
    return{
        filename,//该文件名
        dependencies,//该文件所依赖的模块集合(键值对存储)
        code//转换后的代码
    }
}
复制代码

第二步：生成依赖图谱。

//entry为入口文件
function stepTwo(entry){
    const entryModule = stepOne(entry)
    //这个数组是核心，虽然如今只有一个元素，日后看你就会明白
    const graphArray = [entryModule]
    for(let i = 0; i < graphArray.length; i++){
        const item = graphArray[i];
        const {dependencies} = item;//拿到文件所依赖的模块集合(键值对存储)
        for(let j in dependencies){
            graphArray.push(
                stepOne(dependencies[j])
            )//敲黑板！关键代码，目的是将入口模块及其全部相关的模块放入数组
        }
    }
    //接下来生成图谱
    const graph = {}
    graphArray.forEach(item => {
        graph[item.filename] = {
            dependencies: item.dependencies,
            code: item.code
        }
    })
    return graph
}
复制代码

//测试一下
console.log(stepTwo('./src/index.js'))
//结果以下，是否是很神奇鸭
{ 
    './src/index.js':
   { dependencies: { './message.js': './src\\message.js' },
     code:
      '"use strict";\n\nvar _message = _interopRequireDefault(require("./message.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(_message["default"]);' 
   },
  './src\\message.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 = require("./word.js");\n\nvar message = "say ".concat(_word.word);\nvar _default = message;\nexports["default"] = _default;' },
  './src\\word.js':
   { dependencies: {},
     code:
      '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports.word = void 0;\nvar word = \'hello\';\nexports.word = word;' 
   } 
}
复制代码

第三步: 生成代码字符串

//下面是生成代码字符串的操做，仔细看，不要眨眼睛哦！
function step3(entry){
    //要先把对象转换为字符串，否则在下面的模板字符串中会默认调取对象的toString方法，参数变成[Object object],显然不行
    const graph = JSON.stringify(stepTwo(entry))
    return ` (function(graph) { //require函数的本质是执行一个模块的代码，而后将相应变量挂载到exports对象上 function require(module) { //localRequire的本质是拿到依赖包的exports变量 function localRequire(relativePath) { return require(graph[module].dependencies[relativePath]); } var exports = {}; (function(require, exports, code) { eval(code); })(localRequire, exports, graph[module].code); return exports;//函数返回指向局部变量，造成闭包，exports变量在函数执行后不会被摧毁 } require('${entry}') })(${graph})`
}
复制代码

//最终测试
const code = step3('./src/index.js')
console.log(code)
复制代码

将生成的这段代码字符串放在浏览器端执行，

大功告成！其实你再新建一个dist目录，将这些字符串放在main.js文件里，是否是跟你平日里开发npm run build同样的效果呢？

那这个时候就有人要"发炎"了，说你这题目不是让人手写一个Webpack吗？确实，可是真正意义上的Webpack须要考虑很是多的因素，事实上要庞大不少，不过经过这一波实践你应该更加理解了Webpack所作的事情，对Webpack有了一个清晰的认知，这样个人目的也就达到了。中间会有一部分代码比较绕，但不要紧，相信你很快就能啃下来，必定会收获满满。

我是神三元，但愿这篇文章可以帮助到更多的同窗。加油吧！