babel 怎么编译 ES6 模块

其实就一句话：babel 统一将 js 模块化语法转为 commonJS 风格。

什么是 commonJS 风格

// 导出语法
module.exports = {}
exports.obj = {}

// 引入语法
require()

require 方法返回的就是 exports 对象。比如 a.js 导出模块是 module.exports = { a: 1 }，那么 require('a.js') 得到的就是 { a: 1 }。

什么是 ES6 模块

// 导出的对象就是 { a }
// 只能用 import { a } 的形式引入
export { a }
import { a } from 'xxx'

// 导出的对象是 { default: a }
var a = {}
export default a
// import a 相当于 import { default as a }
import a from 'xxx'

babel 怎么转换 ES6 export

babel 怎么转换 ES6 import

重大变化之一

babel6 取消了对 export default 的充分支持，下图是 babel5 转化的结构，babel6 删掉了箭头所示的代码

也就是说以前 export default 导出的模块，都必须用 import 语法或者 require().default 形式引入，不能单独用 require() 引入。

怎么才能让 require() 依然有效呢？办法是用 babel-plugin-add-module-exports，这个插件的原理很简单，就是补上箭头指向的那行代码。

为了迎合 ES6 趋势，有些脚手架在 babelrc 配置中将 modules 选项设为了 false：

"presets": [
    ["env", {
        "modules": false,
        "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
    }],
    "stage-2"
]

babel 文档 里该参数默认值是 commonJS，改成 false 意味着 babel 将不再对 ES6 语法进行编译，也就导致 require 一个 ES6 语法导出的模块或者 import 一个 commonJS 语法导出的模块会出问题。

解决方法最简单的当然是把这行配置删掉，还有一种办法是用插件 babel-plugin-transform-es2015-modules-commonjs，不过显得多此一举。

重大变化之二

vue-loader 13 之后，不管用什么语法导出，导出的都是 es 模块，相当于强制使用 export default。换句话说，不管导出语法长什么样，实际导出的 vue 模块都长这样：{ default: { /* options */ } }。具体参见：https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

结论

如果用的是 babel5 和 vue-loader 13-，那么所有的导入导出语法都会充分的转换为 commonJS 风格，那么混搭的使用导入导出语法都没问题。

如果用的是 babel6 和 vue-loader 13+，那么凡是 vue 模块都必须用 import 语法或者 require().default 形式。

因为 .vue 文件是用 vue-loader 处理的，用 babel-plugin-add-module-exports 无济于事。