第一次发布vue组件到npm

开发vue组件

环境

vue-cli 4.x

建项

vue create et-verify-code

建项过程中需要你选择要安装的依赖。
我这里只打算写一个比较简单的组件，所以只需要 stylus、babel、eslint 就可以了。
my 和 et-component 都是我之前做项目所保存下来的组合配置。你可以选择default（默认）或者 manually （手动）。

接下来可以删掉一些不需要的目录和文件，在 src 目录下，创建 main.js和et-verify-code.vue文件，如果要对webpack打包做一些配置，则需要在项目根目录下创建一个vue.config.js文件。于是，目录结构如下：

E:\ET-VERIFY-CODE
│  .browserslistrc
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│  
├─node_modules
└─src
	│  et-verify-code.vue
	│  main.js

配置

• 1）package.json

{
  "name": "et-verify-code", // 项目名称，也是安装 npm 包的名称 npm install <name>
  "version": "0.1.0", // 项目版本
  "main": "lib/et-verify-code.umd.min.js", // 包的入口文件，语句 import [pkg] from '[package]' 时，其实导入的就是 main 定义的文件
  "author": "邮箱|作者",
  "description": "描述",
  "keywords": [ // 项目关键字
    "vue",
    "verify-code",
    "et-verify-code"
  ],
  "private": false,
  "scripts": { // 增加了 lib 命令
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name et-verify-code --dest lib ./src/main.js",  // 指定src目录下的main.js文件为组件入口
    "lint": "vue-cli-service lint"
  },
  ...
  "repository": {
    "type": "git",
    "url": "项目的git地址"
  },
  "license": "MIT"
}

• 2）webpack 配置
  项目根目录下的vue.config.js文件

module.exports = {
  css: {
    extract: false // 组件的样式是否另外打包成单独的css文件。默认为true
    // 因为我这个组件并不复杂，css代码又不多，不想使用组件的时候还要显式的去import css，所以就不另外打包成单独的css文件了
  }
  // productionSourceMap: false // 是否生成sourcemap，默认是true
}

这里展开一下，如果你在package.json中main属性设置为 dist 目录下的文件（比如 dist/et-verify-code.umd.min.js）,那么你需要一些不同的配置。
因为默认的 npm run build 命令后生成在dist目录下的文件名默认是长这样的：app.[hash:8].js，中间有8位的随机生成的哈希值。

因此，如果你在package.json中main属性设置为dist目录下的文件，则需要对 build 命令做相应的配置（package.json文件中）：

{
  ...
  "scripts": {
    "build": "vue-cli-service build --target lib --name et-verify-code --dest dist ./src/main.js" // 默认是"vue-cli-service build"
  }
  ...
}

该命令的参数解释如下（摘自官方文档）

用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

--target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

• 3）最后你可以修改 README.md 文件，加上项目和包的说明，这个尽可自由发挥了。

组件开发

et-verify-code.vue

<template>
  <div class="vcWrap">
    <input v-for="n in len" :key="'codeInput' + n" :ref="'codeInput' + n" v-model.trim.number="code[n-1]" @keydown="onkeydown(n)" @keyup="onkeyup(n)" />
  </div>
</template>

<script>
export default {
  name: 'EtVerifyCode',
  props: ["length"],
  data () {
    return {
      len: this.length || 4, // 验证码长度
      code: new Array(this.len),
      keyCodes: [
        48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, // 数字
        8, // backspace
        // 37, 39, // arrowLeft, arrowRight
        13 // enter
      ]
    }
  },
  methods: {
    onkeydown (n) {
      // eslint-disable-next-line
      // console.log(event)
      if (!this.keyCodes.includes(event.keyCode)) { // 拦截keyCodes数组外的键盘输入
        event.returnValue = false
      } else if (event.keyCode === 8 && n > 1 && this.code[n - 1] === '') { // 删除键且this.code[n-1]为空
        this.$refs['codeInput' + (n - 1)][0].focus()
        event.returnValue = false
      }
    },
    onkeyup (n) {
      if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) { // 数字键
        this.$set(this.code, n - 1, event.key)
        if (n < this.len) this.$refs['codeInput' + (n + 1)][0].focus()

        this.$emit('sendCodeInput', this.code.join(''))
      } else if (event.keyCode === 8) { // 删除键
        this.$emit('sendCodeInput', this.code.join(''))
      } else if (event.keyCode === 13) { // enter键
        if (this.code.join('').length === this.len) this.$emit('goNext')
      }
    }
  }
}
</script>

<style lang="stylus">
.vcWrap
  input
    width 40px
    height 40px
    line-height: 40px

    -webkit-appearance: none;
    // background-color: #fff;
    // background-image: none;
    // border: 1px solid #dcdfe6;
    background-color: #f7f9fa;
    border: 1px solid #f7f9fa;

    box-sizing: border-box;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 14px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    border-radius: 4px;

    margin-right 1em
    &:last-child
      margin-right 0
</style>

main.js

