教你如何把自己的类库上传到 NPM

前言

除了打包应用程序，webpack 还可以打包 JavaScript library， 如何打包呢？
莫急，咱接着往下瞅。。。

创建 library

我们最终的目的就是如下图的目录：

image.png

第一步：创建 package.json 文件

npm init -y 

第二步：安装 webpack

npm install webpacl webpack-cli -D

第三步：创建 src文件、src/index.js、dist 以及 webpack.config.js
这里提示下，最好也建立一个 README.md 文件用来说明使用方法

第四步：编写 webpack.config.js 文件

const path = require('path')

module.exports = {
    // 模式
    mode: 'development', // 开发模式 生成普通 js 文件
    // mode: 'production', // 生产模式 生成 .min.js 压缩文件
    // 入口
    entry: './src/index.js',
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'wk_utils.js', // 生成的文件名 对应 开发模式
        // filename: 'wk_utils.min.js', // 生成的文件名 对应 生产模式
        library: 'wk_utils', // 向外暴露的对象的名称
        libraryTarget: 'umd' // 支持 ems / commontjs / requirejs 规范
        // libraryTarget: 'amd' // 支持 requirejs 规范
    }
}

写到这里就可以测试打包了
注意：不能全局安装 webpack 以免影响其他项目的使用
我们可以使用 npx 来运行局部的 webpack，即 npx webpack
成功后可在 dist 文件里看到打包文件，也可测试不同模式的打包文件

问题：外部引用后，怎么知道是引用我们生成的 工具文件？？
这时我们就需要告诉程序去找我们的打包文件，即配置 package.json

第五步：配置 package.json 文件

{
  "name": "wk_utils",
  "version": "1.0.0",
  "description": "",
  "main": "dist/wk_utils.js", // 告诉程序的入口
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mr.WK",
  "description": "轻便、快捷、实用的成长型自定义工具函数库", //简介
  "keywords": "['utiks', 'array', 'object']", // 便于别人更容易搜索到
  // "license": "ISC", // 使用许可：只能用，不能改
  "license": "MIT", // 即可用 也可改
  "devDependencies": {
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0"
  }
}

第六步：发布至 NPM

1. 在 npm 官网注册账号：用户名 邮箱 密码
2. npm p配置的中央仓库应是 npm，如不是运行以下命令

npm config set registry https://registry.npmjs.org/

3. 添加用户，配置

npm addUser
依次添加：userName、password 和 Email
只需添加一次即可

4. 上传至 npm

npm publish

5. 删除 已上传的库

npm unpublish --force

删除需谨慎，72 小时内可删除，否则再也不能删除

第七步：开发时如何实时刷新代码

我们在开发时，需要实时更改代码，实时测试代码，犹如 Vue 的热更新，不想每改一次都去手动 npm webpack 打包
解决方案：
可在 package.json 文件里配置，如下：

"scripts": {
    "build": "webpack --watch",
    "dev": "webpack-dev-server"
  }

配置后，我们运行 npx webpack --watch 即可实时打包
刷新浏览器后，即可看到最新更改后的代码

好了，到这里就结束了，赶快试试吧！！！