npm 上传发布自定义组件以及使用详细流程(Vue包含)

• Vue 自定义全局UI组件

• Vue 全局导入 JS 文件

• 前端开发经常需要使用到 npm 安装第三方库，那么我们如何将自己写的库上传到 npm 进行使用呢？

• 如果在项目中使用到依赖包，可以先了解一下 npm 命令使用介绍以及区别，里面有对安装依赖包的详细介绍

一、注册 NPM 账号，注册好之后记得去你填的注册邮箱里面验证一下，在继续下一步，否则发布会报错。

二、打开命令行，登录 NPM

1)、在登录之前，先确定一下 NPM 镜像，如果镜像在之前设置为了淘宝镜像，那么在使用 npm login 登录时会出错，所以需要先将源替换为官方源，然后再上传。

// 查看当前 npm 源配置
$ npm config ls
// 修改 npm 源地址为官方源
$ npm config set registry https://registry.npmjs.org/
// 将 npm 源地址修改为淘宝源（用于安装 npm 速度慢的时候使用）
$ npm config set registry  https://registry.npm.taobao.org/

2)、通过执行 $ npm config ls 命令查看 metrics-registry = "https://registry.npmjs.org/" 是否为官方源，如果不是则使用上面命令设置为官方源。

3)、进行登录

// 登录命令
$ npm login
// 退出登录命令
$ npm logout

运行登录命令之后输入 NPM 账号、密码、邮件

dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm login
Username: dengzemiao
Password: 
Email: (this IS public) xxxxx@163.com
Logged in as dengzemiao on https://registry.npmjs.org/.

登录之后出现最下面这行 Logged in as dengzemiao on https://registry.npmjs.org/. 就说明登录成功了。

三、上传发包

1)、创建一个文件夹，例如：DZMTest

$ cd DZMTest

2)、在文件中创建 package.json，运行命令之后一路回车到底，没啥好改的，等下到文件里面也可以改。

$ npm init

• package.json 文件全部字段解释：

  一般创建出来的 package.json 文件只会包含下面其中一部分字段，其他都是隐藏可选字段，根据自己的情况使用，我这边列出来大部分常用的字段用于参考学习：

{
  // 发布的包名，默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线!
  "name": "#####",
  // 版本号，每次要更新
  "version": "1.0.0",
  // 包的描述
  "description": "仅供测试，别下载",
  // 文件入口，默认是 index.js，可修改
  "main": "index.js",
  "scripts": {
    // 测试命令，可以不填直接回车
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // 作者名称
  "author": "###",
  // 包遵循的开源协议，默认是ISC
  "license": "ISC",
  // 因为组件包是公用的，所以 private 为 false
  "private": false,
  // 当前包需要依赖的第三方组件，如何安装使用依赖包，可以看看文章顶部的NPM命令介绍文章
  "dependencies": {},
  // "devDependencies": {}
  // 指定代码所在的仓库地址
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dengzemiao/DZMFullPage.git"
  },
  // bug在哪里提
  "bugs": {
     "url": "https://github.com/dengzemiao/DZMFullPage/issues"
  },
  // 项目官网的地址
  "homepage": "https://github.com/dengzemiao/DZMFullPage",
  // 指定打包后,包中存在的文件夹
  "files": [
    "dist",
    "src"
  ],
  // 指定了项目的目标浏览器的范围
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  // 项目关键词，供搜索
  "keywords": [
    "测试"
  ]
}

3)、调整 package.json，文件中这两个是必须要填写的，第一个是包名，第二个是版本号，其他随意，更具自己需求调整，没什么特别需求就修改名字跟版本号直接上，其他默认是啥就是啥，看自己需求去改或者增删。

{
  "name": "dzmtest",
  "version": "1.0.0"
}

去 NPM 官网查询一下当前包名是否存在，存在的话就需要换一个：

4)、在 DZMTest 文件夹里面在创建一个 index.js 文件，这也是我们上面设置的入口文件

index.js:

// index.js 页面方法
function indexTest () {
  console.log('index.js 测试输出')
}
// 导出 （module.exports 如果使用不是很熟，百度一下就知道了，用法很简单）
module.exports = { indexTest }

5)、(如果不需要本地测试一下可以跳过) 创建好 index.js 之后可以本地测试一下，创建一个 test.js 在这个文件里面导入 index.js 进行本地使用一下

test.js:

// 导入 index.js 中的方法进行本地测试
var index = require('./index')
// 执行方法
index.indexTest()

我这边用的是 VSCode 装了运行 js 的插件可以直接右键运行代码，输出为

[Running] node "/Users/dengzemiao/Desktop/NPM/DZMTest/test.js"
index.js 测试输出

[Done] exited with code=0 in 0.054 seconds

这样，说明我们的代码是没有问题的，那么可以进行发布了！！

6)、(可选) 可以在根目录下新建 .npmignore 文件，设置忽略发布文件，文件不多可以不加，看自己心情。

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

7)、发布代码

$ npm publish

• 如果登录的 NPM 账号没有验证邮箱，运行命令之后会报错 you must verify your email before publishing a new package，所以注册之后记得去邮箱里面验证一下，验证之后可以再次运行发布命令，如果还报这个错误可以重新登录一下 NPM 账号:

dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish
npm notice 
npm notice 📦  dzmtest@1.0.0
......
npm ERR! code E403
// 主要是这行错误
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/dzmtest - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dengzemiao/.npm/_logs/2020-07-22T03_27_19_859Z-debug.log

