# RollupBuild

**Repository Path**: onresize/rollup-build

## Basic Information

- **Project Name**: RollupBuild
- **Description**: Rollup打包(UMD、IIFE、CJS、ESM)、组件库的按需加载、本地调试等
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-27
- **Last Updated**: 2024-02-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### cjs, umd, esm or iife

```js
// 它们分别是什么?
参考 rollup 的在线 repl 来查看各种模块写法: https://rollupjs.org/repl/
```

#### CJS

```js
CommonJs、只能在NodeJS上运行、使用 require('module')读取并加载模块
缺点：不支持浏览器、执行后才能拿到依赖信息
```

#### AMD

```js
可以看作是 CJS 的异步版本、制定了一套规则使模块可以被异步 require 进来并在回调函数里继续使用，然后 require.js 等前端库也可以利用这个规则加载代码了，目前已经是时代的眼泪了
```

#### UMD

```yml
同时兼容 CJS 和 AMD、并且支持直接在前端用 <script src="lib.umd.js"></script> 的方式加载、现在还在广泛使用，不过可以想象 ESM 和 IIFE 逐渐代替它
```

#### IIFE

```js
只是一种写法，可以隐藏一些局部变量，前端人要是不懂这个可能学的是假前端。可以用来代替 UMD 作为纯粹给前端使用的写法
```

### ESM

```js
现在使用的模块方案，使用 import export 来管理依赖。由于它们只能写在所有表达式外面，所以打包器可以轻易做到分析依赖以及 Tree-Shaking。当然他也支持动态加载(import())

浏览器直接通过 <script type="module"> 即可使用该写法。NodeJS 可以通过使用 mjs 后缀或者在 package.json 添加 "type": "module" 来使用，注意他还有一些 实验性的功能 没有正式开启。考虑到大量 cjs 库没有支持，如果要发布 esm 版的库还是通过 rollup 打包一下比较好（同时相关依赖可以放到 devDependencies 里
```

[实践文档参考：](https://dev.to/arnaud/authoring-a-javascript-library-that-works-everywhere-using-rollup-1ck5)

```bash
  "scripts": {
    "build": "rollup -c", // 线上环境打包
    "dev": "rollup -c -w" // 本地执行打包、-w是监听
  }
```