Vuecli3库模式搭建组件库并发布到npm的流程
市⾯上⽬前已有各种各样的UI组件库，⽐如 Element 和 iView ，他们的强⼤⽏庸置疑。但是我们⾯临的情况是需求越来越复杂，当它们不能再满⾜我们需求的时候，这个时候就有必要开发⼀套属于⾃⼰团队的组件库了。
所以本⽂的⽬的就是让读者能通过此⽂，⼩能做⼀个简单的插件供⼈使⽤，⼤能架构和维护⼀个组件库不在话下。
以下⼀个简单的颜⾊选择器插件 vColorPicker 讲述从开发到上线到npm的流程。
webpack打包流程 面试
⼀、技术栈
如何通过新版脚⼿架创建项⽬，这⾥就不提了，⾃⾏看官⽅⽂档。
Vue-cli3: 新版脚⼿架的库模式，可以让我们很轻松的创建打包⼀个库
npm：组件库将存放在npm
webpack：修改配置需要⼀点 webapck 的知识。
⼆、⼤纲
想要搭建⼀个组件库，我们必须先要有⼀个⼤概的思路。
1. 规划⽬录结构
2. 配置项⽬以⽀持⽬录结构
3. 编写组件
4. 编写⽰例
5. 配置使⽤库模式打包编译
6. 发布到npm
三、规划⽬录结构
1、创建项⽬
在指定⽬录中使⽤命令创建⼀个默认的项⽬，或者根据⾃⼰需要⾃⼰选择。
$ vue create .
2、调整⽬录
我们需要⼀个⽬录存放组件，⼀个⽬录存放⽰例，按照以下⽅式对⽬录进⾏改造。
.
...
|-- examples // 原 src ⽬录，改成 examples ⽤作⽰例展⽰
|-- packages // 新增 packages ⽤于编写存放组件
...
.
四、配置项⽬以⽀持新的⽬录结构
我们通过上⼀步的⽬录改造后，会遇到两个问题。
1. src ⽬录更名为 examples ，导致项⽬⽆法运⾏
2. 新增 packages ⽬录，该⽬录未加⼊ webpack 编译
注：cli3 提供⼀个可选的 fig.js 配置⽂件。如果这个⽂件存在则他会被⾃动加载，所有的对项⽬和webpack的配置，都在这个⽂件中。
1、重新配置⼊⼝，修改配置中的 pages 选项
新版 Vue CLI ⽀持使⽤ fig.js 中的 pages 选项构建⼀个多页⾯的应⽤。
这⾥使⽤ pages 修改⼊⼝到 examples
// 修改 src ⽬录为 examples ⽬录
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
}
}
2、⽀持对 packages ⽬录的处理，修改配置中的 chainWebpack 选项
packages 是我们新增的⼀个⽬录，默认是不被 webpack 处理的，所以需要添加配置对该⽬录的⽀持。
chainWebpack 是⼀个函数，会接收⼀个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进⾏更细粒度的修改。
// 修改 src 为 examples
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 扩展 webpack 配置，使 packages 加⼊编译
chainWebpack: config => {
.rule('js')
.include
.
add('packages')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}
五、编写组件
以上我们已配置好对新⽬录架构的⽀持，接下来我们尝试编写组件。以下我们以⼀个已发布到 npm 的⼩插件作为⽰例。GitHub -
1. 创建⼀个新组件
1. 在 packages ⽬录下，所有的单个组件都以⽂件夹的形式存储，所有这⾥创建⼀个⽬录 color-picker/
2. 在 color-picker/ ⽬录下创建 src/ ⽬录存储组件源码
3. 在 /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) {
Vueponent(colorPicker.name, colorPicker)
}
// 默认导出组件
export default colorPicker
2. 整合所有的组件，对外导出，即⼀个完整的组件库
修改 /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 => Vueponent(component.name, component))
}
// 判断是否是直接引⼊⽂件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() ⽅法安装
install,
// 以下是具体的组件列表
colorPicker
}
六、编写⽰例
1、在⽰例中导⼊组件库
import Vue from 'vue'
import App from './App.vue'
// 导⼊组件库
import ColorPicker from './../packages/index'
// 注册组件库
Vue.use(ColorPicker)
new Vue({
render: h => h(App)
}).$mount('#app')
2、在⽰例中使⽤组件库中的组件
在上⼀步⽤使⽤ Vue.use() 全局注册后，即可在任意页⾯直接使⽤了，⽽不需另外引⼊。当然也可以按需引⼊。<template>
<colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>
</template>
<script>
export default {
data () {
return {
color: '#ff0000'
}
},
methods: {
headleChangeColor () {
console.log('颜⾊改变')
}
}
}
</script>
七、发布到 npm，⽅便直接在项⽬中引⽤
到此为⽌我们⼀个完整的组件库已经开发完成了，接下来就是发布到 npm 以供后期使⽤。
1、 package.js 中新增⼀条编译为库的命令
在库模式中，Vue是外置的，这意味着即使在代码中引⼊了 Vue，打包后的⽂件也是不包含Vue的。
以下我们在 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
2、配置 package.json ⽂件中发布到 npm 的字段
name
version
description
main
keyword
author
private
license
以下为参考设置
{
"name": "vcolorpicker",
"version": "0.1.5",
"description": "基于 Vue 的颜⾊选择器",
"main": "lib/vcolorpicker.umd.min.js",
"keyword": "vcolorpicker colorpicker color-picker",
"private": false
}
3、添加 .npmignore ⽂件，设置忽略发布⽂件
我们发布到 npm 中，只有编译后的 lib ⽬录、package.json、README.md才是需要被发布的。所以我们需要设置忽略⽬录和⽂件。
和 .gitignore 的语法⼀样，具体需要提交什么⽂件，看各⾃的实际情况。
# 忽略⽬录
examples/
packages/
public/
# 忽略指定⽂件
*.map
4、登录到 npm
⾸先需要到 npm 上注册⼀个账号，注册过程略。
如果配置了淘宝镜像，先设置回npm镜像：
$ npm config set registry
然后在终端执⾏登录命令，输⼊⽤户名、密码、邮箱即可登录。
$ npm login
5、发布到 npm
执⾏发布命令，发布组件到 npm
$ npm publish

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。