ES6的模块化开发已经成为前端开发中非常流行的一种方式，但在兼容性方面仍有不少问题。为了做到在ES6项目中使用ES5兼容的模块化开发，我们通常使用 Babel 进行转换。
然而，由于ES6模块化开发的一些特性并不是任何时候都能够被Babel完美地转换为ES5的，当我们使用Babel翻译成ES5时，可能会经常遇到各种错误。在这篇文章中，我们将探讨一些常见的错误以及如何解决这些问题。
1. 导出对象
在ES6中，我们可以使用对象字面量作为导出项，例如：
export const foo = 'foo';
export default {
someFun() {
return 'some fun';
}
}然而，这种导出对象的方式在Babel转换成ES5时并不总是可靠的。在ES5中，对象字面量格式不支持关键字和变量名作为对象属性名，因此我们需要用中括号 [] 将属性名包裹起来。改成如下写法即可：
exports.foo = 'foo';
exports["default"] = {
someFun: function someFun() {
return 'some fun';
}
};2. 不合法的import语句
在ES6当中，我们可以使用不同的 import 语句来导入模块中的内容。例如：
import {foo, bar} from './foo';
import def from './bar';然而，在ES5中并没有相应的引入方式。当使用Babel将这些语句转换为ES5时，可能会出现一些错误。以下是两种常见的错误类型：
(1) 缺失require
Uncaught ReferenceError: require is not defined
这是由于import语句不是在Node.js环境下运行的原因引起的。要解决这个问题，我们需要添加 babel-plugin-transform-es2015-modules-commonjs 插件来把ES6语法转换成Node.js的CommonJS语法。首先需要安装该插件：
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
然后在Babel配置文件 .babelrc 中添加：
{
"plugins": ["transform-es2015-modules-commonjs"]
}(2) 不合法的import标识符
Uncaught SyntaxError: Unexpected token {这是由于Babel没有正确解析import语句时引起的，通常是由于开发者忘记将它转换成ES5 CommonJS的语法。
例如，以下代码：
import {foo, bar} from './foo';应该被转换为：
var _foo = require('./foo');
var foo = _foo.foo,
bar = _foo.bar;这样以后，我们就可以在ES5代码中使用CommonJS语法导入模块。
3. UMD导出的问题
一般情况下，在ES6开发中我们使用 module.export 导出模块，在打包时可以选择把打包后的文件输出为UMD规范。例如：
module.exports = {
foo: 'foo',
bar: function() {
console.log('bar');
}
};然而在Babel转换成ES5时，我们可能会遇到这种错误：
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
这是由于在UMD导出中，使用的是只读对象来导出模块所致。
为了解决这个问题，我们可以使用 babel-plugin-add-module-exports 插件。安装该插件：
npm install --save-dev babel-plugin-add-module-exports
然后在Babel配置文件 .babelrc 中柿添加：
{
"plugins": ["add-module-exports"]
}这样代码就可以正确地用UMD方式导出了。
总结
在使用Babel进行ES6到ES5的转换时，由于一些语法特性的不兼容性，可能会遇到各种奇怪的问题。在解决问题的过程中，我们需要通过查看错误日志和代码，以深入的理解以及搜索的方式找到问题的根源并解决问题。需要注意的是，不同的问题可能需要不同的解决方案，有时候解决方案可能不可避免的就是要牺牲一些代码简洁性和性能，最好的方式就是理解这些问题并积累解决问题的经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bafa77add4f0e0ff39034f