解决 Babel 编译箭头函数的问题：‘return’ outside of a function
在前端开发中，我们经常使用 Babel 将 ES6/ES7 语法编译成浏览器可以识别的 ES5 代码。但是，当我们使用箭头函数时，有时候会出现 ‘return’ outside of a function 的错误，这个错误的原因是箭头函数没有声明函数作用域，导致编译后的代码中，return 语句直接放在了严格模式下的代码块之外。
如何解决这个问题呢？下面就来探讨一下如何解决 Babel 编译箭头函数的问题：‘return’ outside of a function。
深入分析问题
先来看一段使用箭头函数的代码：
const func = (a, b) => {
if (a > b) {
return a;
} else {
return b;
}
};在使用 Babel 编译时，会出现 ‘return’ outside of a function 的错误，这是因为箭头函数没有声明函数作用域，导致 return 语句直接放在了严格模式下的代码块之外。
我们可以将上面的代码改写成普通函数，来看一下编译后的代码：
var func = function func(a, b) {
if (a > b) {
return a;
} else {
return b;
}
};通过比较可以发现，普通函数声明了局部作用域，在代码块中使用 return 语句是合法的。而箭头函数没有声明函数作用域，导致 return 语句直接放在了严格模式下的代码块之外，从而出现了‘return’ outside of a function 的错误。
解决方案
要解决 Babel 编译箭头函数的问题，我们可以使用 Babel 的插件：transform-es2015-block-scoping。
- 安装插件
使用以下命令安装插件：
npm install --save-dev babel-plugin-transform-es2015-block-scoping
- 配置 .babelrc 文件
在 .babelrc 文件中添加插件的配置：
{
"plugins": [
"transform-es2015-block-scoping"
]
}- 重新编译代码
重新编译代码后，‘return’ outside of a function 的错误就会得到解决。
示例代码
使用箭头函数：
const func = (a, b) => {
if (a > b) {
return a;
} else {
return b;
}
};使用普通函数：
function func(a, b) {
if (a > b) {
return a;
} else {
return b;
}
}添加 transform-es2015-block-scoping 插件后使用箭头函数：
const func = function (a, b) {
if (a > b) {
return a;
} else {
return b;
}
};总结
在使用箭头函数时，要注意它没有声明函数作用域，因此会出现‘return’ outside of a function 的错误。要解决这个问题，我们可以使用 Babel 的插件 transform-es2015-block-scoping，将箭头函数转换为普通函数，解决‘return’ outside of a function 的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664aaee6d3423812e499a419