vue组件打包及发布npm的整个流程

时间 2019-11-07

标签 vue 组件打包发布 npm 整个流程繁體版

原文原文链接

vue组件发布npm整个流程

记录一下组件发布流程，参考Vue cli3 库模式搭建组件库并发布到 npmcss

起步

首先，咱们从零开始搭建一个vue项目，以vue-cli3 来搭建。html

vue create my-project
复制代码

长这样子的：vue

调整目录

安装项目以后咱们来修改一下目录结构webpack

.
...
|-- examples      // 原 src 目录，改为 examples 用做示例展现
|-- packages      // 新增 packages 用于编写存放组件
...
. 
复制代码

修改以后，运行项目咱们会发现报错了，那是由于目录结构改了，还有就是packges这个文件夹是咱们新增的，webpack没法获取编译，咱们须要在webpack里加上。git

咱们会新建一个vue.config.js的配置文件，这个vue-cli3提供的一个可选配置文件，咱们能够在里面配置整个项目全部的webpack配置。咱们能够直接去 vue-cli3的配置复制过来,而 chainWebpack 会给咱们提供链式操做web

// vue-config.js
module.exports = {
  // 修改 src 目录 为 examples 目录
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',   // 把src 修改成examples
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  /* chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。容许对内部的 webpack 配置进行更细粒度的修改。 */
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(__dirname + 'packages')  // 注意这里须要绝对路径，全部要拼接__dirname
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}
复制代码

以上就是基本的配置，接下来咱们就开始建立一个组件vue-cli

编写组件

这里我就以一个按钮组件来作尝试。在以前咱们新建的 packages 目录中新建 comColorButton 文件夹和index.js文件，而后再在comColorButton文件夹里，建立src文件夹和index.js文件，目录结构以下：npm

|——
|——packages
|   |——index.js
|   |——comColorButton
|      |——index.js
|      |——src
|         |——color-button.vue
|——
复制代码

这是color-button.vue的内容json

<!-- color-button.vue -->
<template>
  <span class="color-button">
    <button :class="[type, disabled?'disabled':'']" :disabled="disabled">
      <slot></slot>
    </button>
  </span>
</template>

<script>
export default {
  name:'ComColorButton',
  props:{
      type:{
      type:String,
      default:'primary'
    },
      disabled:{
      type:Boolean,
      default:false
    },
  }, 
  data () {
    return {

    }
  }
}
</script>

<style lang='scss'>
$pColor:#333;
$sColor:#0db677;
$wColor:orange;
$dColor:red;
$disabledColor:gray;
.color-button{
  display: inline-block;
  margin-right:10px;
  button{
    display: inline-block;
    padding:10px 20px;
    border:2px solid $pColor;
    background:#fff;
    font-size: 16px;
    width:auto;
    cursor: pointer;
    transition:all 0.5s;
    &:hover{
      box-shadow: 100px 0px 0px 0px $pColor inset;
      color:#fff;
    }
    &.success{
      border:2px solid $sColor;
      color: $sColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $sColor inset;
        color:#fff;
      }
    }
    &.warning{
      border:2px solid $wColor;
      color: $wColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $wColor inset;
        color:#fff;
      }
    }
    &.danger{
      border:2px solid $dColor;
      color: $dColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $dColor inset;
        color:#fff;
      }
    }
    &.disabled{
      border:2px solid $disabledColor;
      color: $disabledColor;
      cursor:not-allowed ;
      &:hover{
        box-shadow:none;
        color: $disabledColor;
      }
    }
  }
}
</style>

复制代码

这是comColorButton文件夹内的index.jsbash

// 导入组件，组件必须声明 name
import ComColorButton from './src/color-button.vue'

// 为组件提供 install 安装方法，供按需引入
ComColorButton.install = function (Vue) {
  Vue.component(ComColorButton.name, ComColorButton)
}

// 默认导出组件
export default ComColorButton
复制代码

这是 packages 文件夹内的index.js

