MI-vant组件库
打造一个内部的组件库,在我们进行代码的重构,以及开发新的功能的时候,抽离公共的组件,减少代码的复用,注重业务与组件的分离,简化耦合度,便于开发与维护。
特性
- 支持按需引入
- 预览模式
- storybook预览模式
- 纯markdown预览模式
- rem适配
- 支持主题定制
- 较为完善的使用文档和示例
技术选型
最初的时候 考虑过使用vue-cli3.0 vue-loader15+webpack4的配置 后来考虑到稳定性 暂时放弃
- 使用babel7的插件和配置
- 使用less作为项目中css的预处理语言
- 增加rollup的打包方式
- 引入storybook 来支持项目的预览功能
- 引入vue-loader15
- 引入vue-markdown-loader等相关插件 支持文档功能
babel7
为什么要升级到babel7
全局配置 babel.config.js 里的配置默认对整个项目生效,包括node_modules。除非通过 exclude 配置进行剔除。换句话来说babel7拥有全局配置能力。是前端走向未来语法的一大步,改造为babel7 的时候,遇到了很多难以解决的问题。但是最终还是坚持下来了。
升级注意事项
- 从 babel7 开始,所有的官方插件和主要模块,都放在了 @babel 的命名空间下,从而可以避免在 npm 仓库中 babel 相关名称被抢注的问题
- Babel7 是对整个项目都生效的配置。
- 移除了之前的stage-x插件,废弃babel-preset-es201x插件,
- 官方升级工具:babel-upgrade
之前配置的时候,不知道有这个工具,导致走了很多弯路。大家以后在做某个东西的时候,一定要先查查有没有工具。避免重复造轮子的同时,也可以避免很多不必要的错误)。
- 优化代码与使用jsV8补丁做效能调校,编译速度更快。
- webpack中babel-loader的版本不低于@babel/core的版本,否则编译会报错
以vue-cli 2.9.6版 的版本举,默认是.babelrc。
.babelrc中的配置和相关的依赖
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2", ], "plugins": [ "transform-vue-jsx", "transform-runtime" ], }
- package.json中的配置
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "@babel/core": "^7.5.5",
mivant中最终版的babel.config.js中的配置和相关依赖
module.exports = function (api) { api.cache(true); const presets = [ "@babel/preset-env", "@vue/babel-preset-app", [ '@vue/babel-preset-jsx', { functional: false } ]]; const plugins = [ "@babel/plugin-transform-runtime", '@babel/plugin-transform-object-assign', ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant']]; return { presets, plugins }; }
参考资料
Babel7 发布
babelrc和babel.config.js 的区别
升级至babel7
babel7的简单升级指南
一文读懂 babel7 的配置文件加载逻辑
Babel快速上手使用指南
babel官网
组件全部加载与按需加载
组件是如何被加载?
解读vue.use源码
Object.keys(components).forEach((key)=>{ Vue.component(components[key].name,components[key]) })
附index.js中的代码
- 引入相关的组件
- 提供 公共的install方法
- 通过export default 实现全部加载,通过export 的方式实现按需加载
import MiButton from './Button/index' import Modal from './Modal/index' const components = [ MiButton, Modal ] const version = '1.0.0' const install = function (Vue) { if (install.installed) return components.forEach(item => { Vue.component(item.name, item) }) } if (typeof window !== 'undefined' && window.Vue) { console.log('运行环境为window'); install(window.Vue) } export { MiButton, Modal, install } export default { install, version }
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
按需加载的第一种方式
// 组件中内置了单个组件所需的样式 无需配置babel-plugin-import import { MiButton, Modal } from 'miVant' import Vue from 'vue' Vue.use(MiButton) Vue.use(Modal)复制代码
babel-pluhin-import
按需加载的第二种方式
import MiButton from 'miVant/lib/Button' import Modal from 'miVant/lib/Modal' import Vue from 'vue' Vue.use(MiButton) Vue.use(Modal)
按需架加载的基础
- 组件中的index.js中引入相关的vue文件,提供install方法
- XX.vue文件中 引入less文件,内置less
- 打包的时候对于compont下的文件使用CopyWebpackPlugin复制到lib目录下,也就是第二种按需加载的方式
less的使用
- utils中配置less-loader 注意loader的解析规则
附录一段less使用的示例
@hd: 1px; // 基本单位 // 支付宝钱包默认主题 // https://github.com/ant-design/ant-design-mobile/wiki/设计变量表及命名规范 // 色彩 // --- // 文字色 @color-text-base: #000; // 基本 @color-text-base-inverse: #fff; // 基本 - 反色 @color-text-secondary: #a4a9b0; // 辅助色 @color-text-placeholder: #bbb; // 文本框提示 @color-text-disabled: #bbb; // 失效 @color-text-caption: #888; // 辅助描述 @color-text-paragraph: #333; // 段落 @color-link: @brand-primary; // 链接 @defaultColor: #455a64; @hoverColor:#1989fa; @height: 60px; .navTitle{ font-size:16px; font-weight:600; cursor: default; } .navItem { color: @defaultColor; font: 14px/24px PingFang SC; padding: 10px 10px 10px 50px; text-align: left; cursor: pointer; } .doc-nav-title, .doc-comp-title{ .navItem(); .navTitle(); } .doc-nav-item{ .navItem() } .doc-comp-item{ .navItem() }
引入storyBook 预览功能
首先,storyBook是啥?
- Storybook是一个辅助UI控件开发的工具。通过story创建独立的控件,让每个控件开发都有一个独立的开发调试环境,可以单独的查看每个组件的不同状态,以及交互式开发和测试组件。
- Storybook的运行不依赖于项目,开发人员不用担心由于开发环境、依赖问题导致不能开发控件。
- Storybook支持很多主流的框架(React、Vue、Angular)。
- 2019年1月份,storybook 发布5.0版本,是自项目开始以来的第一次重大调整。改进了整个生态系统的视图层,插件和集成
安装使用
- 安装参考指南storybook for vue
- 自定义的webpack配置,解决扩展名问题和less编译问题
// 自定义webpack配置 const path = require('path'); module.exports = async ({ config, env }) => { // Extend it as you need. function resolve(dir) { return path.join(__dirname, '..', dir); } config.resolve = { extensions: ['.js', '.vue', '.json', '.jsx'], alias: { 'vue