从零开始，发布一个npm react组件

一、注册npm账号

1. 在注册前，请保证npm 仓库是官方仓库

npm config set registry https://registry.npmjs.org/

2. 注册用户

$> npm adduser
Username: yourname
Password:
Email: (this IS public): youremail

二、新建组件库

1. 建一个npm文件夹

mkdir react-demo
cd react-demo
npm init -y

2. 配置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"
  }
  ...
}

3. 安装依赖

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 

4. 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)