使用 Rollup 构建 React

为什么使用 Rollup 构建

rollup是一个Javascript模块打包器

INFO

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

我们只是为了构建包，而不是应用，使用 webpack 有点太大了，rollup 比较简洁，更专注于JS库的打包

配置项

输出 Umd 格式

因为umd格式既兼容CommonJs也支持ES Module

Plugins

rollup-plugin-typescript2

用于将源码中的 typescript代码转义成javascript的插件，同时可以支持使用ts类型的配置文件，例如 rollup.config.ts，需要在打包命令中天添加 --configPlugin rollup-plugin-typescript2 参数

"build:dev": "rollup --config scripts/rollup/react.config.ts --configPlugin rollup-plugin-typescript2"

参考:rollup.js

@rollup/plugin-commonjs

用于解析CommonJS规范的插件

rimraf

用来删除文件，可在 packages.json 中 scripts中使用，执行 build命令前删除dist目录, 使用它的原因是为了兼容 Mac 和 WIndows

"build:dev": "rimraf dist && rollup --config scripts/rollup/react.config.ts --bundleConfigAsCjs --configPlugin rollup-plugin-typescript2"

rollup-plugin-generate-package-json

用于打包时生成package.json文件