写于 2017.05.04
相信不少使用 vue 的开发者和公司都有定制一套属于自己的 UI 组件库的需求. 但是要开发, 测试, 打包, 发布这个组件库, 却需要耗费较大的劳动力去搭建一整套的环境. 针对这个问题, 我搭建了一个专门用来构建 Vue 的 UI 组件库的开发框架, 以节省搭建环境的劳动力, 专心于组件库的开发.
一, 介绍
项目地址: https://github.com/jrainlau/vue-donut
Vue-Donut 是一个开发框架, 配合 vue-cli 使用. 所以首先保证全局安装有 vue-cli. 接下来就可以初始化我们的项目了:
vue init jrainlau/vue-donut < 项目名 >
类似官方的 https://github.com/vuejs-templates/webpack 模板, Vue-Donut 也允许用户进行一些配置. 在配置完成后则会生成你的组件库目录. 值得注意的是, 这个组件库最终发布的名字也是你所自定义的项目名 (当然这些都是可以修改的).
接下来按照提示, 进入项目目录后, 通过 yarn 命令下载所需依赖包即可开始使用.
目录结构如下:
.
├── index.html
├── package.JSON
├── src
│ ├── App.vue
│ ├── assets
│ │ └── donut.jpg
│ ├── components
│ │ ├── content.vue
│ │ ├── header.vue
│ │ ├── index.JS
│ │ ├── link.vue
│ │ └── title.vue
│ └── main.JS
└── webapck
├── build.JS
├── dev.JS
├── doc.JS
├── webpack.base.config.JS
├── webpack.build.config.JS
├── webpack.dev.config.JS
└── webpack.doc.config.JS
二, 命令
yarn run dev: 开发模式
通过 webpack-dev-server 开启一个测试服务器, 就和官方的 https://github.com/vuejs-templates/webpack 模板里面的一样.
yarn run build: 打包及发布模式
这个命令会以
src/components/index.JS
为入口文件, 通过 webpack 构建后产出到 dist 目录.
dist/index.JS 就是你接下来将会发布到 NPM 上面的包.
你应该熟练掌握如何编写 vue 的插件
src/components/index.JS
入口文件应该长成下面这个样子:
- import myComponent from './my-component.vue'
- const install = (Vue) => {
- Vue.component('my-componen', myComponent)
- }
- export default install
yarn run build: 文档模式
通过运行 yarn run dev, 你所开发的就像是一个普通的单页应用, 这也类似于组件库的官方文档页面. 当开发完成后, 你可以通过这条命令打包你的应用. App.[hash].JS, vendor.[hash].JS 和 manifest.[hash].JS, 以及独立的 CSS 文件都会被打包到 docs 文件夹.
source map *.[hash].map 会被自动生成.
可以方便地直接使用 docs 目录作为 GitHub pages 的资源目录.
三, 注意事项
Vue-Donut 默认使用 Less 作为预处理器, 如果需要用其他预处理器, 可以自定义配置.
测试同理.
四, 证书
MIT
一些碎碎念
在工作的过程中, 遇到了搭建 UI 组件库的需求. 开发不难, 麻烦的是如何在项目中引入使用. 首先我们尝试了使用 Git 的 submodule 方案, 就是把 UI 组件库直接作为项目的子模块使用. 另外一种方式, 是把整个组件库发布到 NPM, 然后在 webpack.module.rules 的 exclude 里面通过正则或者函数的方式, 使用项目的 webpack 配置去跑组件库的代码. 这两种方式都不那么优雅, 思考再三, 最后决定搭个更加方便优雅的开发框架来.
在此之前, 对于 webpack 的使用及配置仅处于 "看得懂" 的程度, 但从未真正从头开始搭过. 在搭建的过程中也遇到了不少坑, 但通过查阅官方文档大都能获得解决办法, 实在不行还有万能的 google 和 Stack Overflow. 搭的过程中也参考了很多优秀的实践, 比如公司前辈的搭建方式, 以及 vue-cli 官方出品的搭建方式等, 搭完后对 webpack 的掌握也得到了极大的提升.
希望这个作品能够发挥能效, 也欢迎提出问题和建议和我交流~
来源: https://juejin.im/post/5c3dd26be51d456775675eba