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

2022-08-19 15:31:10 阅读：137 来源： 互联网

标签：node 系列 react 组件 return jsx hello cmp

前言

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

前言

可否将源代码直接发包

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