在Vue项目中使用Babel可以让我们使用一些还未被浏览器正式支持的JS新特性,同时也可以让我们将ES6/ES7/ES8的代码转换为ES5,以便浏览器可以正确解析。在vue-cli脚手架生成的项目中,会自动生成`.babelrc`文件,用于配置Babel的一些参数和插件。
默认情况下,`.babelrc`文件中只有`preset-env`插件,用于将ES6代码转换为ES5代码。比如,`const`、`let`、箭头函数、解构赋值等新特性在高版本浏览器支持良好,但在低版本浏览器下会出错,而`preset-env`就可以将其转换为ES5代码,确保可以在低版本浏览器下运行。
{ "presets": ["@babel/preset-env"], "plugins": [] }
如果需要支持更多的JS新特性,可以通过添加插件的方式实现。比如,如果想要使用async/await语法,就需要安装`@babel/plugin-transform-async-to-generator`插件,并在`.babelrc`文件中添加如下配置:
{ "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-transform-async-to-generator"] }
这样代码中的async/await语法就可以被正确转换为ES5代码,从而在低版本浏览器下正确运行。