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

前言

经常使用别人写好的组件库，然后安装引入使用即可。比如：

npm install beautiful-table

import BeautifulTable from 'beautiful-table'

function App() {
  return (
    <div className="App">
      <BeautifulTable/>
    </div>
  );
}

export default App;

那接下来，我们从头到尾一点点将这个组件库写出来，并且发版到npm平台上！

这个组件我们起名字 哈喽组件， 即 hello-componet简写下 hello-cmp。
然后我们再新建一个react简单项目 起名为myApp，在这个项目使用组件库hello-cmp。

可否将源代码直接发包

这是最简单的方式，不用任何打包工具打包，直接将源码发布到npm上。

├── index.jsx                 组件核心
├── package.json

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

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

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

// src/app.js
import HelloCmp from 'hello-cmp'

function App() {
  return (
    <div className="App">
      <HelloCmp msg="张三"/>
    </div>
  );
}

export default App;

尴尬的事情发生了，页面以及启动控制台底部都输出了相同的错误

Compiled with problems:X

ERROR in ./node_modules/hello-cmp/index.jsx 2:11

Module parse failed: Unexpected token (2:11)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| export default (props)=>{
>     return <div>你好啊，{props.msg}</div>
| }

这是因为默认情况下，项目（里的打包器如webpack、rollup、esbuild等）都会忽略node_modules里的代码处理。

知道原因，就好处理了，那我们修改当前react项目myApp的webpack，将其不要忽略包hello-cmp即可。

npm run eject之后，修改webpack配置文件如下：修改rules字段，让只编译src扩充到也编译你的包，即可。

// webpack.config.js
{
    test: /\.(js|mjs|jsx|ts|tsx)$/,  
    // 原来这有这个 include: paths.appSrc，
    // 其中paths.YourCmp即在path中定义的你组件包的路径 resolveApp('node_modules/YourCmp')
    include: [paths.appSrc,paths.YourCmp], 
    ...
}

再次启动，开心的一幕出现了

你好啊，张三

结论

如果你的包是低版本的纯js 你当然可以直接发版源码。
但是如果是jsx、ts、或用到了esnext最新版本的，别人下载引入你的包也无法开箱即用了。使用者仍然需要去安装对用的编译器并编译你的代码之后才可以使用。
而且很多编译工具默认都会忽略node_modules下的代码。