# 资源是如何打包的

> 用 sum.js 与 index.js 演示 CommonJS 打包后的 modules 表与自定义 require，并引出「如何生成 modules」。

- 发布于: 2019-12-12
- 更新于: 2026-09-30
- 原文: https://shanyue.tech/posts/frontend-engineering/bundle-js/
- 标签: frontend-engineering
- 专栏: 前端工程化

---

以下代码是 `sum.js` 与 `index.js` 两个代码。

```js
// sum.js
function sum(x, y) {
  return x + y;
}

module.exports = sum;

// index.js
const sum = require("./sum");

sum(3, 4);
```

以下代码是打包后的代码。

```js
const modules = {
  "./sum": module => {
    function sum(x, y) {
      return x + y;
    }

    module.exports = sum;
  },
  ".": module => {
    const sum = require("./sum");

    sum(3, 4);
  },
};

function require(id) {
  const module = {};
  modules[id](module);
  return module.exports;
}

require(".");
```

## 如何生成 modules