Rollup 高效打包组件库

Rollup

Rollup是什么，这里就不再过多的赘述了，具体详情见官网 : https://rollupjs.org/guide/zh/

Rollup是自带scope hoisting 和 tree-shaking的。

强烈建议：在使用之前认真阅读一遍官方文档

package.json 配置解读

参考：package.json官方 Docs : https://docs.npmjs.com/cli/v7/configuring-npm/package-json#main

核心解读1：module、main、types、typing

• main

  程序主入口，如果没有设置，默认会在根目录查找index.js，通常给予CommonJS去使用，例如require('xxxxx')。

• module

  程序主入口，虽然不成官方标准，但是正在趋向于主流，主要用于es6。

• types & typings

  如果打包的是ts代码，需要为你的包显式的指定type的声明文件；
  这两个字段没任何区别，是同义的，参考 : https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

基础的配置文件

所需要用到的包

// babel
import babel from '@rollup/plugin-babel';
// typescript
import tsc from 'rollup-plugin-typescript2';
// resolve
import resolve from '@rollup/plugin-node-resolve';
// 处理 commonjs
import commonjs from '@rollup/plugin-commonjs';
// 处理图片
import image from '@rollup/plugin-image';
// 压缩代码
import { terser } from 'rollup-plugin-terser';
// 处理 json 文件
import json from '@rollup/plugin-json';
// 使rollup可以使用postCss处理样式文件less、css等，需要同时安装 postcss
import postcss from 'rollup-plugin-postcss';
// 处理 less 定义的变量
import simplevars from 'postcss-simple-vars';
// 处理less嵌套样式写法
import nested from 'postcss-nested';

rollup.config.js

const extensions = ['.ts', '.tsx', '.js', '.jsx'];

const external = ['react', 'antd', 'react/jsx-runtime']

export default {
    input: './src/index.ts',
    output: [
        {
            file: './lib/index.js',
            sourcemap: true,
            format: 'cjs',
            esModule: false,
        },
        {
            file: './es/index.js',
            sourcemap: true,
            format: 'esm',
        },
    ],
    external,
    plugins: [
        image(),
        postcss({
            plugins: [
                simplevars(),
                nested(),
            ],
            // 内部使用 cssnano 去做压缩的，外部不需要再次安装 
            minimize: true,
            // 处理.css和.less文件
            extensions: [ '.css', '.less' ],
        }),
        // 帮助 rollup 查找 node_modules 里的三方模块
        resolve({ extensions }),
        // 帮助 rollup 查找 commonjs 规范的模块, 常配合 rollup-plugin-node-resolve 一起使用
        commonjs(),
        tsc({
            tsconfig: './tsconfig.json',
        }),
        babel({
            extensions,
            babelHelpers: 'runtime',
            exclude: /node_modules/,
        }),
        terser()
    ]
};

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true,
    "baseUrl": ".",
    "outDir": ".",
    "strict": true,
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "lib",
    "es",
    "dist",
    "typings",
    "**/__test__",
    "test",
    "docs",
    "tests"
  ]
}

babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', { loose: true }],
        [
            '@babel/preset-react',
            {
                runtime: 'automatic',
            },
        ],
    ],
    plugins: [
      '@babel/plugin-transform-runtime'
    ],
};

以上的配置基本就可以打造一个组件库了，麻雀虽小，五脏俱全。

FAQ

• 打包完，发现antd或者自生样式丢失？

module.exports = {
    presets: [
        ['@babel/preset-env', { loose: true }],
        [
            '@babel/preset-react',
            {
                runtime: 'automatic',
            },
        ],
    ],
    plugins: [
      '@babel/plugin-transform-runtime',
+     [
+       'import', {
+       "libraryName": "antd",
+       "libraryDirectory": "es",
+       "style": "css"
+     }
+     ]
    ],
};

这里需要使用babel中的 import实现lazy加载。

• 如果我打包完后，想实现类似于antd的懒加载样式，可以做到吗？

可以的，需要在rollup.config.js的postcss配置中加入：extract，单独输出样式文件，然后在项目中像加载antd一样，配置babel就可以了。

最后，我叫小王，花名书生，今日份知识分享到此over，下一期再见～