如何发布一个 npm 包

一 背景

在工作时，突然接到经理的一个要求，需要将一个react的高阶组件函数封装成一个npm包。之前从没弄过，当场还是有些懵逼的，但是这毕竟是工作，不能推脱。于是开始了学习、汤坑之旅。最终包发布，线上项目成功使用，虽然导致了一次线上故障，但还是快速地fix掉。吃一堑长一智，记录一下整个发布的过程和遇到的一些问题。

二 流程

npm 包可以将可复用逻辑封装成一个工具库，依赖 npm 的强大生态，可以在项目中引入，让代码变得更加简洁，提高效率。

1. 在 npm 官网注册一个账号。
2. 在本地登录 npm 账号。
3. 编写 npm 包内容。
4. 发布包。

三 开发过程

1 注册npm账号。

附录网站： https://www.npmjs.com/

2 在本地登录npm账号。

npm login

输入在npm官网注册的账号密码即可。

3 编写npm包

3.1 执行以下命令，创建一个npm模块

mkdir npmDir
cd npmDir
npm init -y

3.2 安装webpack

npm install webpack webpack-ci -D

在本地开发时，通常考虑更多的是代码的可读性，以便于在逻辑出错时，可debug其源码找到问题。然而发至线上时，则考虑更多的是包的体积，越小即代表着更快的载入。
同时，一个强大的包应该支持多种方式导入，例如es module的import,commonjs的require以及amd的古老方式。
为做到以上两点，选择了webpack作为构建工具。虽然用webpack个人感觉稍微有点重，但是它可扩展性强，日后利用loader以及plugin可以实现更多的编译以及优化需求。

3.3 梳理项目目录

src下的index.js对应着包的内容。
最外层index.js为所暴露的出口文件。
dist目录存放webpack打包后的文件。

3.4 编写对应内容

3.4.1 webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
   mode: 'none',
   entry: {
       'add': './src/index.js',
       'add.min': './src/index.js'
   },
   output: {
       filename: '[name].js',
       library: 'add',
       libraryTarget: 'umd',
       libraryExport: 'default',
       globalObject: 'this'
   },
   optimization: {
       minimize: true,
       minimizer: [
           new TerserPlugin({
               include: /.min.js$/,
           })
       ]
   }
}

1. mode: 支持开发版代码不压缩，线上版本压缩。此处将mode设置为'none'，默认全不压缩，然后自己用插件来配置压缩代码文件。

2. entry: 两个入口，add为在开发时导入，add.min文件为在线上时导入。

3. output:

   • filename: 设置占位符。默认为entry入口文件名字
   • library: 库的返回值赋值给变量或者属性 add。例如script引入方式，则可以全局使用add函数。此属性和library配合使用
   • libraryTarget: 变量暴露的方式。设置为umd即可支持es module、cmd以及script引入脚本的方式使用。
   • libraryExport: 配置要导出的模块中那些子模块需要被导出。只有output.libraryTarget被设置成commonjs或者commonjs2的时候才有效。我的导出方式是export default，因此我将其直接导出。如果不填此项，则默认引入的是module对象。调用方式会是 .default形式。

4. optimization: 利用TerserPlugin插件进行压缩代码,默认只压缩.min结尾的输出文件。

3.4.2 模块主要内容 src/index.js

  const add = (...rest) => {
    console.log(rest)
    alert('哈哈')
  }

  export default add

简单的一个测试函数

3.4.3 main入口文件index.js

  if (process.env.NODE_ENV === 'production') {
    module.exports = require('./dist/add.min.js');
  } else {
    module.exports = require('./dist/add.js')
  }

根据环境变量自动引入相关版本。

3.4.4 构建命令。package.json

  "scripts": {
    "test": "npm test",
    "build": "webpack",
    "prepublish": "webpack"
  },

发布包时可以手动执行build命令后后发布，也可通过prepublish钩子自动编译然后发布。

4 发布包

修改 package.json 中的name字段，即包在npm中的名字。小提示，想好名字之后，最好到npm官网上搜索一下这个包有没有被别人注册，有的话就要换一个了。
修改版本号，可手动修改，也可通过npm version命令进行更换。个人习惯于后面。

# 修改版本号
npm version major | minorr | patch
# 发布包到npm
npm publish

然后在npm官网上搜索一下，便可以找到你发布的包了。开心。

四 遇到的问题

4.1 在服务端渲染(ssr)的项目中引入该包时，会报错误 ”window is not defined“

本以为是包中代码逻辑错误，把项目中所有引入到window的地方全都用typeof兼容了一遍，本想完事大吉，结果还是报这个错误。上网搜索各种帖子无效之后，我感觉是webpack编译打包后出了问题，于是报着试一试的心态去看编译后的未压缩版本代码，果然发现了问题。

如图所示，打包后的文件为一个自运行匿名函数，函数第一个实参竟然是window。
于是去webpack官网查看相关文档，看其是否能配置。果然找到了

修改globalObject属性，将第一个参数设置为this，解决问题。

附录
gihub: https://github.com/ShengGaoW/shenggao-test-npm