前言
以react为例子
webpack作为打包工具
准备工作
安装node
npm上注册账号 https://www.npmjs.com/
创建要上传组件
新建项目
生成package.json文件
npm init
安装依赖
npm i -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react @babel-loader css-loader style-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin webpack-node-externals
安装失败的，再单独安装
修改package.json文件
"main": "dist/bundle.js",
"files": [
"dist/bundle.js"
],
"scripts": {
"start": "set NODE_ENV='development' && webpack-dev-server",
"dev": "set NODE_ENV='development' && webpack-dev-server",
"build": "set NODE_ENV='production' && webpack"
},
建目录和组件
可以放一个public/index.html ，方便查看效果
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次构建清除上一次打包出来的文件
const nodeExternals = require("webpack-node-externals");
const plugins = [new CleanWebpackPlugin()]
module.exports = {
mode: "production",
entry: "./src/components/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./dist"),
libraryTarget:"commonjs2" // 包需要被module.exports，这就要用到common
},
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
devServer: {
static: "./dist",
},
externals:[nodeExternals()], // nodeExternals 使得打包的组件中不包括任何 node_modules 里面的第三方组件，起到减小体积的作用。
plugins,
};
组件
index.js
src/app.js可以写一个运行起来看效果
建babelrc和忽略文件
.babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-react"]}
.gitignore
如果上传git 需要
避免携带node_modules文件
npm pack 生成tgz文件
.npmignore
发布
npm view 【你的npm包名】查看你的包名是否被注册了
npm login 登录 根据提示输入账号、密码、邮箱
npm publish (注意publish命令只能用npm )
报错看是否是npm源
换源：
npm i -g nrm
nrm current 查看当前源
nrm ls查看自己的源
nrm use npm 切换源
更新
npm version patch
npm publish