# rollup-template

**Repository Path**: programmer_luosx/rollup-template

## Basic Information

- **Project Name**: rollup-template
- **Description**: rollup template
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-08
- **Last Updated**: 2023-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: rollup

## README

## Webpack

大型 `SPA` 项目的模块化构建，也就是常说的 `web` 应用。

- 通过各种 `loader` 处理各种各样的静态资源
- 通过各种插件 `plugins` 对整体文件进行一些处理
- `Code splitting` 将公共模块进行提取
- 提供一个 `webpack-dev-server` ，进行本地开发
- 支持 `HMR` 模块热替换

## Rollup

`Rollup` 设计之初就是面向 `ES Module` 的，构建出结构扁平，性能出众的类库。

`ES Module` 的规则

- `import` 只能作为模块顶层的语句出现，不能出现在 `function` 里或者 `if` 里。
- `import` 的模块名只能是字符串常量。
- 不管 `import` 的语句位置出现在哪里，在模块初始化的时候，所有的 `import` 都必须导入完成。

使用工具静态分析的过程

- `Tree shaking` ，摇树，让死了的叶子掉下来。
- 目的就是将 `ES Module` 打包生成特定的 `JS` 模块文件，并最大程度的减小体积。

## Webpack VS Rollup

通过以上的对比可以得出，构建App应用时，`webpack` 比较合适，如果是类库（`纯js项目`），`rollup` 更加合适。

### Webpack 的优势

- 强大的生态插件
- 面向开发应用的特性支持 `HMR`，按需加载，公共模块提取。
- 简化 `web` 开发的环节，图片自动转 `base64`，资源的缓存（添加 `chunkID`）。

### Rollup 的优势

- 构建高性能的模块文件，这正是类库所需要的。
- 编译出来的代码可读性好，内容更小，执行效率更高。
- 配置简单。





#### `package.json` 内容

- 新建 `build`， `build:esm`， `build:umd` 命令
- `peerDependencies` 用于第三方库，前置依赖，本地不安装
- 可以添加到 `devDependencies`，来进行本地安装

#### rollup.config.js

默认的配置文件

#### rollup.umd.config.js

生成 `umd` 规范的组件库

#### rollup.esm.config.js

生成 `esm` 规范的组件库