您现在的位置是：首页 >学无止境 >react组件发布到npm网站首页学无止境

创建库

新建文件夹 test-react-library

进入项目，初始化：

yarn init -y

此处 -y 就是yes，相当于执行了一路回车

安装依赖包，其中rollup用3以上版本会报错，还没研究处理方法。

yarn add rollup@^2.0.0 rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react -D

分别新建目录和文件，斜杠开头说明在根目录下：

位置：/src/components/button/index.js。组件

添加内容：

import React from 'react' 
const Button = (props) => { 
    return <button>{props.children || '自定义按钮'}</button> 
} 
export default Button

位置： /src/index.js。打包入口

添加内容：

import Button from './components/button/index' 
export { Button }

位置： /.babelrc 。如果不配置，则无法识别 jsx 语法

添加内容：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

不识别jsx会报错：Unterminated regular expression. 无法识别JSX指令

位置： /rollup.config.js。打包的配置

内容为：

import babel from 'rollup-plugin-babel'
export default{
    input:'./src/index.js',
    output:{
        file:'./lib/bundle.js',
        format:'cjs'    
    },
    plugins:[babel()],
    // 设置react为外部引用，可避免打包时打进去，否则警告(!) Unresolved dependencies
    external:['react']
}

rollup中文文档：Tutorial | rollup.js 中文文档 | rollup.js中文网 (rollupjs.com)

下面进行git和yarn的忽略配置

位置： /.gitignore

添加内容：

node_modules
# 开发工具的设置等等

位置： /.yarnignore

添加内容：

src
.gitignore

打包

执行命令

yarn run rollup -c // -c是--config，即使用配置文件打包

在/lib/bundle.js就可以看到打包后的输出文件

在package.json中添加如下代码，可以简化执行指令

  "scripts": {
    "注释": "下面的-c是使用配置文件，-w是watch，监视文件变化而打包",
    "build": "yarn run rollup -c",
    "dev": "yarn run rollup -c -w"
  }

测试

在上面的库项目里使用yarn注册链接：

yarn link

修改package.json中内容，作为外部引用入口

"main": "lib/bundle.js",

用脚手架新建react项目

yarn create react-app test-react-project

安装完依赖后，导入lib库

yarn link test-react-library

在项目中import Button组件并使用

import {Button} from '@daoke0818/test-react-library'
function App() {
  
  return (
    <div className="App">
        <Button/>
        <Button>给你起个名字</Button>
    </div>
  );
}

export default App;

组件已经可以正常使用了

发布到npm

在测试项目下解除本地软连接

yarn unlink test-react-library

这时页面因找不到包而报错
切换到自定义库项目里，进行发版

npm publish --access public

发版具体问题请见最简npm发包步骤
成功后就可以在npm官网搜到包名
回到测试项目中，停止服务器，安装这个包(注意包名如果重复需要修改才能发上去，安装时别忘了新包名)

yarn add test-react-library

重新启动，可以看到页面已正常加载，此时引用的包就来自于npm服务器了。