使用Rollup自制React npm包

使用React和Rollup打包npm包的基本流程

基本流程来自此视频

文件结构:本案例涉及两个项目,一个library,以及一个调用library的项目,目录结构如下:

\my-react-library
    package.json
    .gitignore                          # 屏蔽node_modules
    .yarnignore                         # 屏蔽src, .gitignore
    rollup.config.js                    # rollup配置文件
    .babelrc                            # babel配置文件
    \src                                # 用来存放React组件
        index.js
        \components
            Switch.js
    \lib                                # 打包后生成的内容
\react-project

配置library

  1. 新建package.json
    yarn init -y
  2. 安装相关依赖
    yarn add rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react -D
  3. 配置rollup.config.js

    import babel from 'rollup-plugin-babel'
    
    export default {
        input: './src/index.js',
        output: {
            file: './lib/bundle.js',
            format: 'cjs'
        },
        plugins: [babel()],
        external: ['react']
    }
  4. 配置babel .babelrc
    {
        "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  5. 编写组件

    Switch.js

    import React from 'react'
    
    const Switch = () => {
        return (
            <h1>Switch</h1>
        )
    }
    
    export default Switch

    index.js

    // 写法1
    import Switch from './components/Switch'
    export { Switch }
    
    // 写法2
    export { default as Switch } from './components/Switch'
  6. 在package.json中修改

    {
        "main": "lib/bundle.js",
        "scripts": {
            "build": "yarn run rollup -c",
            "start": "yarn run rollup -c -w"
        }
    }
  7. 注册组件

    my-react-library目录下

    yarn link

使用library

  1. 新建一个react项目

    yarn create react-app .
    yarn start
  2. link包
    yarn link my-react-library
  3. 写组件
    import { Switch } from "my-react-library"

支持CSS和Fonts

我们是可以通过postcss这个模块来编译CSS的,但是rollup本身对额外资源的支持没有webpack好,于是我使用了rollup-plugin-copy这个插件,直接复制涉及到的所有scss和font文件。

安装

yarn add `rollup-plugin-copy -D

配置

// rollup.config.js
{
...
    plugins: [
        copy({
            targets: [
                { src: 'src/orkaui.scss', dest: 'lib' },
                { src: 'src/css/*', dest: 'lib/css' }
            ]
        }),
        babel()
    ],
}