其他分享
首页 > 其他分享> > react发布一个组件库 系列篇(一)

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