如何封装一个react组件(类库)发布到npm
一、背景：在日常开发中，我们会基于项目对一些通用的组件进行封装，并在项目中进行调用。当一个组件被多个项目调用，需要升级维护时，就会出多次修改的情况，这种维护成本无疑是比较高的。所以，我们此时需要将组件发布到npm上，进行统一版本管理。项目中直接从npm上加载最新的包就可以了。
\
1、前提要求：
安装了Git、基本掌握npm、git使用方法、熟练使用 JavaScript & ES6 & CSS、熟练React或者vue相关生态；
2、开始：
2.1 配置git和npm 在github上创建一个新的远程仓库 l
本地运行git clone命令；
将lk-utils克隆到本地 例：git clone github.com/1995lk/lk-u…
\
二、第一部分：封装一个react组件
1. 初始化一个package.json
yarn init
2、安装相关插件包
"devDependencies": {
"@babel/core": "^7.10.4",
"@hot-loader/react-dom": "^16.13.0",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"autoprefixer": "^9.8.4",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^4.3.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.0.9",
"webpack-node-externals": "^2.5.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}\
3. 准备文件夹目录
4、编写组件内容
5、public/index.html
6、webpack.base.config.js文件
7、webpack.dev.config.js
8、webpack.prod.config.js
9、在package.json中添加配置
{
"name": "@sky_lv/utils-web",
"version": "1.0.1",
"description": "A powerful class library",
"main": "src/index.js",
"repository": "github.com/1995lk/lk-u…",
"author": "lvkuo",
"license": "MIT",
"scripts": {
"build": "webpack --config ./scripts/webpack.prod.config.js",
"dev": "webpack-dev-server --config ./scripts/webpack.dev.config.js"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@hot-loader/react-dom": "^16.13.0",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"autoprefixer": "^9.8.4",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^4.3.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.0.9",
"webpack-node-externals": "^2.5.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"publishConfig": {
"access": "public",
"registry": "registry.npmjs.org/"
}
}
10、属性说明
name: 包名，当建自己的私有仓库时，建议在包名前加一个scoped，如@sky-lk/utils-web，而不是utils-web，因为 npm 包特别的多，很容易重复。这样这个包就会是私有的，可以通过 npm publish --access=public 将这个包变为共有的包。
version: 包的版本，每次发布包的版本不能和上次一样。详细规范可见这里
description：包的简介。
repository：适合写 Github 地址，建议写成：:username/:repository。
license：认证。不知道该用什么的，就写MIT 吧。
main：包的入口文件。就是引入这个包的时候去加载的入口文件。
keywords：添加一些关键词更容易使你的包被搜索到。
11、调试本地开发：yarn dev
12、打包组件：yarn build
第二部分：将组件或者类库发布到npm
1.将源码发布到github上
1.1 在自己的github上新建一个respository，名称为lk-utils，并生成README.md
完成将项目源码发布至github上。
2、准备/注册npm账号,npm官网地址：www.npmjs.com/
2.1、在组件的项目根目录下登录npm。
npm login
2.2、按照提示输入username、password、email；登录后，可以通过npm whoami来查看登录用户信息。
2.3、发布组件到npm上
npm publish --access=public
2.4、在新项目中安装
yarn add @sky_lv/utils-web
注释：项目中类库方式引用
import { getLog, getLog2 } from '@sky_lv/utils-web';
