一、注册npm账号
- 在注册前，请保证npm 仓库是官方仓库
npm config set registry https://registry.npmjs.org/
- 注册用户
$> npm adduser
Username: yourname
Password:
Email: (this IS public): youremail
二、新建组件库
- 建一个npm文件夹
mkdir react-demo
cd react-demo
npm init -y
- 配置package.json
{
"name": "react-demo",
"version": "1.0.0",
"description": "A React Component",
"main": "dist/bundle.js", // 入口文件
"author": "作者",
"repository": {
"type": "git",
"url": "" // 指定你的git仓库
},
"files": [
"dist" // npm发布的文件
],
"keywords": [
"react"
],
"license": "MIT", // 协议
"scripts": {
"build": "webpack --env.NODE_ENV=production",
"dev": "webpack-dev-server"
}
...
}
- 安装依赖
npm i react react-dom
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties webpack webpack-dev-server webpack-cli html-webpack-plugin webpack-node-externals css-loader style-loader
- webpack打包配置
- webpack.config.js
const path = require("path");
const nodeExternals = require("webpack-node-externals");
module.exports = {
mode: "production",
entry: "./src/react-demo.js", // 这是你的组件文件
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "../dist"),
libraryTarget: "commonjs2"
},
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
exclude: "/node_modules/"
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
externals: [nodeExternals()]
};
- .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
具体文件配置可参照我的示例
三、发布
$> npm login
Username: yourname
Password:
Email: (this IS public): youremail
$> npm publish
添加MIT协议
建议直接使用github仓库，新建文件(Create new file)， name为LICENSE，然后右边可以选择模板(choose a license template)，选中你想添加的协议， 提交即可(Review and submit)
