Webpack的简单实现(手写)

玖柒的小窝

修改于 2021-11-08 09:36:36

4760

修改于 2021-11-08 09:36:36

文章被收录于专栏：各类技术文章~各类技术文章~

首先介绍一下## Webpack 打包原理

Webpack 的构建过程一般会分为以下几步：

读取 Webpack 基础配置

    const path = require（"path"）\
    module.exports = {\
        entry:"./src/index.js"\
        mode:"development"\
        output:{\
          path:path.resolve(__dirname,"./dist"),\
          filename:"bundle.js"\
        }\
    }
    
复制代码

入口文件分析
- 分析依赖模块
- 分析内容
- 编译内容
依赖模块分析
- 分析依赖模块是否有其他模块
- 分析内容
- 编译内容
生成打包文件

    // 接收一个对象参数，key 为入口文件的目录，value为一个执行入口文件里面代码的函数\
    (function (modules) {\
      // installedModules 用来存放缓存\
      const installedModules = {};\
      // __webpack_require__用来转化入口文件里面的代码\
      function __webpack_require__(moduleIid) { ... }\
      // IIFE将 modules 中的 key 传递给 __webpack_require__ 函数并返回。\
      return __webpack_require__(__webpack_require__.s = './src/index.js');\
    }({\
      './src/index.js': (function (module, exports) {\
        eval('console.log(\'test webpack entry\')');\
      }),\
    }));
复制代码

具体实现

安装相关依赖

@babel/parser：用于将输入代码解析成抽象语法树（AST）
@babel/traverse：用于对输入的抽象语法树（AST）进行遍历
@babel/core：babel 的核心模块，进行代码的转换
@babel/preset-env：可根据配置的目标浏览器或者运行环境来自动将 ES2015 + 的代码转换为 es5

使用 npm 命令安装一下： npm install @babel/parser @babel/traverse @babel/core @babel/preset-env -D

2. 读取基本配置

要读取 Webpack 的基本配置，首先我们得有一个全局的配置文件：

const path = require('path');\
\
module.exports ={\
    entry: "./src/index.js",\
    mode: "development",\
    output: {\
      path: path.resolve(__dirname,"./dist"),\
      filename: "bundle.js"\
    }\
}
复制代码

然后我们新建一个类，用于实现分析编译等函数，并在构造函数中初始化配置信息：

\
class MiniWebpack{\
    constructor(options){\
        this.options = options;\
    }\
    // ...\
}
复制代码

3. 代码转换，获取模块信息

```我们使用 fs 读取文件内容，使用 parser 将模块代码转换成抽象语法树，再使用 traverse 遍历抽象语法树，针对其中的 ImportDeclaration 节点保存模块的依赖信息，最终使用 babel.transformFromAst 方法将抽象语法树还原成 ES5 风格的代码。

parse = filename => {
    // 读取文件
    const fileBuffer = fs.readFileSync(filename, 'utf-8');
    // 转换成抽象语法树
    const ast = parser.parse(fileBuffer, { sourceType: 'module' });

    const dependencies = {};
    // 遍历抽象语法树
    traverse(ast, {
        // 处理ImportDeclaration节点
        ImportDeclaration({node}){
            const dirname = path.dirname(filename);
            const newDirname = './' + path.join(dirname, node.source.value).replace('\', '/');
            dependencies[node.source.value] = newDirname;
        }
    })
    // 将抽象语法树转换成代码
    const { code } = babel.transformFromAst(ast, null, {
        presets:['@babel/preset-env']
    });
    
    return {
        filename,
        dependencies,
        code
    }
}
复制代码

生成打包代码

    return `\
    (function(graph){\
        function require(filename){\
            function localRequire(relativePath){\
                return require(graph[filename].dependencies[relativePath]);\
            }\
            const exports = {};\
            (function(require, exports, code){\
                eval(code);\
            })(localRequire, exports, graph[filename].code)\
\
            return exports;\
        }\
        \
        require('${entry}');\
    })(${graph})\
    `\
}
复制代码

输出最终文件

通过获取 this.options 中的 output 信息，将打包代码输出到对应文件中。

    const { path: dirPath, filename } = output;\
    const outputPath = path.join(dirPath, filename);\
\
    // 如果没有文件夹的话，生成文件夹\
    if(!fs.existsSync(dirPath)){\
        fs.mkdirSync(dirPath)\
    }\
    // 写入文件中\
    fs.writeFileSync(outputPath, code, 'utf-8');\
}

本文系转载，前往查看

如有侵权，请联系?cloudcommunity@tencent.com 删除。

babel.js