前端模块化-实现mini-webpack

前言

本文总结如何实现一个简单的打包器 mini-webpack

本节对应的 demo 可以在这里找到。

需求分析

假设我们有一个 index.js 文件，内容如下：

const {
   
    add } = rquire("./add.js");
console.log(add(1, 2));

对应的 add.js 文件内容如下：

function add(a, b) {
   
   
  return a + b;
}

module.exports = {
   
   
  add,
};

我们需要将这两个文件打包成一个文件，可以在 index.html 中引入并在浏览器运行，该如何做到呢?

代码实现

一种简单的实现方式是，将 index.js 和 add.js 文件内容拼接成一个字符串。

// src/index.js
const {
   
    add } = rquire("./add.js");
console.log(add(1, 2));

// src/add.js
function add(a, b) {
   
   
  return a + b;
}

module.exports = {
   
   
  add,
};

但是这样会存在一些问题:

• 浏览器中并不支持 require 语法
• 原先文件天然对变量进行了隔离，合并成一个文件后变量没有隔离，容易造成命名冲突

因此我们可以考虑在外面加一层自执行函数，将 require 语法转换成浏览器支持的语法，同时将变量隔离起来。

// src/index.js
function Index(require, module, exports) {
   
   
  const {
   
    add } = rquire("./add.js");
  console.log(add(1, 2));
}

function Add(require, module, exports) {
   
   
  // src/add.js
  function add(a, b) {
   
   
    return a + b;
  }

  module.exports = {
   
   
    add,
  };
}

// 定义require函数