写一个react组件并发布到npm

首先就要到npm官网注册一下啦，编译工具我选择了rollup

写一个react组件

我们可以先创建一个react项目，在里面写好组件再编译好之后再copy出来发包，便于调试。
先写一个基础的toast提示窗组件

 //引入react这一步虽然在react项目用不到，但是发包之后使用会报错找不到React
import React from 'react' 
import { createRoot } from 'react-dom/client';
import './style.css'

// 创建一个id为‘yanToast’的div
const toastDom = document.createElement('div')
toastDom.id = 'yanToast'
// 用createRoot（react18新用法）注册一下，这里有一个知识点，createRoot不能多次调用
// 现在的模块化开发引入文件有一个缓存机制只会加载一次，所以把它放在外面就不用再去提前卸载了
const toastDomBox = createRoot(toastDom);

const ToastInti = (content, duration = 3000) => {
  document.body.appendChild(toastDom)

  toastDomBox.render(
    <div className='yan_toast'>{content}</div>
  )

  setTimeout(() => {
    toastDom.remove();
  }, duration)
}

export default {
  // antd中的message就是导出了多种调用方式，未来我也会完善success、error等
  info: (content, duration) => {
    ToastInti(content, duration)
  }
}

编译

全局安装rollup，方便以后使用

npm install --global rollup 

增加一些依赖

// 处理es6转换
npm install rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react
// 处理css
npm install rollup-plugin-postcss

在根目录创建rollup.config.js文件，添加rollup配置

import babel from 'rollup-plugin-babel'
import postcss from 'rollup-plugin-postcss'

export default {
  // 入口文件
  input: './src/index.js',
  // 编译后输出文件
  output: {
    file: './lib/index.js',
    format: 'cjs',
  },
  plugins: [babel(), postcss()],
  // extract: 'css/index.css', css抽离
  external: ['react'],
}

在根目录新建 .babelrc文件，添加babel配置

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

然后执行编译命令

rollup -c

发npm包

把/lib文件夹中编译好的文件copy到新的目录中，在这个目录下执行npm配置文件命令

npm init // 根据提示填写包的信息，可以生成好后直接修改配置文件


// 我的配置文件
{
  "name": "toast-react-yan",
  "version": "1.0.2",
  "description": "基于react的toast提示框",
  "main": "index.js",
  "author": "yanhan",
  "license": "ISC",
  // 这里要写好自己的依赖
  "dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  }
}

// 登录命令- 根据提示输入用户名、密码、邮箱等
npm login 
// 一定不能用淘宝源，改成npm源
npm config set registry https://registry.npmjs.org 
// 发包- 注意包名是唯一的、更新时版本号也要注意修改
npm publish

这样我们的react包就直接发布到npm上了
使用时就可以直接 npm install toast-react-yan、yarn add toast-react-yan、pnpm install toast-react-yan

点击这里查看我发布成功的第一个包