使用rollup打包React Native插件并发布

2021-05-31 14:54:35 浏览数 (1)

怕什么真理无穷，进一寸有一寸的欢喜。大家好，我是@洛竹，一名热爱编程、热爱生活的终身学习实践者。

安装 rollup

代码语言：javascript复制
$ yarn add -D rollup

package.json

代码语言：javascript复制
{
  "name": "react-native-refined-components",
  "version": "0.1.0",
  "description": "refined react-native components",
  "main": "dist/cjs/index.js",
  "module": "dist/es/index.js",
  "browser": "dist/umd/index.js",
  "types": "dist/es/index.d.ts",
  "scripts": {
    "build": "rimraf dist/* && rollup -c",
    "dev": "rollup -c -w"
  }
}

rollup 配置文件

在根目录新建 rollup.config.js:

代码语言：javascript复制
import pkg from './package.json';

export default [
  // browser-friendly UMD build
  {
    input: './src/index.ts',
    // 输出
    output: {
      file: pkg.browser, // 文件
      format: 'umd', // 格式
      name: 'refined-components', // 生成包名称，代表你的 iife/umd 包
    },
  },
  // CommonJS (for Node) and ES module (for bundlers) build.
  {
    input: './src/index.ts',
    output: [
      { file: pkg.main, format: 'cjs' },
      { file: pkg.module, format: 'es' },
    ],
  },
];

转换 .json 文件为 ES6 modules

安装 @rollup/plugin-json:

代码语言：javascript复制
$ yarn add -D @rollup/plugin-json

配置 rollup.config.js

代码语言：javascript复制
// rollup.config.js
import json from '@rollup/plugin-json';
import pkg from './package.json';

export default [
  // browser-friendly UMD build
  {
    input: './src/index.ts',
    // 输出
    output: {
      file: pkg.browser, // 文件
      format: 'umd', // 格式
      name: 'refined-components', // 生成包名称，代表你的 iife/umd 包
    },
    plugins: [json()],
  },
  // CommonJS (for Node) and ES module (for bundlers) build.
  {
    input: './src/index.ts',
    output: [
      { file: pkg.main, format: 'cjs' },
      { file: pkg.module, format: 'es' },
    ],
    plugins: [json()],
  },
];

加载并解析 CommonJS 模块

我们写组件库或工具库时不可避免会用到外部库，这些外部库可能是符合 CommonJS 规范的。而 Rollup 力图实现 ES 模块的规范， 因此，加载 CommonJS 模块和使用 Node 模块位置解析逻辑都被实现为可选插件，默认情况下不在 Rollup 内核中。我们需要安装并配置 CommonJS 和 node-resolve 插件。

安装

代码语言：javascript复制
$ yarn add -D @rollup/plugin-node-resolve @rollup/plugin-commonjs

配置

一般我们打的 cjs 和 esm 格式文件需要把第三放包打进来

代码语言：javascript复制
// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import pkg from './package.json';

export default [
  // browser-friendly UMD build
  {
    input: './src/index.ts',
    // 输出
    output: {
      file: './dist/umd/index.js', // 文件
      format: 'umd', // 格式
      name: 'refined-components', // 生成包名称，代表你的 iife/umd 包
    },
    plugins: [
      json(),
      commonjs(), // 加载 commonjs 模块
      nodeResolve(), // 将 commonjs 转换为 ES 模块
    ],
  },
];

注意：CommonJS 和 ES module 格式下我们一般不希望把第三方库打包到输出产物中，所以并不需要配置这两个插件。

忽略 warning-treating-module-as-external-dependency

Rollup 默认只会解析相对路径的模块，像是 import _ from 'lodash' 不会被打包进 bundle，并且打包时会有警告。如果你想忽略这些警告，你需要在 external 中指明这些外部模块。那么有没有更优雅的方式呢？答案是肯定的，我们只需要安装并配置 rollup-plugin-node-externals 插件即可。

代码语言：javascript复制
$ yarn add -D rollup-plugin-node-externals
代码语言：javascript复制
// rollup.config.js
import externals from 'rollup-plugin-node-externals';

export default [
  // CommonJS (for Node) and ES module (for bundlers) build.
  {
    output: [
      {
        file: './dist/cjs/index.js',
        format: 'cjs',
        exports: 'auto',
      },
      {
        file: './dist/es/index.js',
        format: 'es',
      },
    ],
    plugins: [externals({ deps: true })],
  },
];

打包 ts 文件

安装依赖

代码语言：javascript复制
$ yarn add -D rollup-plugin-typescript2 typescript

配置

代码语言：javascript复制
import typescript from 'rollup-plugin-typescript2';

export default [
  // browser-friendly UMD build
  {
    input: './src/index.ts',
    // 输出
    output: {
      file: './dist/umd/index.js', // 文件
      format: 'umd', // 格式
      name: 'refined-components', // 生成包名称，代表你的 iife/umd 包
      globals: {
        react: 'React',
        'react-native': 'reactNative',
      },
      sourcemap: true,
    },
    plugins: [
      // 如果用了 rollup-plugin-node-resolve， 则必须将它放在 typescript 插件前面
      typescript({
        tsconfigOverride: {
          compilerOptions: { declaration: false },
        },
      }),
    ],
    external: ['react', 'react-native'],
  },
  // CommonJS (for Node) and ES module (for bundlers) build.
  {
    input: './src/index.ts',
    output: [
      { dir: './dist/cjs/index.js', format: 'cjs', exports: 'auto' },
      { dir: './dist/es/index.js', format: 'es' },
    ],
    plugins: [typescript()],
    external: ['react', 'react-native'],
  },
];

tsconfig.json

代码语言：javascript复制
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "declaration": true,
    "jsx": "react",
    "strict": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "exclude": ["dist", "rollup.config.js"]
}

rollup-plugin-multi-input 使用

组件库比较大时，我们可能需要让我们的库支持 tree-shaking。那么你就不能将所有的文件都打入到一个文件中。rollup-plugin-multi-input 便是一个将打包产物输出到各自的文件中的插件。就像：

代码语言：javascript复制
src
  - A.ts
  - B.ts
  - index.ts
->
dist
  - A.js
  - B.js
  - index.js

安装依赖

代码语言：javascript复制
$ yarn add -D rollup-plugin-multi-input

配置

注意：因为产物是多文件，所以需要用 dir 属性指定文件夹。

代码语言：javascript复制
import multiInput from 'rollup-plugin-multi-input';

export default [
  ...// CommonJS (for Node) and ES module (for bundlers) build.
  {
    input: ['src/**/*.ts', 'src/**/*.tsx'],
    output: [
      { dir: './src', format: 'cjs', exports: 'auto' },
      { dir: './src', format: 'es' },
    ],
    plugins: [multiInput()],
  },
];

其他插件

  • rollup-plugin-progress: 打包进度条
  • rollup-plugin-terser: 压缩文件
打包 javascript rollup.js 编程算法 es

0 人点赞