使用vue-cli封装
本文使用vue-cli版本为3.0以上，如果您使用的2.0版本，建议直接学习webpack，加载vue相关的loader和plugin来打包。
通过vue-cli脚手架创建一个新的vue项目:
npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create my-vue-library
进入项目根目录，跑起来看看：
npm run serve
-
写个小组件
让我们先从一个简单的组件开始，下面是一个Banner组件，用来显示在页面顶部。
src/components/Banner.vue
<template>
<div class="banner" :style="bannerStyles" :class="`banner__${position}`" @click="touched">
<slot></slot>
</div>
</template>
<script>
const defaultStyles = {
left: 0,
right: 0
};
export default {
name: "FlockBanner",
props: {
position: {
type: String,
default: "top",
validator(position) {
return ["top", "bottom"].indexOf(position) > -1;
}
},
styles: {
type: Object,
default: () => ({})
}
},
created() {
console.log('Banner: created()')
},
data() {
return {
bannerStyles: {
...defaultStyles,
...this.styles
}
};
},
methods: {
touched() {
console.log('Hey!');
}
}
};
</script>
<style lang="scss" scoped>
.banner {
padding: 12px;
background-color: #fcf6cd;
color: #f6a623;
text-align: left;
position: fixed;
z-index: 2;
}
.banner__top {
top: 0;
}
.banner__bottom {
bottom: 0;
}
</style>
可以在页面中注册并使用这个Banner组件：
<banner>This is a banner!</banner>
可以在CodeSandbox上查看示例代码。原文作者正在开发一套叫做Flock的vue库。
-
打包
首先，你需要利用vue-cli将你的组件打包成库。在你的package.json文件里的script添加vue-cli-service build --target lib --name myLib [entry]命令。
入口[entry]默认为你的App.vue但是你可以使用相对路径或者项目里的任何用来import组件的入口文件，你可能会想全局注册这些组件，但我更喜欢在类库名称前加个前缀。提供给开发者用户的代码越少越好。
给这个脚本明明为build-bundle，然后就可以运行npm run build-bundle来构建组件库了。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build-bundle": "export APP=bundle && vue-cli-service build --target lib --name flock ./src/components/index.js"
},
运行命令后打出来的包大概是这样的：
Screen Shot 2019-12-12 at 2.47.45 PM.png
在CodeSandbox里，入口文件
src/components/index.js应该类似下面这样：
import Vue from "vue";
import FlockButton from "./Button.vue";
import FlockBanner from "./Banner.vue";
const Components = {
FlockButton,
FlockBanner
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
-
在package.json中指定你的输出文件
在根对象中添加main属性：
"main": "./dist/myLib.common.js",
-
package.json中添加
file属性，加入所有你想导出的文件或路径
这步还挺重要，无论何时我们publish包到npm，我们可以指定上传哪些文件。我们将上传所有相关的文件，提供给想用我们src里的单文件组件的开发者。
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
],
- 好像样式没进来？—— vue.config.js
默认情况下，vue里的样式是与js文件分开出包的，在引用的时候， >还需要单独的import ''...css/scss"。为了省电事，我们可以使用vue- cli提供的配置方式来将css以js的方式写入到组件库里，也就是说，
打出的包里不会有css文件。在根目录下新建vue.config.js文件，添加下面代码module.exports = { css: { extract: false }, }
题外话，我自己基于element-ui封了个类库。
参考了一下element-ui的打包脚本，在package.json中的"dist"脚本。
"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
它进行了三次webpack打包，分别是
- webpack.conf.js 用于打umd的包
- webpack.common.js 用于打commonjs2的包
- webpack.component.js 用于为组件分别打包
也就是说，它至少提供了3种方式提供不同用途的包，UMD和CommonJS就不说了，JS常用的模块化方式。在webpack.component.js中，它为每个elementUI组件分别独立地打包，可以上每个组件被独自引用。也就是说，在使用下面代码引入Button组件的时候，实际上，你的应用是把整个elementUI里所有组件都加载进来的。
import {Button} from 'element-ui' //解构也只是赋值方便而已，实际上整个element-ui都被加载了。
如果你想在你的应用里只用到一两个组件，你需要像如下方式引入：
import Button from 'element-ui/lib/button'
这样才能达到减小项目体积的目的（只引用Button部分的代码)。
当然，为了方便我们开发，element-ui官方也告诉我们一个按需引入的插件babel-plugin-component，在你的应用项目里安装这个插件，就可以实现上述两个形式的自动转换。例如：
import { Button } from 'element-ui'
会被babel-plugin-component自动解析为
import Button from 'element-ui/lib/button'