• 如果出现这个错误，意思是需要修改 package.json 中的 version 版本号，一般是版本已经存在，新项目发布应该不会报这个错误。

dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish
npm notice 
npm notice 📦  dzmtest@1.0.0
......
npm ERR! code E403
// 主要是这行错误
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/dzmtest - You cannot publish over the previously published versions: 1.0.0.
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dengzemiao/.npm/_logs/2020-07-23T03_32_29_970Z-debug.log

• You cannot publish over the previously published versions: 1.0.0. 这个错误是版本已经存在，需要修改一个新版本号在上传，这种问题一般在后续版本迭代中出现，忘记修改版本号就直接提交。

• 下面是 version 字段版本格式（这里只是建议这么写，不在意可以随意）

1、版本格式：主版本号、次版本号、修订号

2、版本号递增规则如下：（例如：我原本的项目是 1.0.0 版本的话）
   主版本号：当你做了不兼容的 API 修改，此情况版本应该为 1.0.1
   次版本号：当你做了向下兼容的功能性新增，此情况版本应该为 1.1.0
   修订号：当你做了向下兼容的问题修正。此情况版本应该为 2.0.0

3、通过 npm version <update_type> 自动改变版本
   update_type 为 patch、minor,、major 其中之一，分别表示补丁，小改，大改。
   例如: $ npm version minor v2.0.0

如果有这个错误，可以修改一下 package.json 中的 version 为 1.0.1 版本，然后再次执行发布命令

{
  "name": "dzmtest",
  "version": "1.0.1",
}

再次执行发布命令

$ npm publish

dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish
npm notice 
npm notice 📦  dzmtest@1.0.0
npm notice === Tarball Contents === 
npm notice 130B index.js    
npm notice 114B test.js     
npm notice 202B package.json
npm notice === Tarball Details === 
npm notice name:          dzmtest                                 
npm notice version:       1.0.0                                   
npm notice package size:  471 B                                   
npm notice unpacked size: 446 B                                   
npm notice shasum:        fc4453748f8b0ca687a2ddea8f650ab75b4c5bec
npm notice integrity:     sha512-V+RHefgSXWB/Q[...]Qm/FP3BNcaL9g==
npm notice total files:   3                                       
npm notice 
+ dzmtest@1.0.0
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ 

这样就发布成功了！！！

四、使用刚发布的包

1)、创建一个vue项目，并运行起来。

$ vue create npm-test

2)、在新建的 npm-test 项目中导入我们自己的 dzmtest 包，npm 命令使用介绍以及区别。

$ npm i dzmtest

dengzemiaodeMacBook-Pro:npm-test dengzemiao$ npm i dzmtest
+ dzmtest@1.0.0
added 1 package and audited 1170 packages in 6.872s

41 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

这样就导入成功了！！

我们之前在编写 NPM 项目的时候内部文件是这样的：

导入到其他项目之后文件内部是这样的，在 node_modules 文件目录下：

这样就很清楚明白我们该怎么去编写 NPM 项目了，它是直接整个导入进来了之前的 NPM 项目。

3)、导入成功之后，支持使用

我们需要在新建的 npm-test 项目里面找到 main.js 全局导入一下 dzmtest

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 如果不是很明白这两种导入方式，可自己百度一下
// JS是这样导入
import DZMTest from 'dzmtest'
Vue.prototype.$dzmtest = DZMTest

// 如果是自定义UI组件，就需要这样使用，这样就可以直接支持全局使用
// import DZMTest from 'dzmtest'
// Vue.use(DZMTest)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

导入成功之后，我们可以在任何页面中去使用 $dzmtest 这个属性了，我这里是新建的项目，我就直接在 Home 页面测试一下就行了

<template>
  <div class="home"> </div>
</template>

<script>

export default {
  mounted () {
    this.$dzmtest.indexTest()
  }
}
</script>

然后运行项目就会输出成功了

$ npm run serve

本章到这里就结束了！！！！！！现在可以愉快的去上传自己写的插件到 NPM 了！！！

---

---

• Vue 扩展内容

---

---

五、Vue 如何自定义UI组件上传并使用

1)、先看看 Vue 自定义全局UI组件 怎么编写

2)、根据上面文章写好插件之后，我们还是通过新建一个 npm 项目，将自定义组件 custom 文件里面的放到新建的 npm 项目中：

自定义的组件文件 导入到NPM项目之后是这样的

3)、index.js 导入方式介绍 (选其一即可，看自己需求调整)

• 方式一：

// 导入单个组件
import CustomView from './custom.vue'

// Vue 直接导入
const Custom = {
  install: function (Vue) {
    Vue.component('Custom', CustomView)
  }
}

// 导出
export default Custom

• 方式二：

// 导入单个组件
import Test from './test/index.js'

// 以数组的结构保存组件，便于遍历
const components = [
  Test
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  install.installed = true
  // 遍历并注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 对于那些没有在应用中使用模块化系统的用户，他们往往将通过 <script> 标签引用你的插件，并期待插件无需调用 Vue.use() 便会自动安装 。
// 你可以在插件最后添加如下几行代码来实现自动安装：
// 判断是否是直接引入文件，如果Vue是全局对象自动安装插件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 组件列表
  ...components
}

4)、然后发布即可，使用也是跟 Vue 自定义全局UI组件 文件一样的使用 Vue.use() 进行使用，唯一区别就是可以删除原文件 custom 文件，并且通过 npm i <包名> 导入即可。

5)、Vue 自定义插件上传 NPM 到这也结束了！！！！