rollup 打包 react 组件库

原创
2021/01/20 15:38
阅读数 3.1K

基本需求

打包react组件,满足支持 typescript、sass、声明文件、map文件、代码压缩 等基本需求。

项目详情见 github:https://github.com/zhl0791/rollup-react-library-template

需要用到的插件

  • @rollup/plugin-json:支持 json 文件。
  • @rollup/plugin-node-resolve:支持查找外部模块;
  • @rollup/plugin-commonjs:支持 CommonJS 模块;
  • rollup-plugin-postcss-modules:支持 css module;
  • rollup-plugin-typescript2:支持 typescript;
  • rollup-plugin-dts:打包声明文件;
  • rollup-plugin-terser:代码压缩。
  • ...

rollup.config.js 配置文件

import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
// import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss-modules';
import typescript from 'rollup-plugin-typescript2';
import dts from 'rollup-plugin-dts';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default [
  {
    input: 'src/component/index.tsx',
    output: [
      {
        file: 'dist/index.js',
        // 编译目标,es module
        format: 'es',
        sourcemap: true,
      },
    ],
    plugins: [
      // 支持第三方模块
      resolve(),
      // 支持 commonjs 格式
      commonjs(),
      json(),
      postcss({
        extract: true, // extracts to `${basename(dest)}.css`
        plugins: [],
        writeDefinitions: false,
        // modules: { ... }
      }),
      typescript(),
      production && terser(),
    ],
    // 第三方模块不会强行打包到输出中
    external: (id) => /^(qss|react|antd|@ant-design\/icons|core-js)/.test(id),
  },
  // 打包声明文件
  {
    input: 'src/component/index.tsx',
    output: [{ file: 'dist/index.d.ts', format: 'es' }],
    plugins: [dts()],
  },
];

如果需要支持更多功能,可以在 https://github.com/rollup/awesome 上寻找对应的插件进行支持。

package.json 文件中加入如下内容:

{
  // ...
  "scripts": {
    "build": "rollup --config rollup.config.js",
    "watch": "rollup --config rollup.config.js -w"
  }
}

运行 npm run build 即可编译。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部