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

前言

在上篇说到，不是特殊情况，我们尽量还是把源码打包编译成es5之后再发布到npm，这样用户使用的时候就很方便。

接下来我们就还拿上章的代码，使用rollup+babel编译、打包后再发版，来举个例子吧~

安装编译和打包工具

进入到组件库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

// index.js

import React from 'react';

var index = (props => {

  return /*#__PURE__*/React.createElement("div", null, "你好啊", props.msg);

});

export { index as default };

通过观察编译打包后的输出文件内容，我们也能看到rollup打包esm的时候，对于import的是node_modules中内容的时候，基本直接输出模块化语法并不会像webpack一样自己实现一遍模块处理（大量处理函数包裹包裹代码）

rollup这种做法非常的棒，因为库最终还是给项目用，项目本身的代码和用到的库本身都会再经历过webpack处理一遍。

所以大家经常说 webpack和rollup两者定位不通，rollup适合库打包，而webpack适合最终项目部署打包

发版

修改入口文件，即将packge.json的main改为index.js，最后一键发版npm publish

// packge.json

{

  "name": "hello-cmp",

  "version": "0.0.1-beta.6",

  "description": "",

  "main": "index.js",

  "files": [

    "index.js",

    "package.json"

  ],

  "keywords": [],

  "author": "",

  "license": "ISC"

}

使用

接下来我们在react项目中安装并使用下这个包。

不需要做任何配置（比如上一章节还需要额外配置include）

// src/app.js

import HelloCmp from 'hello-cmp'

function App() {

  return (

    <div className="App">

      <HelloCmp msg="张三"/>

    </div>

  );

}

export default App;

效果如下

你好啊，张三

其它

有注意到我及使用rollup打包，但是我的插件项目依赖里依然没有这些。

这个其实有没有都可以。

1、运行时的依赖：在确定主项目即 myApp项目有这些运行时和组件库有哪些共同依赖的情况下，插件本身是可以公用的反正都在npm里（会自动向上找包）。

2、编译时的依赖：都已经编译完成了提供给主项目了主项目本身也不会用到。

3、放不放都没事：放上去也没事，无脑放上去，一个是不用npm和github的packge.json要维护两份。另一个是万一主项目没有，你的组件包用到了找不到就不会报错。缺点就是在旧版npm情况下，放上依赖只会增加主项目的体积（这在新版npm或yarn上有所改善）

为什么要选择rollup打包呢？

因为一般开发插件或者组件库都不会使用webpack，比如我组件里因为了三方库。

webpack在打包我组件库的时候就会将其打进去，这不是必要的，因为使用者默认都会（是一般使用webpack）处理的导入三方包的语句。我在这里提前处理意义不大，而且还徒增我自己插件或者组件库的体积。还让代码变得巨大不利于阅读。

那为什么不用esbuild或者其他打包工具呢？因为插件较少。

那万一使用者的项目不是webpack，而是直接将包通过标签引入页面用于浏览器怎么办？

这个时候我们就可以使用webpack给组件打包了，它会将三方包打进去了。

当然也可以继续用rollup打包成iife即可，配置external+output.globals标记外部库，通过cdn引入即可