在现代前端开发中，Vue 单文件组件已经成为了一种常见的开发方式。但是，在一些比较老的项目中，可能还存在着旧版的浏览器，这些浏览器并不支持 ES6，甚至还支持不了模块化开发。为了让这些旧版浏览器能够正常运行 Vue 单文件组件，我们需要用 Babel 进行转译。
Babel 简介
Babel 是一个 JavaScript 编译器，能够将 ES6/ES7 代码转换为 ES5 代码。通过 Babel，我们可以使用最新的 JavaScript 语言特性，而不用担心代码在旧版浏览器上无法运行。
配置 Babel
首先，我们需要安装 Babel。
npm install --save-dev babel-core babel-preset-env babel-plugin-transform-runtime
然后，在项目根目录下创建一个名为 .babelrc 的文件，内容如下：
{
"presets": ["env"],
"plugins": ["transform-runtime"]
}这个文件的作用是告诉 Babel，我们要使用哪些转换器和插件。
配置 webpack
接下来，我们需要使用 webpack 来进行打包。配置 webpack 的时候，需要使用 babel-loader 来加载单文件组件，并将其编译成 ES5 代码。修改 webpack.config.js 的配置文件，如下所示：
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ -
-
----- --------
---- -
------- --------------
--
-------- --------------
--
-
----- ---------
---- -
------- -------------
-------- -
-------- -
--- -
------- ---------------
-------- -
-------- -------
-
-
-
-
-
-
-
-
-----
-这里的关键是在 vue-loader 的配置中使用 babel-loader 对 js 文件进行编译。
编译 Vue 单文件组件
现在，我们就可以愉快地编译 Vue 单文件组件了。我们创建一个样例的 Vue 单文件组件，如下所示：
-- -------------------- ---- -------
----------
-----
-- ------- --
------
-----------
--------
------ ------- -
---- -- -
------ -
-------- ------- -------
-
-
-
---------我们可以在入口文件中引入这个组件，并使用 webpack 进行打包。打包后的代码如下所示：
-- -------------------- ---- -------
--- --------- - ---------------------------
--- ---------- - ----------------------------------
--- ---- - ----------------------------------
--- ----- - -----------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -
-------------------------------------- -
--------- -------------------
----- -------- ------ -
------ -
-------- ------- -------
--
-
---
--- ---------------
--- ------
---这里的关键是使用 vue-loader 将 template 编译成 JavaScript，使用 babel-loader 将 ES6 代码编译成 ES5 代码。
总结
通过 Babel 和 webpack 的配合，我们可以很容易地将 Vue 单文件组件转化成旧版浏览器也能支持的 ES5 代码。在实际项目中，我们需要注意保持 webpack 和 babel 的版本兼容，避免出现不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d29ea95b1f8cacd4ae306