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], 
    ...
}

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

你好啊，张三

标签：node,系列,react,组件,return,jsx,hello,cmp
来源： https://www.cnblogs.com/dingshaohua/p/16601849.html