按照 Mint-ui 的官方文档,首先 install Mint-ui ,这没什么好说的,安装完之后就是在项目中引入了,按照官方的说法,有全部引入和按需引入二种方式。作为实际项目开发来说,当然应该选择按需引入的方式,这可以减小我们项目的体积,加快加载速度。
按照文档,先安装 babel-plugin-component,然后修改 .babelrc 在这里文档上的说法是将 .babelrc 文件改为:
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
那么我们打开这个文件看一下,未修改过的文件内容如下:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
这里面是有一些默认配置的,如果我们直接把文件修改成文档上的那样的话我觉得是有问题的,我觉得这里应该是写文档的人没有把意思说清楚,应该是在这个文件中将 Mint-ui 需要的配置添加进去,而不是直接覆盖原文件,所以我是将文档中说的二个配置加入到原文件相应的内容下面,修改后的内容如下:
{
"presets": [
["es2015", { "modules": false }],
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
]
}
到了这里,准备工作已经做完,按照文档,引入需要的组件,使用,然后 npm run dev ,你以为可以愉快的玩耍了?too yang。
在运行命令之后,会出现报错
Module build failed: Error: Couldn't find preset "es2015" relative to directory XXXXXXXX
出现这个错误是因为我们没有安装 babel-preset-es2015,这个时候只需要单独安装下 babel-preset-es2015 就可以了
npm install babel-preset-es2015
安装好了之后就可以正常运行了,这个时候就可以实现组件按需引入了。
更多的思考
问题是解决了,那么 babel-preset-es2015 这个到底是什么东西呢?找了下,发现一个帖子, https://zhuanlan.zhihu.com/p/29506685
看完上面的帖子,再结合 babelrc 文件中的内容来看,其实 babel-preset-es2015 这个依赖我们完全是没有必要引入的,所以文档中写的第一个配置 [“es2015”, { “modules”: false }] 也是完全没有必要的,因为官方已经为我们把配置写好了,原来的 es2015” 已经被 “env” 取代,而 “env” 这个配置已经给我们写好了。
现在将 [“es2015”, { “modules”: false }] 去掉,然后将 babel-preset-es2015 也删掉,重新 run ,发现也是可以的。
到这里,我想大家应该已经清楚了,这还是文档的坑,文档上面的配置已经过时了,但是他们没有更新,导致我们在接入的时候话费额外的时间和精力。
总结
最后在总结下,如果要按需引入 Mint-ui 的组件,其实要做的事情很简单,首先创建项目,初始化模版,安装依赖,这些是每个项目都需要做的。
然后是安装 Mint-ui,修改 .babelrc 文件,注意这里只需要在 plugins 下面加入如下代码即可
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
然后按照文档的指示就可以愉快的玩耍了。
以上就是这次的爬坑过程,记录下来,希望对碰到同样问题的朋友能够有所帮助。
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com
链接:https://www.javascriptc.com/1997.html
原文链接: