发布一个npm包的经验分享-Toy模板网

这篇具有很好参考价值的文章主要介绍了发布一个npm包的经验分享。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

（一）前言

菜鸡一个，发布npm 包（dfa-filter，使用 dfa 算法进行敏感词过滤）遇到了一堆问题，这里记录一下。

（二）Node 环境与 Browser 环境

Node.js 和浏览器都是 JavaScript 运行环境，但它们之间存在一些区别。

JavaScript API：Node.js 和浏览器都提供了一些 JavaScript API，但它们的范围和实现方式不同。例如，Node.js 提供了文件系统和网络编程等 API，而浏览器则提供了 DOM 和 XMLHttpRequest 等 API。
模块系统：Node.js使用的是CommonJS模块系统，而浏览器使用的是 ES6 模块系统或AMD 模块系统。在没有配置webpack等构建工具的情况下，浏览器环境不支持CommonJS语法。
全局对象：Node.js 的全局对象是 global，而浏览器的全局对象是 window。
环境限制：浏览器中的 JavaScript 受到许多限制，例如无法访问本地文件系统、跨域访问其他域名下的资源等，而 Node.js 则没有这些限制。
处理器和内存：浏览器通常运行在用户电脑的单个进程中，而 Node.js 可以利用多核处理器和更大的内存来提高性能。

（三）列举问题

a）WEBPACK_IMPORTED_MODULE_3__.test) is not a function 错误

出现这个错误往往要检查这个包中是否有module.exports 变量来导出模块，而在浏览器端不支持 module.exports 变量。

解决方法，别用cmjs语法来写用于浏览器的npm包，顺带一提，这个错误就是browserify在帮我转换的时候用了module.exports方法，可能是我那个测试用的项目里也没用一些构建工具

出现其他数字的时候也有可能是自己的引入方式有误，如

import { dfa } from `dfa-filter`
// 实际上根据源码暴露的方式（采用默认导出的形式），需要这样引入
import dfa from `dfa-filter`

b）cant resolve fs 错误

fs 是Node.js的内置模块，不能在浏览器的环境下运行，浏览了 Stack Overflow与github，笔者目前仍未找到好的解决方法。欢迎留言指教~

c）cant find module ‘keywords.json’ 错误

这个问题带有一点背景了，在了解到fs模块是不能在浏览器环境下运行后

（四）学到了学到了

a)如何写出兼容 Node 环境与 Browser 环境的 npm 包

可参考这篇译文，简而言之就是要针对两个环境写两套代码，一套适用于 Node ，一套适用于 Browser ，并在package.json中配置Browser环境下的入口文件。如在笔者发布的包中，针对 Node 环境，使用了CommonJS语法，针对Browser环境，使用了ES module语法。并在package.json中进行了如下配置：

{
  /* ... */
  "browser": {
    "./index.js": "./browser.js"
  }
}

这样一来，在Browser环境下调用该包时，就会使用browser.js的代码了。

b) 有没有方法把 Node 环境中的代码直接转换成浏览器可用的代码

有的，就是 browserify。可以使用 browserify 转换自己的代码，使其在浏览器端也能够正常运行。

首先，需要通过 npm 安装 browserify：

npm install -g browserify

然后，需要将需要转换的代码放在一个单独的文件中，例如 main.js：

const keyword = require('./keyword.json');
console.log(keyword);

接着，需要使用 browserify 命令将 main.js 文件转换成浏览器可用的文件：

browserify main.js -o bundle.js

这个命令会生成一个名为 bundle.js 的文件，其中包含了 main.js 文件的所有依赖关系和转换后的代码。

c) npm包发布过程中常用的一些命令

// 切换源
npm config set registry https://registry.npmjs.org/
// 淘宝源
npm config set registry https://registry.npm.taobao.org/

// 更新包
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

// 发布包
npm publish

// 在本地 web 项目中测试包
npm link // 在包目录下运行
npm link <packageName> // 在 web 项目下运行