如何上传你的组件到npm

前言

以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 需要

发布

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

离线部署

npm pack    生成tgz文件
引入：npm i xxxx.tgz

删除指定包版本

npm unpublish 【包名@版本号】

删除整个包

npm unpublish 【包名】 --force

从npm 下载自己的包后会有携带node_modules文件问题

1. .npmignore

2. 设置白名单

3. 建一个文件放置打包后的文件和package.json

   //然后在此文件 ：
    npm publish 

npm网站上效果