在上一章节中，我封装了一个基于react的树状组件，后来想把它发布到npm上，下面主要介绍一下发布过程中遇到的问题：
1、去注册npm账号，注册地址（https://www.npmjs.com）， 再登录 npm login输入账号密码
2、发布前需要先打包，不能直接发布react的组件源码
babel src --out-dir lib --copy-files
如果用到less还需要编译为css
lessc src/components/Tree.less src/components/tree.css
3、配置你的package.json，注意name是不能和npm库里面已有的重复，main是你的入口文件
{
"name": "react-tree-component-select",
"version": "1.0.2",
"description": "A Tree Component For React",
"main": "lib/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.dev.conf.js",
"build": "webpack --config webpack.conf.js",
"publish": "lessc src/components/Tree.less src/components/tree.css && babel src --out-dir lib --copy-files"
},
"repository": {
"type": "git",
"url": "git+https://github.com/marhovey/react-tree.git"
},
"keywords": [
"react",
"react-tree",
"tree",
"component"
],
"author": "marhovey",
"license": "ISC",
"bugs": {
"url": "https://github.com/marhovey/react-tree/issues"
},
"homepage": "https://github.com/marhovey/react-tree#readme",
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0",
"@babel/runtime": "^7.4.3",
"autoprefixer": "^9.5.1",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.6.0",
"open-browser-webpack-plugin": "0.0.5",
"postcss": "^7.0.14",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"transfer-webpack-plugin": "^0.1.4",
"url-loader": "^1.1.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
4、打包以后就可以执行npm publish发布了。
5、发布成功以后使用npm i react-tree-component-select，在项目中import验证，
6、更新版本也是执行npm publish版本号需要修改
react-tree-component-select项目github地址