Fear what infinite truth, into an inch of joy. Hello everyone, I am @Luo Zhu, a lifelong learning practitioner who loves programming and life.

Install a rollup

$ yarn add -D rollup
Copy the code

package.json

{
  "name": "react-native-refined-components"."version": "0.1.0 from"."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"}}Copy the code

Rollup configuration file

Create rollup.config.js in the root directory:

import pkg from './package.json';

export default [
  // browser-friendly UMD build
  {
    input: "./src/index.ts"./ / output
    output: {
      file: pkg.browser, / / file
      format: 'umd'./ / format
      name: 'refined-components'.// Generate the package name that represents your IIFE/UMD package}},// CommonJS (for Node) and ES module (for bundlers) build.
  {
		input: "./src/index.ts".output: [{file: pkg.main, format: 'cjs' },
			{ file: pkg.module, format: 'es'}],}]Copy the code

conversion.jsonThe file is ES6 modules

The installation@rollup/plugin-json:

$ yarn add -D @rollup/plugin-json
Copy the code

configurationrollup.config.js

// 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
    output: {
      file: pkg.browser, / / file
      format: 'umd'./ / format
      name: 'refined-components'.// Generate the package name that represents your IIFE/UMD package
    },
    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()]
	}
]
Copy the code

Load and parse the CommonJS module

When we write component libraries or tool libraries, we will inevitably use external libraries that may be compliant with the CommonJS specification. Rollup tries to implement the ES module specification, so loading CommonJS modules and using Node module location resolution logic are implemented as optional plug-ins that are not in the Rollup kernel by default. We need to install and configure the CommonJS and Node-resolve plug-ins.

The installation

$ yarn add -D @rollup/plugin-node-resolve @rollup/plugin-commonjs
Copy the code

configuration

Generally we type CJS and ESM format files need to type in the third package

// 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
    output: {
      file: "./dist/umd/index.js"./ / file
      format: 'umd'./ / format
      name: 'refined-components'.// Generate the package name that represents your IIFE/UMD package
    },
    plugins: [
      json(),
      commonjs(), // Load the CommonJS module
      nodeResolve() // Convert commonJS to ES module]}]Copy the code

Note: In CommonJS and ES Module formats we generally don’t want to package third-party libraries into the output, so we don’t need to configure these two plug-ins.

ignorewarning-treating-module-as-external-dependency

Rollup will only resolve relative path modules by default, such as import _ from ‘lodash’ will not be packaged into the bundle and will be warned when packaged. If you want to ignore these warnings, you need to specify these external modules in external. So is there a more elegant way? The answer is yes, we just need to install and configure the rollup-plugin-node-externals plugin.

$ yarn add -D rollup-plugin-node-externals
Copy the code
// 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}}),]]Copy the code

Package ts files

Install dependencies

$ yarn add -D rollup-plugin-typescript2 typescript
Copy the code

configuration

import typescript from 'rollup-plugin-typescript2';

export default [
  // browser-friendly UMD build
  {
    input: "./src/index.ts"./ / output
    output: {
      file: './dist/umd/index.js'./ / file
      format: 'umd'./ / format
      name: 'refined-components'.// Generate the package name that represents your IIFE/UMD package
      globals: {
        'react': 'React'.'react-native': 'reactNative'
      },
      sourcemap: true
    },
    plugins: [
      // If rollup-plugin-node-resolve is used, it must be placed before the typescript plug-in
      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"],}]Copy the code

tsconfig.json

{
  "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"]}Copy the code

A rollup – plugin – multi – input use

When the component library is large, we might want our library to support tree-shaking. Then you can’t put all the files into one file. Rollup-plugin-multi-input is a plug-in that outputs packaged products to their respective files. Just like:

src
  - A.ts
  - B.ts
  - index.ts
->
dist
  - A.js
  - B.js
  - index.js
Copy the code

Install dependencies

$ yarn add -D rollup-plugin-multi-input
Copy the code

configuration

Note: Because the artifact is multiple files, you need to specify the folder with the dir attribute.

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(),
    ],
	}
]
Copy the code

Other plug-ins

  • Rollup-plugin-progress: package the progress bar
  • Rollup-plugin-terser: compressed file

This article was first published on the official website of Luozhu, as well as the public account luozhu Morning Teahouse and Gold digging Column.