react组件发布npm

主要分为3步

1.先初始化 npm init -y 填入相关信息
2.修改package.json文件
这里注意几点都是在最开始容易出错的
name 名字一定不要和npm中的其他包重复
main 就是别人下载npm包的时候要访问的地方
files 就是你上传npm的时候要传的文件夹
剩下的就是一些依赖webpack的和babel的
比如你要安装一些第三方的一定要npm install -S 加名这样就是要打包的依赖

{
  "name": "zzreact",
  "version": "1.0.7",
  "description": "react中使用的组件第一版",
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "start": "set NODE_ENV=dev&& webpack-dev-server",
    "build": "set NODE_ENV=prod&& webpack"
  },
  "author": "reqingzai",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    
  }
}

3.配置webpack的配置文件webpack.config.js
这里一定注意output中的libraryTarget这个非常重要不然打包后你是没法在你的项目中导出的

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./public/index.html"),
    filename: "./index.html"
});
var NODE_ENV = process.env.NODE_ENV;
module.exports = {
    mode:NODE_ENV=='dev'?"development":"production",
    entry: path.join(__dirname, NODE_ENV=='dev'?"./src/index.js":"./src/components"),
    output: {
        path: path.join(__dirname, "dist"),
        libraryTarget: 'umd',  //发布组件专用
        filename: "index.js"
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            use: "babel-loader",
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.(woff|woff2|eot|otf|ttf)$/,
            use: ['file-loader']
        }]
    },
    plugins: [htmlWebpackPlugin],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    devServer: {//这里就是npm run start的端口
   	    port: 8080
    }
};

然后就可以开发组件了

在src的index组件中引入下你用的组件然后你在本地测试下看看是否好使
如果好使你就打包注意我下面的 import {FlvCom,Timer} from "…/dist/index.js"
这里是打包之后你测试下看看好不好使，好使之后你在发布

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import { FlvCom ,Timer} from "./components/index"
// import {FlvCom,Timer} from "../dist/index.js"
class App extends Component{
    render(){
        return (
            <div style={{
                width: "300px", height: "300px"
            }}>
                <FlvCom vidoeUrl=""></FlvCom>
                <Timer className="timerComCssss" type="YYYY-MM-DD HH:mm:ss"></Timer> 
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

这些测试和基本操作都完事之后你就可以发布了

npm login #先进行npm登录这里注意你的npm路径不要是淘宝镜像要设置成原来的
#登录之后你可以
npm whoami #查看登录者是谁
npm publish #进行发布你的代码，这时候你要注意你的版本号不能和上次一样不然会报错403你要改下版本号