引言
Vue.js 是一个前端非常流行的 JavaScript 框架，它提供了 MVVM 架构的设计理念，以及一整套完善的概念和 API 来管理数据、控制视图，并且文档十分完备。这使得 Vue.js 受到了众多开发者的关注和喜爱。
Vue.js 2 采用了 ES6 的模块化管理方式，利用了 export 和 import 语法，采用了单文件的组件设计，使得组件化开发变得更加轻松和直观。而这种方式在应用中却有一个问题：目前部分浏览器不支持 ES6，尤其是 IE 浏览器。
为了解决这个问题，可以使用 Babel 转译器将 Vue.js 2 编译为 ES5 代码，使其能够不依赖 ES6 运行环境在旧浏览器上进行访问。
本文将详细介绍如何使用 Babel 转译 Vue.js 2 的模块化源码，使其兼容 ES5 环境，并且会提供详细的指导和示例代码供读者参考。
Babel 简介
Babel 是一款 JavaScript 编译器，可以将 ES6 代码转译为 ES5 代码，这是因为它能够识别 ES6 中的新特性，比如箭头函数、扩展运算符、解构等等，然后将这些新特性转化成 ES5 的兼容语法。
它还提供了一些插件和预设，可以让你使用一些尚在草案阶段的实验性特性，同时也可以让你通过自定义配置，实现针对不同应用场景的编译效果。
Babel 和 Vue.js 2
Babel 并不能直接处理 Vue.js 2 的单文件组件（SFC），而是要将其编译为纯 JavaScript 模块，然后再交给 Babel 处理，这一点大家要注意。
为了确保转译的成功，我们需要在 Babel 中引入两个插件： babel-plugin-transform-es2015-modules-commonjs 和 babel-plugin-transform-runtime。
babel-plugin-transform-es2015-modules-commonjs插件将 ES6 模块化语法转换成 CommonJS 模块化语法，从而符合大部分模块加载器的标准规范。babel-plugin-transform-runtime插件则提供了一些辅助函数，避免代码中使用的 ES6 内置函数在转译后被摆放到了全局空间，从而避免命名冲突等问题。
具体的配置可以在 .babelrc 中进行：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ----
-
--
--
---------- -
--------------------
-----------------------------------
-
-其中 presets 用于配置编译环境，此处是将代码编译成适合在 last 2 版本浏览器和 safari 7+ 的环境下运行的代码。如果需要指定其他目标环境，则需要参考 Browserslist 的编写方式来指定。
示例代码
// app.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')上述是一个简单的 Vue.js 2 应用，入口文件 app.js 引用了 babel-polyfill 和 Vue，并挂载了 App 组件。
这里的 babel-polyfill 是一个 Babel 的插件，用于支持部分 ES6 新特性的兼容，如 Promise 和 WeakMap 等等。如果项目中需要使用这些特性，那么就需要安装和引用这个插件。
接下来，我们可以运行以下命令来编译这个应用：
babel src --out-dir dist
其中 src 是源代码的目录，dist 是编译输出的目录。
运行完这个命令之后，我们可以看到输出目录下面的文件已经被转译成了 ES5 代码：
-- -------------------- ---- -------
---- --------
--------------------------
--- ---- - ---------------
--- ----- - -----------------------------
--- ---- - ---------------------
--- ----- - -----------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -
--- ---------------
------- -------- --------- -
------ -----------------
-
------------------可以看到，如何将 import 和 export 等 ES6 的模块化语法转化为了 require 和 module.exports 等 CommonJS 标准语法，同时也减少了原脚本中的内置函数污染全局变量的风险。
总结
借助于 Babel 可以让我们在开发 Vue.js 应用的同时，将源代码转译为 ES5 代码，使得在旧的浏览器上也能够正确访问我们的应用。在文章中我们了解了如何使用 Babel 进行编译，以及如何通过配置 .babelrc 文件进行个性化设置。
在实际使用中，开发者还可以通过其他手段来减小编译后的代码量，例如使用 code-splitting 技术、启用 Tree Shaking 等等。我们可以看到，前端开发其实是一个不断优化、追求高效的过程，技术的学习和实践也是不断深入的过程。编辑本篇文章的过程中，也让我有了更深的理解和体会。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d43a5eb5eee0b525bb6771