import EtVerifyCode from './et-verify-code.vue'
EtVerifyCode.install = Vue => Vue.component(EtVerifyCode.name, EtVerifyCode)
export default EtVerifyCode

本地测试组件是否可用

• Step 1：在项目中执行如下命令

npm run lib // 生成可供import的文件
npm pack // 本地生成一个 et-verify-code-0.1.0.tgz 的包

这里需要注意一下你在 package.json 中 main 属性设置的值。该字段指定了包的主入口文件。
main 定义了包的入口文件，在 NodeJS 环境中，语句 import [pkg] from '[package]' 时，其实导入的就是 main 定义的文件。
所以，如果你在 main 这里写的是lib/et-verify-code.umd.min.js，那么执行上述命令没问题。但如果你写的是dist/et-verify-code.umd.min.js，那么在执行npm pack命令之前，就需要先执行npm run build（而不是npm run lib）生成 dist 目录下可供 import 的文件了。

• Step 2：把生成的et-vcode-0.1.0.tgz包拷贝到用来测试组件的项目（这里你或许需要另外建一个新的项目）的根目录下，然后

npm install et-verify-code-0.1.0.tgz
npm run serve // 启动项目

• Step 3：在项目的入口文件main.js引入包

// src/main.js
import EtVerifyCode from 'et-verify-code'
Vue.use(EtVerifyCode)

• Step 4：在 demo 页面中引用这个组件

// demo.vue
<template>
	<et-verify-code />
</template>

若测试可用，在测试项目中运行npm uninstall et-verify-code卸载组件，然后就可以发布到npm上了。

发布到npm

1）注册npm账号

发布之前，得先有一个npm账号，如果没有的话上 官网 注册一个，注册完账号之后，我们就要在本地登录并发布我们的组件了。

注意：因为有点童鞋会经常用cnpm源，所以，一定要切换到 npm 源上才可以，不然就会报错（error: no_perms Private mode enable, only admin can publish this module）。
因此你要通过执行 npm config set registry http://registry.npmjs.org 命令切换到 npm 源。

2）开始发布

在发包之前，先去 npm 官网搜索一下有没有和你的包名相同的，如果有就改一个其他的名字吧。

npm login // 登陆npm
// 然后输入你的账号、密码、邮箱
// 当你在控制台看到 Logged in as <Username> on https://registry.npmjs.org 说明登陆成功

// 如果你保证是最新版本且已经打包过，则跳过npm run build这一步
// 这一步是执行npm run build 还是 npm run lib，要看你在 package.json 中 main 属性设置的值，详见“本地测试”中 step 1 中的说明
npm run build // 或者 npm run lib, 根据你的配置决定跑哪个命令
npm publish // 发布你的包

注意：一个版本只能发布一次，也就是你不能发了1.0.0，下次还继续1.0.0，理论上可以覆盖，但是npm不允许这样，因为你这样覆盖，就无法知道你的版本信息了啊，插件和项目都是迭代的，like git，是有版本信息的。

• 方法一：每一次 npm publish 前，自行手动更改 package.json的version
• 方法二：通过npm version命令来发布

我们来学习一下 npm version 命令
在命令行敲入npm version --help就可以看到可以使用的命令：

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

major：主版本号
minor：次版本号
patch：补丁号
premajor：预备主版本
preminor：预备次版本
prepatch：预备补丁号
prerelease：预发布版本

举例说明一下，假设当前版本为0.1.0
➜ npm version preminor
v0.2.0-0
➜ npm version minor
v0.2.0
➜ npm version prepatch
v0.2.1-0
➜ npm version patch
v0.2.1
➜ npm version prerelease
v0.2.2-0
➜ npm version prerelease
v0.2.2-1
➜ npm version premajor
v1.0.0-0
➜ npm version major
v1.0.0

对了，项目的 git status 必须是 clear，才能使用 npm version 命令。
如果你的项目中包含 git，命令还会自动给你提交更新到 git（git commit -m “X.Y.Z”），所以还可以在 npm version NEWVERSION 后面加上 -m 参数来指定自定义的 commit message。比如：

npm version patch -m "Upgrade to %s for reasons"

message中的 %s 将会被替换为版本号。

这里我们再展开一下

《版本号策略》
版本号格式：主版本号.次版本号.修订号；
主版本号：当你做了不兼容的 API 修改；
次版本号：当你做了向后兼容的功能性新增；
修订号：当你做了向后兼容的问题修正；

处于开发阶段的项目版本号以0.Y.Z形式表示，此阶段正在开发基础功能、公众API；
版本号只能增加，禁止下降，代码的修改必须以新版本形式更新。

查看npm && 使用我们的包

这个时候，你稍微等几分钟去npm官网搜索一下你的包名，就可以找到啦。如果搜不到，那就再等等，或许更新慢，没有完全更新，但是你在自己 npm 账号可以查看到自己发布的包。
具体使用包的方法就是，在项目目录下执行命令

npm install et-verify-code // 安装我们的包