import ComColorButton from './comColorButton'
// 存储组件列表
const components = [
  ComColorButton
] 
/* 定义install 方法，接收Vue做为参数，若是使用use注册插件，则全部的组件都将被注册 */
const install = function (Vue) {
  // 判断是否安装
  if(install.installed){return}
  // 遍历全部组件
  components.map(item => {
    Vue.component(item.name,item)
  })
}
// 判断是否引入文件
if(typeof window !== 'undefined' && window.Vue){
  install(window.Vue)
}
export default{
  install,
  ComColorButton
}
复制代码

以上以后，组件就写完了，接下来就是引入组件了

/* main.js */
// 导入组件库
import ComColorButton from './../packages/index'
// 注册组件库
Vue.use(ComColorButton)
复制代码

使用组件库

<template>
  <div class="hello">
    <com-color-button type="success" :disabled="false">按钮</com-color-button> 
    <com-color-button :disabled="true">按钮</com-color-button>
  </div>
</template>
复制代码

咱们能够看到效果：

发布npm 方便直接在项目中引用

到此为止咱们一个完整的组件库已经开发完成了，接下来就是发布到 npm 以供后期使用

一、package.json 中新增一条编译为库的命令

在库模式中，Vue是外置的，这意味着即便在代码中引入了 Vue，打包后的文件也是不包含Vue的。

如下咱们在 scripts 中新增一条命令 npm run lib

--target: 构建目标，默认为应用模式。这里修改成 lib 启用库模式。
--dest : 输出目录，默认 dist。这里咱们改为 lib
[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里咱们指定编译 packages/ 组件库目录。

"scripts": {
    // ...
    "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}
复制代码

执行编译库命令

npm run lib
复制代码

以后咱们就能够看到会生成一个文件夹lib包含不少文件，长这样子的：

二、配置 package.json 文件中发布到 npm 的字段

name: 包名，该名字是惟一的。可在 npm 官网搜索名字，若是存在则需换个名字。
version: 版本号，每次发布至 npm 须要修改版本号，不能和历史版本号相同。
description: 描述。
main: 入口文件，该字段需指向咱们最终编译后的包文件。
keyword：关键字，以空格分离但愿用户最终搜索的词。
author：做者
private：是否私有，须要修改成 false 才能发布到 npm
license：开源协议如下为参考设置

"name": "com-color-button",
  "version": "0.1.3",
  "description": "基于 Vue 的按钮",
  "main": "lib/comColorButton.umd.min.js",
  "keyword": "colorButton button color",
  "private": false,

复制代码

三、添加 .npmignore 文件，设置忽略发布文件

咱们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是须要被发布的。因此咱们须要设置忽略目录和文件。和 .gitignore 的语法同样，具体须要提交什么文件，看各自的实际状况。

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

复制代码

四、登陆到 npm

首先须要到 npm 上注册一个帐号,注意验证邮箱，否则以后会发布不了。若是配置了淘宝镜像，先设置回npm镜像

npm config set registry http://registry.npmjs.org 
复制代码

而后在终端执行登陆命令，输入用户名、密码、邮箱便可登陆。

npm login
复制代码

五、发布到 npm

执行发布命令，发布组件到 npm

npm publish
复制代码

这里若是尚未验证邮箱的话话报个，须要验证邮箱的错误。去npm上验证邮箱便可，它会在页面顶部弹出个须要验证邮箱的提示。

六、发布成功

发布成功后稍等几分钟，可查看本身npm帐号的packages，也可在 npm 官网搜索。

去npm查看，咱们能够packages下看到发布成功了，以下图：

七、使用新发布的组件库

安装

cnpm install com-color-button -S
复制代码

引入

<!--main.js-->
import ComColorButton from 'com-color-button'
import 'com-color-button/lib/comColorButton.css'
Vue.use(ComColorButton)
复制代码

组件中使用

...
<com-color-button type="success">按钮</com-color-button>
...
复制代码

到此就所有结束了，这都是亲自实践过的，可用。