babel编译vue
Babel 是一个广泛使用的 JavaScript 编译器，它可以将 ECMAScript 代码转换成向后兼容的 JavaScript 版本。Babel 还支持转换 JSX 和 TypeScript 代码。当在 Vue.js 中使用 ES6 或 TS 语法时，为保持浏览器兼容性，需要在构建阶段将这些语法转换成 ES5 语法。Babel 可以完成这项任务，它支持编译 Vue.js 中的所有语法结构，如 template、script 和 style 标签，以及 Vue 组件中的生命周期钩子函数等。
// 安装babel依赖 npm install --save-dev babel-loader @babel/core @babel/preset-env
在 Vue.js 项目中使用 Babel 做编译时，需要安装 babel-loader、@babel/core 和 @babel/preset-env 三个依赖。其中，babel-loader 是 Webpack 进行编译时的加载器，@babel/core 是 Babel 的核心包，@babel/preset-env 是一个协调一系列插件处理 ECMAScript 2015+ 的预设包。此外，还需要在项目根目录下创建一个 .babelrc 文件，设置 Babel 的一些配置选项。
{
"presets": [
["@babel/preset-env", {
"modules": false
}]
]
}
在 .babelrc 文件中，我们只需要设置一个 presets 配置项，来告诉 Babel 需要使用哪个预设包。这里我们使用了 @babel/preset-env 预设包，并设置了 modules 选项为 false 来关闭 Webpack 对 ES6 模块的转换，因为 Webpack 4 中已经原生支持 ES6 模块的编译。这样，Babel 只需要针对 ES6+ 语法特性的编译工作就好了。
// webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
最后，在 Webpack 的配置文件中，将 Babel 加载器加入到 rules 中。其中 test 指定需要匹配的文件格式，exclude 是排除不需要编译的文件夹或文件，use 中的 loader 指定加载器，options 中则是 Babel 的一些配置选项。这样，在执行 Webpack 构建命令时，Babel 就会按照我们的配置对项目中的 JS 文件进行编译了。