babel.config.js配置文件详解

一、前言

项目开发阶段，使用可选链操作符 ?. 出现以下编译报错问题：

分析：由于可选链操作符 ?. 是ES2020（即ES11）中推出的新语法，允许我们不需要校验当前属性的类型就可去尝试访问子属性。

例如：let str = a?.b?.c;

以上错误正是由于项目中无法解析可选链操作符等新的ES属性方法，如上图所示， 这时需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。

babel.config.js 配置信息如下：

module.exports = {
  presets: ['@vue/app'],
  plugins: ["@babel/plugin-proposal-optional-chaining"]
}
1
2
3
4

二、babel 详解

Vue 项目根目录中存在babel..config.js文件，即为Babel的配置文件，作用于整个项目。Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel，将ES6转换为ES5。

三、webpack 和 babel 之间的关系

在Vue项目中，Webpack和Babel是两个常用的工具，它们在不同方面发挥作用。

Webpack是一个模块打包工具，它能够将项目中的各个模块打包成最终的静态资源文件，如JavaScript、CSS和图片等。Webpack提供了丰富的配置选项和插件系统，可以自定义和优化打包过程。

Babel是一个JavaScript编译器，它主要用于将新版本的JavaScript代码转换为向后兼容的版本，以便在不支持最新语法和特性的浏览器中运行。Babel能够将ES6+的代码转换为ES5的代码，以及处理一些其他语法转换和代码优化。

在Vue项目中，Webpack和Babel通常一起使用，具体关系如下：

Webpack配置中使用Babel：在Webpack的配置文件中，通常会配置Babel作为一个loader或者插件，以便在打包过程中对JavaScript代码进行转换。通过Babel loader，Webpack可以将项目中的JavaScript文件交给Babel处理，进行语法转换和代码优化。

Babel配置文件：Babel需要自己的配置文件，通常是.babelrc文件或babel.config.js文件。在这个配置文件中，可以指定Babel的转换规则、插件和预设等。这样，在Webpack打包过程中，Webpack会读取Babel配置文件，并根据配置对JavaScript代码进行转换。

Vue CLI中的集成：如果使用Vue CLI来创建和管理Vue项目，它已经集成了Webpack和Babel，并提供了相应的配置。在Vue CLI生成的项目中，可以通过babel.config.js文件配置Babel，而Webpack的配置则隐藏在Vue CLI的内部，由Vue CLI负责管理。

综上所述，Webpack是一个模块打包工具，用于将各个模块打包成最终的静态资源文件。而Babel是一个JavaScript编译器，用于将新版本的JavaScript代码转换为向后兼容的版本。在Vue项目中，Webpack和Babel通常一起使用，通过Webpack的配置来集成和配置Babel，以便对JavaScript代码进行转换和优化。

四、拓展阅读

• Babel中文文档
• MDN可选链操作符?.
• 《JavaScript进阶（十三）：JavaScript 空值合并运算符、可选链操作符、空值赋值运算符讲解》
• 《Vue进阶（五十一）： vue-cli 脚手架 webpack.base.conf.js 配置文件讲解》
• 《Vue进阶（一）：Vue 学习资料汇总》
• ES6 在线转换为 ES5