发布npm包时，你要考虑的东西都在这了

老标题党了

（一）切换源

// npm 官方
npm config set registry=<http://registry.npmjs.org>
// 新淘宝源
npm config set registry https://registry.npmmirror.com

（二）经验分享

a）https

若 npm 包中 method 含协议类型为 http 的 请求 （可跨域请求），但调用服务协议类型为 https ，将报错：

[blocked] The page at https://XXX was not allowed to display insecure content from http://XXX

请将接口服务升级 https，url 书写方案：

• https://XXX ：http 服务请求 https 接口 无报错 ；https 服务请求 https 接口 无报错 。
• //XXX ：请求协议类型随服务协议类型 自动转化 。

b）环境变量

若 npm 包中 method 执行需区分服务环境，通过 process.env.NODE_ENV 获取 环境变量 是否准确（node npm 包无上述准确性问题）？即便准确，命名规范也 未统一 ，如生产环境可由 prod、production 等指代。可考虑传参 约定的 环境变量。

c）转码

转码即将 ES6、ES7 转 ES5，先附赠 Babel 转码教程，再科普忽视转码的危害：

• 未转码 前端包 引用于 低版本浏览器 不兼容。

另外，含未转码片段的 vendor.js （通常将所依赖 node_modules 模块打包至 vendor.js）若先于 app.js 执行将直接导致较低版本浏览器 白屏 。

• 未转码 node 包 引用于 低版本 node 服务 抛异常。

若服务器所安装 node 版本较低，引用未转码包将导致接口 抛异常 。更糟糕的是若被页面加载前置中间件依赖，直接引发 白屏 。

此刻或许有同学考虑植入 babel-polyfill…

d）请求

含请求的 npm method，采用 Axios 等第三方 HTTP 库将受业务对 Axios Request 拦截的影响。建议使用原生 XMLHttpRequest 对象封装。

e) node环境与browser环境区分

当我们在不同环境下 import 一个 npm 包时，有人会说加载的是 npm 包main字段指定的文件。

但npm 包其实又分为：只允许在客户端使用的，只允许造服务端使用的，浏览器 / 服务端都可以使用。
如果我们需要开发一个 npm 包同时兼容支持 web 端 和 server 端，需要在不同环境下加载 npm 包不同的入口文件，显然一个 main 字段已经不能够满足我们的需求，这就衍生出来了 module 与 browser 字段。

字段定义

• main : 定义了 npm 包的入口文件，browser 环境和 node 环境均可使用
• module : 定义 npm 包的 ESM 规范的入口文件，browser 环境和 node 环境均可使用
• ·browser : 定义 npm 包在 browser 环境下的入口文件

示例

假设我们的npm包文件目录如下

----- lib
   |-- index.browser.js
   |-- index.browser.mjs
   |-- index.js
   |-- index.mjs

其中 *.js 文件是使用 commonJS 规范的语法 (require('xxx'))，*.mjs 是用 ESM 规范的语法 (import 'xxx')

其 package.json 文件：

  "main": "lib/index.js",  // main 
  "module": "lib/index.mjs", // module

  // browser 可定义成和 main/module 字段一一对应的映射对象，也可以直接定义为字符串
  "browser": {
    "./lib/index.js": "./lib/index.browser.js", // browser+cjs
    "./lib/index.mjs": "./lib/index.browser.mjs"  // browser+mjs
  },

  // "browser": "./lib/index.browser.js" // browser

总之就是

• 如果 npm 包导出的是 ESM 规范的包，使用 module
• 如果 npm 包只在 web 端使用，并且严禁在 server 端使用，使用 browser。
• 如果 npm 包只在 server 端使用，使用 main
• 如果 npm 包在 web 端和 server 端都允许使用，使用 browser 和 main
• 其他更加复杂的情况，如 npm 包需要提供 commonJS 与 ESM 等多个规范的代码文件，请参考上述使用场景或流程图

（三）参考资料

package.json 中 你还不清楚的 browser，module，main 字段优先级

npm 包发布经验分享