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

·  阅读 936

创建文件夹 cheney-react-library

进入文件夹 yarn init -y

安装关键包 yarn add rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react -D

项目根目录创建 src/index.jssrc/Components/Switch.jslib

项目根目录创建 .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 buildyarn start 就可以了,免得写一长串的命令

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

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

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

## How to use

​```bash
npm i cheney-react-library
​```
复制代码

还需检查 package.json 中的 main 是否为 lib/bundle.js ,以及添加 authordescriptionkeywords

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改