React.js编译

前言

现在市面上主流编译 React.js 的编译方式都是基于webpack来编译的，是因为webpack的生态圈比较丰富，适合编译应用级别的源码。rollup.js的定位是适用于编译库、组件类型的源码，用来编译React.js的场景比较少，但是不能说明rollup.js就不适于编译React.js。本篇主要讲解怎么么用rollup.js编译React.js源码。

实现例子

编译React.js 应用

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-04-01/

npm i

## 开发模式
npm run dev

## 生产模式
npm run build

实现步骤

步骤1: 目录和准备

.
├── build ## 编译脚本
│   ├── rollup.config.dev.js
│   ├── rollup.config.js
│   └── rollup.config.prod.js
├── dist ## 编译结果
│   ├── index.js
│   └── index.js.map
├── example
│   └── index.html
├── package.json
└── src ## 待编译源码
    ├── component ## React.js组件
    │   └── List.jsx
    └── index.js

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 

## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve

## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify

## 安装 rollup.js 编译npm模块 插件模块
npm i --save-dev @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace

## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env 

## 安装 rollup.js 编译React.js 需要的babel插件模块
npm i --save-dev @babel/preset-react

步骤2: rollup配置

编译基本配置 ./build/rollup.config.js

const path = require('path');
const { babel } = require('@rollup/plugin-babel');
const nodeResolve = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');
const replace = require('@rollup/plugin-replace');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

const babelOptions = {
  "presets": [
    '@babel/preset-env',
    '@babel/preset-react'
  ]
}

module.exports = [
  {
    input: resolveFile('src/index.js'),
    output: {
      file: resolveFile('dist/index.js'),
      format: 'umd',
    }, 
    plugins: [
      nodeResolve(),
      commonjs(),
      babel(babelOptions),
      replace({
        'process.env.NODE_ENV': JSON.stringify( 'production' )
      })
    ],
  },
]

开发模式配置基本 ./build/rollup.config.dev.js

process.env.NODE_ENV = 'development';

const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}
const PORT = 3000;

const devSite = `http://127.0.0.1:${PORT}`;
const devPath = path.join('example', 'index.html');
const devUrl = `${devSite}/${devPath}`;

setTimeout(()=>{
  console.log(`[dev]: ${devUrl}`)
}, 1000);

configList.map((config, index) => {

  config.output.sourcemap = true;

  if( index === 0 ) {
    config.plugins = [
      ...config.plugins,
      ...[
        serve({
          port: PORT,
          contentBase: [resolveFile('')]
        })
      ]
    ]
  }
  
  return config;
})


module.exports = configList;

生产模式配置基本 ./build/rollup.config.prod.js

process.env.NODE_ENV = 'production';

const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

configList.map((config, index) => {

  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify()
    ]
  ]

  return config;
})

module.exports = configList;

在./package.json配置编译执行脚本

{
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js",
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js"
  },
}

步骤3: 待编译ES6源码

源码 ./src/component/List.jsx

import React from 'react';
 
class List extends React.Component {

  render() {
    const { dataList = [] } = this.props;
    return (
      <ul>
        { dataList.map(function(item, index){
          return ( <li key={index}>{item.name}</li> )
        }) }
      </ul>
    )
  }
}

export default List;

源码 ./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import List from './component/List.jsx';

const dataList = [
  { name: 'hello' },
  { name: 'world' },
  { name: 'react' },
  { name: 'react-dom' },
]


ReactDOM.render(
  React.createElement(List, { dataList }, null), 
  document.getElementById('App')
);

步骤4: 编译结果

在项目目录下执行 开发模式 npm run dev
编译结果在目录 ./dist/ 下

步骤5: 浏览器查看结果

example源码./example/index.html

<html>
  <head>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
  </head>
  <body>
    <p>hello rollup + react</p>
    <div id="App"></div>
    <script src="./../dist/index.js"></script>
  </body>
</html>

访问 http://127.0.0.1:3000/example/index.html

func-package