主要分为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你要改下版本号