Tantan Fu

Oct 01, 2017

迈向开源的第一步——发布属于自己的 npm 包

notion image
本文整理自 egghead.io

添加版本控制

输入以下命令:
同时需要在 .gitignore 文件中加入 node_modules 等目录和文件
上述命令执行完毕之后,我们已经在 github 上初始化了我们的代码仓库,接下来需要初始化 npm 配置。

初始化 npm 配置

在随后的问答中,填入你想要的信息,例如
注意这里的 entry point,我们会在后面解释

添加 build 脚本

为了能够使用 ES6 的语言特性,我们将会使用 babel
然后在 package.jsonscripts 中添加如下命令:
在运行 npm run build 之后,会将 src 目录中的代码「编译」(转换)之后放入 build 文件夹中。这也就是在第二步中,我们将 entry point 设置为 build/index.js 的原因。
同时,需要为 babel 做一些配置,将下面的代码放入 package.json 中:
接下来新建 src/index.js 文件:
这时我们运行 npm run build,就会在 build/ 文件夹中找到转化之后的代码。

添加 dev 脚本

为了能够在每次改动 src 目录中代码的时候,自动运行 build,我们添加 watch 这个包:
package.jsonscripts 中添加 dev 命令:
运行 npm run dev,现在可以修改一下 src/index.js 文件的内容,查看效果。

添加 test 脚本

接下来为我们的项目添加 test 命令,这里我们使用 jest
package.jsonscripts 中添加 test 命令:
新建 src/index.test.js 文件:
修改 src/index.js 文件的内容,来查看 npm test 的运行结果。和 build 命令一样,我们也可以监听文件的变化,自动运行测试命令。在 package.jsonscripts 中添加如下命令:

添加功能

在开发的过程中,可以开两个 terminal 窗口,分别运行以下两个命令
修改测试文件:
修改 index.js 文件内容:
再添加一个测试用例:
这时候会发现测试挂了,第二个 switch 并没有被替换掉,(测试的重要性!) 修改 index.js 文件 new RegExp(words.join('|'), 'ig') 测试通过!!!

使用 npm link 进行测试

在将代码发布到 npm 之前,我们可以作为库的使用者,试着使用我们的库。npm link 可以满足我们的需求 name of the package: ftt-sensitive-words
运行如下命令
这时运行 npm link ftt-sensitive-words,就可以将我们之前写的包 link 到当前的 node_modules 中,新建一个 index.js 文件,使用一下我们的代码吧!

文档

为了能够让使用者更好地使用,在 README.md 中可以写一些使用的示例,例如:

发布

package.jsonscripts 中添加 prepublish 命令:
这样可以确保在 publish 之前,运行过 build。 这个时候还存在一个问题,我们的源码是在 src 文件中,我们希望库的使用者,使用 build 目录中的代码,所以,src 文件中的东西不应该作为 npm 包的一部分,这时候 .npmignore 就出场了。
.npmignore 文件中加入 src/.npmignore.gitignore 功能类似,一个是针对 npm,一个是针对 git。
之后运行如下命令就可以发布了

update

为了更方便地管理代码的更新与发布,推荐使用 np 这个库。
package.jsonscripts 中添加 release 命令:
在修改代码之后,可以运行如下命令来进行更新。
Happy Hacking~

Copyright © 2024 Tantan Fu