npm发布组件库流程

1、创建项目

在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。
vue create

2、调整目录

我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造

3、配置项目以支持新的目录结构

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 强制内联CSS
  css: {
    extract: false
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(resolve('packages'))
        .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

4、创建一个新组件

在 packages 目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录 color-picker/
在 color-picker/ 目录下创建 src/ 目录存储组件源码
在 /color-picker 目录下创建 index.js 文件对外提供对组件的引用。

修改 /packages/color-picker/index.js 文件，对外提供引用。

# /packages/color-picker/index.js
// 导入组件，组件必须声明 name
import colorPicker from './src/color-picker.vue'
// 为组件提供 install 安装方法，供按需引入
colorPicker = function (Vue) {
 Vue.component(colorPicker.name, colorPicker)
}
// 默认导出组件
export default colorPicker

5、 整合所有的组件，对外导出，即一个完整的组件库（修改 /packages/index.js 文件，对整个组件库进行导出。）

// 导入颜色选择器组件
import colorPicker from './color-picker'
// 存储组件列表
const components = [
 colorPicker
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
 // 判断是否安装
 if (install.installed) return
 // 遍历注册全局组件
 components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}
export default {
 // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
 install,
 // 以下是具体的组件列表
 colorPicker
}

6、编写示例

在示例中导入组件库

import Vue from 'vue'
import App from './App.vue'
// 导入组件库
import ColorPicker from './../packages/index'
// 注册组件库
Vue.use(ColorPicker)
Vue.config.productionTip = false
new Vue({
 render: h => h(App)
}).$mount('#app')

在示例中使用组件库中的组件

<template>
 <colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>
</template>
 
<script>
export default {
 data () {
 return {
 color: '#ff0000'
 }
 },
 methods: {
 headleChangeColor () {
 console.log('颜色改变')
 }
 }
}
</script>

7、修改配置，准备发布到 npm

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

以下我们在 scripts 中新增一条命令 npm run lib
–target : 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
–dest : 输出目录，默认 dist 。这里我们改成 lib
[entry] : 最后一个参数为入口文件，默认为 src/App.vue 。这里我们指定编译 packages/ 组件库目录。

"script": {
 // ...
 "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}

执行编译库命令
npm run lib

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

{
 "name": "vcolorpicker",
 "version": "0.1.5",
 "description": "基于 Vue 的颜色选择器",
 "main": "lib/vcolorpicker.umd.min.js",
 "keyword": "vcolorpicker colorpicker color-picker",
 "private": false
 }

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

# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

8、登录到 npm

npm login

9、发布到 npm

npm publish