发布自己的第一个npm包

这个需要威少看下

2020年12月30日 00:14 · 阅读 1217

最近会记录一些今年前端工程化的笔记，常读常新。

欢迎铁子们给波点赞、关注。

废话不多说，搞起。

0.创建一个包文件夹

mkdir my-first-npm-package && cd my-first-npm-package
复制代码

1.初始化一个 package.json

执行 npm init 后填写一串问题，就能生成一个 package.json 文件，类似如下：

> npm init

package name: (my-first-npm-package)
version: (1.0.0) 1.0.0
description: my first npm package
entry point: (index.js)
test command:
git repository:
keywords:
author: 2205405321@qq.com
license: (ISC)
About to write to /Users/chokingwin/code/frontend/my-first-npm-package/package.json:

{
  "name": "my-first-npm-package",
  "version": "1.0.0",
  "description": "my first npm package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "2205405321@qq.com",
  "license": "ISC"
}


Is this OK? (yes) yes
复制代码

这里有几种常见的组合值得一说。

如果为了跳过繁复的问题填写，你可以带上 -y 或 --yes，这样生成的 package.json 文件，会使用 npm 默认配置。

> npm init -y
> npm init --yes
复制代码

这个默认配置是可以通过如下命令进行配置：

> npm set init.author.email "example-user@example.com"
> npm set init.author.name "example_user"
> npm set init.license "MIT"
复制代码

另外，因为包名的唯一性，我们这次使用的 my-first-npm-package 包名，大概率早就被人使用过了（先到先得呀🤣）。为了避免碰墙，我们再使用个 scope 标志来创建 package.json 。

> npm init --scope=@chokingwin -y
复制代码

这个玩意相当于设置个命名空间，告诉 npm 仓库，这是 chokingwin 家的一个叫 my-first-npm-package 的包，别搞混了哈。

2.在入口文件写下你这个包的核心逻辑

我们观察下通过 npm init --scope=@chokingwin -y 生成的这个 package.json 。

{
  "name": "@chokingwin/my-first-npm-package",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
复制代码

需要关注其中 main 这个字段，它标明了哪个文件是整个包的入口文件。

这么看，我们需要在根目录下新建一个 main.js 文件了。

既然都是包入口文件了，那就把我们这次的包逻辑，写在这个文件里呗。😁

exports.printMsg = function () {
    console.log("This is a message from the @chokingwin/my-first-npm-package package.");
}
复制代码

简单导出一个 printMsg 方法。

3.建一个测试目录，试着引入看看有无问题

到这步，我们得看看我们 @chokingwin/my-first-npm-package 包里的 printMsg 方法，是否能被正确使用了。

再另起新建个文件夹 test-directory ，我们使用 npm i /Users/chokingwin/code/frontend/my-first-npm-package 安装下这个包。

注意：这里的包还未发布，包名需要使用你，本地包文件夹所在的绝对路径哦。对应到我这里的就是 /Users/chokingwin/code/frontend/my-first-npm-package

安装成功后，在命令行应该会看到类似如下内容：

> npm i /Users/chokingwin/code/frontend/my-first-npm-package
npm WARN saveError ENOENT: no such file or directory, open '/Users/chokingwin/code/frontend/test-directory/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/chokingwin/code/frontend/test-directory/package.json'
npm WARN test-directory No description
npm WARN test-directory No repository field.
npm WARN test-directory No README data
npm WARN test-directory No license field.

+ @chokingwin/my-first-npm-package@1.0.0
added 1 package in 0.245s
复制代码

在包安装成功后，我们写个 test.js 文件来引入 printMsg 方法。

var { printMsg } = require('@chokingwin/my-first-npm-package');

printMsg();
复制代码

执行，测试下效果。

> node test.js 
This is a message from the @chokingwin/my-first-npm-package package.
复制代码

OK，到此为止，看来是没啥毛病了。

4.发布

最后一步，把我们的包发布到 npm 仓库去，前提当然是你注册过账号了。

先执行 npm whoami 看下是否登陆过 npm。

> npm whoami
npm ERR! code ENEEDAUTH
npm ERR! need auth This command requires you to be logged in.
npm ERR! need auth You need to authorize this machine using `npm adduser`
复制代码

提示 ENEEDAUTH ，显然我们还要登录下。

执行下 npm adduser ，输入你注册时的 Username、Password、Email

> npm adduser --registry=https://registry.npmjs.org --scope=@chokingwin --always-auth

> npm adduser --registry=https://registry.npmjs.org --scope=@chokingwin --always-auth
Username: chokingwin
Password: 
Email: (this IS public) 2205405321@qq.com
Logged in as chokingwin to scope @chokingwin on https://registry.npmjs.org/.
复制代码

登录成功后，使用 npm publish 就能发布了。

考虑到我们的包还使用了 scope，我们得使用 npm publish --access public。

> npm publish --access public
npm notice 
npm notice 📦  @chokingwin/my-first-npm-package@1.0.0
npm notice === Tarball Contents === 
npm notice 123B main.js     
npm notice 245B package.json
npm notice === Tarball Details === 
npm notice name:          @chokingwin/my-first-npm-package        
npm notice version:       1.0.0                                   
npm notice package size:  368 B                                   
npm notice unpacked size: 368 B                                   
npm notice total files:   2                                       
npm notice 
+ @chokingwin/my-first-npm-package@1.0.0
复制代码