如何发布一个属于自己的 npm 包

如何发布一个属于自己的 npm 包

start

• 在日常的工作中，我们会接触很多 npm 包。

• 例如：

  npm install jquery
  
  npm install @vue/cli
  
  npm install axios
  
  # ... 等等
  1
  2
  3
  4
  5
  6
  7

• 有时候会想到，构建一个属于自己的 npm 包，应该超级酷吧？

1. 初始化一个项目

1.1 创建一个文件夹，打开对应终端(命令行窗口)

1.2 初始化 package.json

[

1.3 创建一个基础的index.js文件

console.log('hello-tomato7')

function sayHello() {
  console.log('hello-tomato7')
}

exports.sayHello = sayHello
// 使用的是 commonjs 规范。
1
2
3
4
5
6
7
8

2. 注册账号

访问npm的官网： 访问npm官网点击这里。注册一个 npm 账号，并登录。

如果英文比较好，npm的官网建议多逛逛，可以发现很多优质的npm依赖包。

3. 命令行中登录我们的npm账号

！！ 需要注意一下，切换我们的下载源为npm官方下载源。

3.1 下载源

• 借助工具 ： nrm 切换下载源。
• 可以手动切换；

3.1.1 nrm 切换下载

# 1. 下载依赖
npm i -g nrm

# 2. 查看下载源列表
nrm ls

# 3. 使用npm官方的下载源。
nrm use npm 

# 4. 验证是否切换成功,查看输出的网址是否为我们设置的网址。
npm get registry
1
2
3
4
5
6
7
8
9
10
11

3.1.2 手动切换

# 1. 使用npm官方的下载源。
npm set registry https://registry.npmjs.org/ 

# 2. 验证是否切换成功,查看输出的网址是否为我们设置的网址。
npm get registry
1
2
3
4
5

3.2 登录

npm login
1

4. 推送我们的包

npm publish

# publish 出版
1
2
3

5. 验证是否发布成功

可以看到上方的截图，本地初始化一个项目，下载属于我自己的 npm 包 tomato7，在代码中引用并执行。

正确输出 hello-tomato7

6. 如何限制上传的文件

可以看到例如： vue 项目，主要暴露了 dist 文件，是怎么做到的？

可以借助package.json中的 files 字段

  "files": [
    "src",
    "dist"
  ],
1
2
3
4

7.关联 github仓库

可以借助package.json中的 repository 字段

 "repository": {
    "type": "git",
    "url": "https://github.com/lazy-tomato/tomato7"
  },
1
2
3
4

end

• npm包的创建就到这里，后续有好的想法，再做补充。