手把手教你发布npm包教程--详细

1.文件初始化

步骤如下

mkdir switch-time
cd switch-time4
npm init -y
npm install webpack@4.43.0 webpack-cli@3.3.12 -D // 安装包
code . //打开项目

2. 代码配置

        1.webpack.config.js中

// 创建webpack.config.js,配置如下
const path = require("path");
const terserplugin = require("terser-webpack-plugin");
module.exports = {
  entry: {
    "switch-time": "./src/index.js",
    "switch-time.min": "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "./umd"),
    filename: "[name].js",
    //   指定库的名称
    library: "kkb",
    //   指定打包规范
    libraryTarget: "umd", // var this window global umd
    libraryExport: "default",
  },
  mode: "none",

  optimization: {
    minimize: true,
    //   plugins
    minimizer: [
      new terserplugin({
        test: /\.min\.js$/,//压缩js
      }),
    ],
  },
};

 2.package.json中设置版本和名称

3.在src同级中index.js中配置

if (process.env.NODE_ENV == "production") {
  module.exports = require("./dist/switch-time.min.js");
} else {
  module.exports = require("./dist/switch-time.js");
}

4. 在src-->index.js中写入自己封装的方法

const switchTime = {
    getTime () {
        // xxxxx
    }

}
export default switchTime 

3.打包发布

使用npx webpack打包
npm publish发布

4.注意事项

发布不成功的话可能是因为npm的版本问题，使用 npm install -g npm@7.x来升级