使用rollup.js解锁react组件开发新姿势

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

1. 新建文件夹，初始化项目

mkdir rollup-demo //新建文件夹
cd rollup-demo //进入文件夹
npm init -y //执行初始化

2. 安装 rollup

npm install rollup --save-dev

3. 下载 rollup 相关依赖

npm i -D @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-clear rollup-plugin-terser

• rollup-plugin-commonjs 的作用：将 CommonJS 模块转换为 ESM
• rollup-plugin-node-resolve 的作用：帮助 Rollup 查找外部模块，可以直接 node_modules 模块
• rollup-plugin-clear: 在打包前删除不需要的文件或者清空输出目录
• rollup-plugin-terser: 压缩代码

4. 下载 babel 相关依赖

npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @rollup/plugin-babel

• @rollup/plugin-babel 的作用：对 es6 代码进行 babel 转化
• @babel/plugin-transform-runtime: 避免编译输出的重复问题

5. 下载 react 相关依赖

npm i react react-dom

6. 编写要打包的组件

1. 新建 src/index.jsx 文件

在项目根目录下新建 src 文件夹，再新建 index.jsx(打包的组件入口）

其余文件夹按照自己的需要组织即可

例如我的文件结构：

├── package-lock.json
├── package.json
└── src
    ├── components  //子组件目录
    ├── index.jsx  //组件入口
    └── utils  //常用的工具函数或类目录

2. 编写 index.jsx

import React from 'react';
export default function(){
   
    return (
	<h1>这是一个组件</h1>
    )
}

7. 创建 rollup.config.js

配置文件是一个 ES6 模块，它对外暴露一个对象，这个对象包含了一些 Rollup 需要的一些选项。通常，我们把这个配置文件叫做 rollup.config.js，它通常位于项目的根目录

import clear from 'rollup-plugin-clear';
import {
    nodeResolve } from '@rollup/plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import {
    babel } from 'rollup-plugin-babel';
import {
    terser } from 'rollup-plugin-terser';

export default{
   
    input: ['./src/index.jsx'],//入口文件地址
    output: {
   
	name:'rollup-react-component', //当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下：window.rollup-react-component=...
	file: 'dist/rollup-react-component.js',  // 输出文件
	format: 'es' //  五种输出格式：amd /  es6 / iife / umd / cjs
    },
    context: 'null',
    moduleContext: 'null',
    //各种插件使用的配置
    plugins: [
	clear({
   
	    targets:<