使用 rollup 打包 react 库

场景

其实一般用 tsc 编译一下就行了，但如果想要更加强大的功能，例如打包成一个单文件、多种格式、或者包含 css 时，就需要使用 rollup 来处理了。

• 打包
• 处理 ts
• 处理 css
• 压缩

配置文件

package.json

{
  "scripts": {
    "pub": "yarn build && lerna bootstrap",
    "build": "rollup -c rollup.config.js"
  },
  "devDependencies": {
    "@types/react": "^16.9.48",
    "moment": "^2.27.0",
    "rollup": "^2.26.9",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-terser": "^7.0.1",
    "rollup-plugin-typescript2": "^0.27.2",
    "typescript": "3.8.2"
  }
}

rollup.config.js

import babel from 'rollup-plugin-babel'
import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'
import { resolve } from 'path'

export default {
  // 入口文件
  input: resolve(__dirname, './src/index.ts'),
  output: {
    // 打包名称
    name: pkg.name,
    exports: 'named',
    file: resolve(__dirname, './dist/index.js'),
    format: 'es',
  },
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
    typescript({
      typescript: require('typescript'),
    }),
    postcss({
      sourceMap: true,
      extract: true,
      minimize: true,
    }),
    terser(), // minifies generated bundles
  ],
}