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

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

start

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

  • 例如:

    npm install jquery
    
    npm install @vue/cli
    
    npm install axios
    
    # ... 等等
    
  • 有时候会想到,构建一个属于自己的 npm 包,应该超级酷吧?

1. 初始化一个项目

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

如何发布一个属于自己的 npm 包_第1张图片

1.2 初始化 package.json

[如何发布一个属于自己的 npm 包_第2张图片

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

console.log('hello-tomato7')

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

exports.sayHello = sayHello
// 使用的是 commonjs 规范。

如何发布一个属于自己的 npm 包_第3张图片

2. 注册账号

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


如何发布一个属于自己的 npm 包_第4张图片

如果英文比较好,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

如何发布一个属于自己的 npm 包_第5张图片

3.1.2 手动切换

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

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

如何发布一个属于自己的 npm 包_第6张图片

3.2 登录

npm login

如何发布一个属于自己的 npm 包_第7张图片

4. 推送我们的包

npm publish

# publish 出版

如何发布一个属于自己的 npm 包_第8张图片

如何发布一个属于自己的 npm 包_第9张图片

5. 验证是否发布成功

如何发布一个属于自己的 npm 包_第10张图片

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

正确输出 hello-tomato7

6. 如何限制上传的文件

可以看到例如: vue 项目,主要暴露了 dist 文件,是怎么做到的?

如何发布一个属于自己的 npm 包_第11张图片

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

  "files": [
    "src",
    "dist"
  ],

7.关联 github仓库

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

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

end

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

你可能感兴趣的:(nodejs,npm,前端,javascript)