本文详解 Vue CLI 项目中 .babelrc 或 babel.config.js 的配置方法，重点介绍如何利用 babel-preset-env 和 babel-plugin-component 实现 Element UI 的按需加载。通过对比全量引入与按需引入的打包体积，展示如何显著减小 app.js 文件大小，提升前端应用性能。
Babel 与 .babelrc 基础配置
尽管 ES6 标准尚未被所有浏览器完全支持，但采用 ES6 已是前端开发的大趋势。Babel 工具因此应运而生，负责将 ES6 代码转换为浏览器可识别的语法。
.babelrc 文件的作用类似于 Linux 系统中的 .bashrc 或 .zshrc，即运行时自动加载的配置文件。
该文件主要用于定义代码转码的具体规则和所需插件。
在 Vue CLI 脚手架项目中，.babelrc 文件的具体配置如下。
{
// 此项指明，转码的规则
"presets": [
// env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码
["env", {
"modules": false ,
"targets": {//需要支持的环境
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
// 下面这个是不同阶段出现的es语法，包含不同的转码插件
// stage-x和es2015等有些类似，但是它是按照JavaScript的提案阶段区分的，一共有5个阶段。
//而数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的，以此类推。
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译，强烈推荐使用transform-runtime
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中，不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}browserslist 是一个用于在前端工具间共享浏览器支持列表的库，它被 Autoprefixer、babel-preset-env、eslint-plugin-compat、stylelint-no-unsupported-browser-features 以及 postcss-normalize 等工具所使用。
Autoprefixer
babel-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
Vue CLI 3 Element UI 按需加载实战
补充知识：Vue CLI 3 中 Element UI 的懒加载与按需加载配置。
前言
在使用 Vue CLI 3.x 结合 UI 框架进行开发时，通常只需使用框架提供的少数几个组件。如果每次构建都全量引入整个 UI 框架，会导致程序消耗过多资源，尤其在移动端（如使用 mint-ui）时，这会显著影响性能并降低用户体验。
接下来以 Vue CLI 3.x 配合 Element UI 为例，记录如何实现组件的按需加载。
在未引入 Element 插件时的初始状态。
执行命令 npm i element-ui -S 引入 Element UI。
如图所示，可见 app.js 文件体积增加了约 5MB。
// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
尝试仅引入 Element 的部分组件。
如图所示，尽管代码中只引用了两个组件，但 app.js 的大小几乎未变，这表明简单的手动引入并未实现按需加载的效果。
import { Button, Select } from 'element-ui'
// 此时的样式必须要引入，否则组件将没有样式
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Button)
Vue.use(Select)
实现按需加载的正确步骤。
1. 安装插件：执行 npm i babel-plugin-component -D。
2. 配置 babel.config.js 文件。
module.exports = {
presets: [
'@vue/app',
['@babel/preset-env', // 添加 babel-preset-env 配置
{
'modules': false
}
]
],
plugins: [
[
'component',
{
'libraryName': 'element-ui', // 按需引入的组件库
'styleLibraryName': 'theme-chalk' // 按需引入的样式
}
]
]
}同时需要修改 main.js 文件。
import { Button, Select } from 'element-ui'
// 此时的样式不需要引入了，样式自动按需来引入
// import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Button)
Vue.use(Select)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
配置完成后，重新执行 npm run serve。此时观察 app.js 文件，其体积相较于未引入插件时仅增加了数百 KB，从而成功实现了按需加载。
以上关于 Vue CLI 脚手架 .babelrc 文件用法及 Element UI 按需加载的说明即为全部内容，希望能提供参考，欢迎支持本站。