Rollup 高效打包组件库

Rollup 高效打包组件库

九月 14, 2021 本文共计: 730 字 预计阅读时长: 3分钟

Rollup

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

Rollup是自带scope hoistingtree-shaking的。

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

package.json 配置解读

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

核心解读1:modulemaintypestyping

  • 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.jspostcss配置中加入:extract,单独输出样式文件,然后在项目中像加载antd一样,配置babel就可以了。


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