发布自制React组件到npm全流程 (使用Rollup打包工具)

创建文件夹

cheney-react-library

进入文件夹

yarn init -y

安装关键包

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

项目根目录创建 src/index.js、src/Components/Switch.js、lib

项目根目录创建 .gitignore 来进行 git忽略 管理

node_modules

我们用 yarn 来发布包，需要在项目根目录创建 .yarnignore 来进行 yarn忽略 管理

src
.gitignore

项目根目录创建 .babelrc 来进行 babel 配置

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

项目根目录创建 rollup.config.js 来进行 rollup 配置

import babel from 'rollup-plugin-babel'
​
export default {
 input: './src/index.js',
 output: {
 file: './lib/index.js',
 format: 'cjs'
 },
 plugins: [babel()]
}

src/Components/Switch.js 中写入

import React from 'react'
​
export default function Switch() {
 return (
 <h1>Switch</h1>
 )
}

src/index.js 中写入

// import Switch from './Components/Switch'
​
// export { Switch }
​
// 两种写法
​
export { default as Switch } from './Components/Switch'

至此项目目录为

运行 yarn run rollup -c 进行打包，打包成功

但是发现有个警告

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
react (imported by src/Components/Switch.js)

意思是 react 是外部依赖，我们需要在 rollup.config.js 中把 react 设为一个外部依赖，避免每次打包进去

import babel from 'rollup-plugin-babel'
​
export default {
 ...
 external: ['react']
}

运行 yarn run rollup -c 进行打包，打包成功，且没有警告

我们在 package.json 中整理一下命令

以后我们执行 yarn build、yarn start 就可以了，免得写一长串的命令

yarn run rollup -c -w 的 -w 是监控作用，我们改动代码，会自然响应更新

如果想本地调试，根目录运行 yarn link 本地注册包，那么在其他项目根目录中运行 yarn link cheney-react-library 就可以链接我们的组件了，如果不想链接，运行 yarn unlink cheney-react-library 即可

如果想把包发布到 npm ，需要检查根目录下有无 README.md ，没有的话需要添加一些东西

还需检查 package.json 中的 main 是否为 lib/bundle.js ，以及添加 author，description， keywords

description 就是包描述

检查 npm 镜像地址是否正确，不正确需要切换过来

npm config get registry

然后运行 yarn publish ，输入个人信息就会看到一步步地发布成功

如果第三步出现错误信息像

error Couldn't publish package:"...: You do not have permission to publish "...". Are you logged in as the correct user?" 意味着我们的包名和仓库中的已存在包名重复了，需要修改包名。可以通过 yarn info 包名 来查看仓库是否存在此包

发布成功后在 npm 仓库中可以搜索到自己的包

如果想撤销自己发布的包，运行

npm unpublish 包名 --force

或者撤销某一版本

npm unpublish 包名@version