react发布一个组件库 系列篇(二)

前言

在上篇说到，不是特殊情况，我们尽量还是把源码打包编译成es5之后再发布到npm，这样用户使用就很方便。
接下来我们就还拿上个背景举例子吧~

安装编译和打包组件库

进入到组件库hello-cmp的根目录，安装打包工具rollup和编译工具babel、babel for react的预设

yarn add --dev rollup
yarn add --dev @babel/core @rollup/plugin-babel
yarn add --dev @babel/preset-react

然后根目录下新增打包配置文件rollup.config.js

// rollup.config.js
import path from 'path'
import babel from '@rollup/plugin-babel'; 

const resolveFile = source => path.resolve(__dirname, source)
export default {
  input: "index.jsx",
  output: [
    {
      file: resolveFile('index.js'),
      format: 'es'
    },
  ],
  plugins: [babel({
    "presets": ["@babel/preset-react"]
  })]
};

这里要注意下，在被处理的源码处要导入React，编译需要，即index.jsx改为如下

// index.jsx
import React from 'react'; // 即添加这行

export default (props)=>{
    return <div>你好啊，{props.msg}</div>
}

编译和打包

然后执行打包命令

npx rollup --c rollup.config.js

之后就可以看到在目录下生成了打包后的文件 index.js
也能看到rollup打包esm的时候 并不会像webpack一样自己实现一遍模块处理（大量处理函数包裹包裹代码）
这里是不必要的，因为最终还是给项目用，项目本身会再用webpack处理一边，
所以直接导出原生的esm更好。

// index.js
import React from 'react';

var index = (props => {
  return /*#__PURE__*/React.createElement("div", null, "\u4F60\u597D\u554A\uFF0C", props.msg);
});

export { index as default };

发版

最后修改入口文件，即将packge.json的main改为index.js即可

// packge.json
{
  "name": "hello-cmp",
  "version": "0.0.1-beta.6",
  "description": "",
  "main": "index.js",
  "files": [
    "index.js",
    "package.json"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC"
}