- Published on
[VUE]Babel-plugin-import使用示例:vant按需引入
- Authors
- Name
- Hansuku
近两年前端框架火得一塌糊涂,各种第三方开发组件库层出不穷,饿了么的 ElementUI、炫酷的 iView、Bootstrap 家的 VueStrap、有赞家的 Vant 和 Zant。这些框架提供了很优秀的组件和一些设计规范,例如弹框、列表显示器、图片预览浮层、表格等等,而我们在做 SPA 的时候只使用 Vant 的一部分功能,完整引入的话会导致首屏加载时间长,一些不需要使用的东西也在走流量了。Babel-plugin-import 则是从 React 那边过来的一个解决方案,能够按需使用 Vant。
- 安装
npm i babel-plugin-import -D
- 使用 在你的项目根目录里有一个
.babelrc
的文件,打开以后是这样的
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
理所当然,我们在 plugin 里添加 vant 的规则
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style":true}]
]
这样就完成了babel-plugin-import中的适配,libraryName是第三方库的名字,style:true
代表自动引入css
- 引用组件 假设现在我们只需要 vant 的按钮 Button main.js 里写入这样就可以单独引入 vant 的按钮了,其他组件也是同理。
import {Button} from 'vant' Vue.use(Button)
- 多个组件同时引入
import {Button, Row, Col, Icon} from 'vant'
我们可以把这些全部写在花括号内
Vue.use(Button).use(Row).use(Col).use(Icon)
Vue.use 可以写成一行 这样就可以按需使用 Vant 的组件了