【译】发布你自己的npm包

深藏阁楼爱情的钟 2022-10-01 09:56 293阅读 0赞

**备注：[npm模块][npm]有个神奇的样板。这篇文章是基于我从设置中学到的东西。**

如今，NPM已经成为javascript库的事实上的注册表。特别是React,Angular和其他前端库主导的网络和node.js接管的服务器端，NPM软件包比以往任何时候都更受欢迎。通常，我们会在代码中引入实用包，比如[typy][]，[sugar][]，并轻松的使用它们。

那么，你有没有想过编写自己的**实用程序/库**，并将其发布到NPM上面，以便在世界任何的地方可以重复使用它？如果是，那就继续阅读。✨

我们将在本文中介绍以下部分。

1.  为什么？
2.  发布的步骤
3.  样板文件

### 为什么？ ###

当你在多个项目中工作时，你经常发现自己在多个项目中重复简单的事情。举个例子，以你想要的方式解析日期并对其进行格式化。大多数开发者只是从一个项目复制代码到另一个项目中使用它，因为它只是几行代码。但更好的方法是提取代码并将其放在一个公共的位置，以便你可以从任何项目中访问它。NPM是一个理想且不断发展的生态系统，并且可以免费使用它。所以，从长远看，将所有可重用代码作为npm包发布上去将会帮助到你。

`无论代码有多少，无论是一行还是一千行，都可以将其作为包发布，以便在多个代码库中轻松使用。`

此外，你还可以成为这个库的**作者**。多么酷啊！?

### 发布的步骤 ###

发布通常是一个简单的过程。

`code => test => publish => revise code => test => publish new version ...`

#### 入口 ####

创建一个新目录（，进入目录）并从终端输入以下命令。

npm init
    复制代码

（根据提示）输入有意义的包名称和包的相应详细信息。这将为你创建`package.json`。所有NPM包都需要`main`键。这定义了我们库的入口点。默认情况下，这**入口点**将是`index.js`，但是你可以根据你自己的情况来更改入口点（文件）。

对于`Babel`或基于`bundle`的库，入口点通常位于构建目录中。

#### 源码 ####

如果你正在编写一个小型库，则可以将所有代码放入`index.js`中。但是，更常见的是，我们将抽象代码并将其放入单独的文件中。所以，理想的方法是将所有源代码保存在`src`中。

这是目前最广泛使用和推荐的源代码设置，尽管它从一个库到另一个库中有所不同。

*  **ES6** \-- [Babel][]
 *  **Linting** \-- [ESLint][]
 *  **Code formatting** \-- Beautify/[Prettier][]
 *  **Bundling** \-- [Webpack][]

我们大多数的人已经知道（上面）这些事，所以，我仅仅列出来，把它们留给你弄清楚。

#### 测试 ####

你需要进行全面测试，以确保你的代码按照预期工作。有各种测试设置。你可以使用最适合你需求的。那么，广泛使用的测试设置有

*  JavaScript Utility — [Mocha][]
 *  React Library — [Jest][] with [Enzyme][]
 *  Angular Library — [Karma][] with [Jasmine][]

... 等等

如果你需要代码覆盖率，我很喜欢（覆盖率），[Istanbul][]是任何JavaScript项目的最佳覆盖工具之一。我非常喜欢它。

#### 发布 ####

一旦你的代码通过了测试，那么可以准备发布了。

1.  在[npmjs.com][]中创建一个账号。
2.  在控制台上运行下面的指令

npm login
    复制代码

输入你的用户名和密码。这将存储凭据，因此你不必为每次发布输入凭据。

1.  现在去发布，运行（下面指令）

npm publish
    复制代码

这会将你的包发布到NPM注册表。发布完成后（不到一分钟），你可以在链接`https://www.npmjs.com/~{username}/{package-name}`中查看你的包。

如果你想对包进行更改，则必须更改版本号并再次发布。

请记住使用npm命令`npm version patch`，`npm version minor`和`npm verson major`来自动更新版本，而不是手动更新它们。这些命令是基于[语义版本控制][Link 1]。

### 样板文件 ###

我有一些我自己的npm软件包，并在线研究了创建NPM软件包的所有**最佳实践**，并专门为此创建了**样板文件**。它具有预先设置的所有功能，以便你可以在**几秒钟内开始使用**。如果你正在寻找编写JavaScript util包，它可能只是你的样板。

样板文件的链接 -- [npm-module-boilerplate][npm]。

你是最棒的！祝你度过美好的一天！?

### 后话 ###

原文：[hackernoon.com/publish-you…][hackernoon.com_publish-you]

文章首发：[github.com/reng99/blog…][github.com_reng99_blog]

更多内容：[github.com/reng99/blog…][github.com_reng99_blog 1] （客官可否star下仓库啊@~@!）

转载于:https://juejin.im/post/5ce4ce0f51882572e42300bd

[npm]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fflexdinesh%2Fnpm-module-boilerplate
[typy]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fflexdinesh%2Ftypy
[sugar]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fandrewplummer%2FSugar
[Babel]: https://link.juejin.im?target=https%3A%2F%2Fbabeljs.io%2F
[ESLint]: https://link.juejin.im?target=https%3A%2F%2Feslint.org%2F
[Prettier]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fprettier%2Fprettier
[Webpack]: https://link.juejin.im?target=https%3A%2F%2Fwebpack.js.org%2F
[Mocha]: https://link.juejin.im?target=https%3A%2F%2Fmochajs.org%2F
[Jest]: https://link.juejin.im?target=https%3A%2F%2Ffacebook.github.io%2Fjest%2F
[Enzyme]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fairbnb%2Fenzyme
[Karma]: https://link.juejin.im?target=https%3A%2F%2Fkarma-runner.github.io%2F2.0%2Findex.html
[Jasmine]: https://link.juejin.im?target=https%3A%2F%2Fjasmine.github.io%2F
[Istanbul]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fgotwarlost%2Fistanbul
[npmjs.com]: https://link.juejin.im?target=https%3A%2F%2Fwww.npmjs.com%2F
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdocs.npmjs.com%2Fgetting-started%2Fsemantic-versioning
[hackernoon.com_publish-you]: https://link.juejin.im?target=https%3A%2F%2Fhackernoon.com%2Fpublish-your-own-npm-package-946b19df577e
[github.com_reng99_blog]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Freng99%2Fblogs%2Fissues%2F25
[github.com_reng99_blog 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Freng99%2Fblogs