react组件发布到npm

创建库

新建文件夹 test-react-library

进入项目，初始化：

yarn init -y

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

安装依赖包

yarn add rollup 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.mjs。打包的配置，如果后缀写成.js，rollup@^3.0.0会因不识别里面的es写法而报错，而rollup@^2.0.0要用.js。具体请见 https://rollupjs.org/command-line-interface/#configuration-files

内容为：

import babel from 'rollup-plugin-babel'
export default{
    input:'./src/index.js',
    output:{
        file:'./lib/bundle.js',
        // 输出类型 (amd, cjs, es, iife, umd, system)：
        // iife——最早的模块，jQuery时代流行，封装成一个自执行函数，缺点是污染全局变量，且需手动维护script标签加载顺序
        // cjs——即CommonJS，解决了以上问题，但只运行在node.js环境，不支持浏览器。
        // amd——通过requirejs实现，支持浏览器，解决了前面所有问题，但写法复杂，可读性很差，不符合通用的模块化思维
        // umd——兼容了cjs和amd，但产生了更难理解的代码，包也增大
        // system——面向未来的模块依赖方式，微前端流行
        // es——现代化标准
        
        format:'cjs'    
    },
    plugins:[babel()],
    // 设置react为外部引用，可避免打包时打进去，否则警告(!) Unresolved dependencies
    external:['react']
}

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

打包

执行命令

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发包步骤
成功后就可以在npm官网搜到包名
回到测试项目中，停止服务器，安装这个包(注意包名如果重复需要修改才能发上去，安装时别忘了新包名)

yarn add test-react-library

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

其他

配置文件

项目中还需要进行git和yarn的忽略配置，具体内容根据实际情况来

位置： /.gitignore

添加内容：

node_modules
# 开发工具的设置等等

位置： /.yarnignore

添加内容：

src
.gitignore

当前依赖库及版本

"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"rollup": "^3.21.6",
"rollup-plugin-babel": "^4.4.0"

这篇好文章是转载于：学新通技术网