在npm发布包

背景

在工作中我们有一些方法或者组件是十分常用的，如果每次都复制粘贴显得不太专业的样子，我们可以将我们常用的这些东西封装成库，打包发布到npm上，使用时像引入其他库那样使用import XX from '包名'，看起来是不是专业许多，hhhh

步骤

首先，需要注册一个npm账号

www.npmjs.com/ 按照提示填账号名、密码、邮箱等信息即可。

开发我们的包

• mkdir xxx文件夹名
• cd xxx文件夹 进入到文件夹
• 打开文件夹
• npm init -y 初始化项目，自动生成package.json文件
• 安装webpack webpack-cli 打包工具 npm i webpack webpack-cli -D
• 配置webpack 默认使用的是webpack.config.js文件夹名，你也可以叫其他名，在webpack打包命令时加上--config 文件名即可，即 webpack --config 文件名 以下是一个最简单配置例子，min.js是压缩版，使用插件terser-webpack-plugin对文件进行了压缩（要先安装以下terser-webpack-plugin插件：npm i terser-webpack-plugin -D）。

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  mode: "none",
  entry: {
    "common-dev-js": "./src/index.js",
    "common-dev-js.min": "./src/index.js",

  },
  output: {
    filename: "[name].js",
    library: "commonDevJs",
    libraryTarget: "umd",
    libraryExport: "default",
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({ include: /\.min\.js$/ })],
  },
};

• 库的代码我是放在src目录下的index.js 在src/index.js中编写自己的代码并模块导出
• 在package.json配置打包命令 script对象中加上 "build": "webpack",

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "prepublish": "webpack"
  }

执行npm run build打包文件

• 编写包的入口文件 package.json文件中的main属性即报入口文件路径 创建对应的文件，可以编写在不同环境下导出的文件，如开发环境是非压缩版，生产环境是压缩版

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

• 执行npm login 登录npm账号
• 执行npm publish 发布npm 包

如果这一步报403 Forbidden的错误，检查

1. 是否已经成功登录了
2. 镜像源是不是npm(npm config list)，不是的话执行命令切换镜像源 npm config set registry registry.npmjs.org/
3. 检查包名是否已经和npm社区中别人发过的包重名 可以在npm上搜索你本来要发布的包名，如果能搜到就是被别人发布过了，改个包名。

• 在npm上搜索自己发的包名，能搜到就是发布成功啦

文件夹目录