vue-cli 是怎么配置babel的？

最新推荐文章于 2024-06-04 14:14:14 发布

虎妞先生

最新推荐文章于 2024-06-04 14:14:14 发布

阅读量103

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/qq_33259455/article/details/135522895

版权

前言

https://juejin.cn/post/7208510421676982329

上文的最后，我们提到了babel配置的最佳实践

没有最佳，只有最适合

那么业内常用的脚手架是怎么配置的呢？

我们以一次线上白屏问题的排查为切入点一步步探讨。

问题描述

我们的项目是以vue-cli3脚手架生成的 vue2.6.11的SPA项目

某华为P10 手机打开页面忽然白屏，由于是app内嵌页，且是线上环境，无法抓包

我们找到同款测试机，通过google抓包工具发现JS代码在报错

定位到代码行，是crypto.js/enc-base64url.js 在报错

parse: function (base64Str, urlSafe=true) { var base64StrLength = base64Str.length; var map = urlSafe ? this._safe_map : this._map; var reverseMap = this._reverseMap; ....... },

问题排查

当看到低版本手机上，三方库报错时，第一反应是babel 是不是配置的不对。

当打开报错代码，定位到上述代码第一行，一时间竟没有发现哪里有错，朴实无华，平平无奇的代码怎么浏览器引擎就无法识别呢？

后来看到 urlSafe = true 这段给函数参数默认值的写法。

想起来这是ES6新增的语法，详情可以看下面的教程

https://es6.ruanyifeng.com/#docs/function

理想状况应该是这样

``` // 转译前 function print(str='hello word') { console.log(str) } print()

// babel 转译后

function print() { var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "hello word"; console.log(str); } print(); ```

那么问题来了。

为什么这段代码没哟被转译成ES3，ES5的语法呢？

为什么我业务代码中的函数参数默认值的写法就没有出现任何问题呢？

vue-cli脚手架是对babel怎么配置的呢？

带着这三个问题，我打开了项目中的babel.config.js

vue/app

项目中的babel.config.js配置如下

预设的插件集合是 @vue/app

plugins 中是对两个组件库的自动引入

module.exports = { presets: [ '@vue/app' ], plugins: [ [ 'import', { libraryName: 'mand-mobile', libraryDirectory: 'components' } ], [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant' ] ] }

@vue/app 是什么？

@vue/app 是 @vue/babel-preset-app的缩写

一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app

通过查看node_modules源码，我们在readme中发现

这个插件内部引用的是经典插件库 babel/preset-env

它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。

browserslist

配置源从以下位置读取

package.json文件中的browserslist字段
.browserslistrc配置文件
browserslist.config.js 配置文件
运行环境变量BROWSERSLIST
默认如下

"browserslist": [ "defaults" ] // defaults => > 0.5%, last 2 versions, Firefox ESR, not dead

useBuiltIns

这个属性的配置的默认值是 usage

它会根据源代码中出现的语言特性自动检测需要的 polyfill，确保了最终包里 polyfill 数量的最小化

意思是仅仅会为我们引入目标浏览器中不支持并且我们在代码中使用到的内容，会剔除没有使用到的 polyfill 内容。

但是并不会处理我们的npm依赖包中的不被浏览器识别的 ES6+ 的语法

这就导致了文章开头提到的问题，三方库函数是crypto.js/enc-base64url.js 中ES6语法在报错，直接导致页面白屏幕。

解决方案

思路一

修改useBuiltIns 为entry

在入口文件引入polyfill

// babel.config.js module.exports = { presets: [ [ '@vue/app', { useBuiltIns: 'entry' } ] ] } //main.js import 'core-js/stable'; import 'regenerator-runtime/runtime'

优点：一劳永逸，所有的JS新语法都会进行转译，再也不用担心浏览器兼容问题

缺点：无论这个语法有没有被使用，相应的转译包都被引入了，导致代码体积变大