在前端开发中，我们经常使用 babel 来将 ES6+ 的代码转换成浏览器可以识别的 ES5 代码。然而，最近在使用 babel 7 进行转换时，遇到了一个坑点：环境变量导致 ES6 module 转换失败。
问题描述
在使用 babel 7 进行转换时，如果设置了 NODE_ENV 环境变量为 production，那么 babel 会默认将代码转换为 ES6 module 的形式。例如，下面的代码：
// index.js
import { foo } from './foo';
export const bar = () => {
console.log(foo);
}在 NODE_ENV 环境变量为 production 的情况下，会被转换成：
// index.js
import { foo } from './foo.js';
export const bar = () => {
console.log(foo);
}可以看到，babel 会将 ES6 module 的文件后缀 .js 加上。这个行为可能会导致一些问题。
问题原因
在浏览器中使用 ES6 module 时，如果文件后缀为 .js，浏览器会将其当作普通的 JavaScript 文件来处理，而不是 ES6 module。因此，如果 babel 将 ES6 module 转换成了 .js 后缀的形式，就会导致浏览器无法正确处理这些文件。
解决方案
解决这个问题的方法很简单，只需要在 babel 的配置文件中加入以下配置即可：
-- -------------------- ---- -------
-
---------- -
------------------- -
-------- -
---- -------
--
--------------------- ----------- ------------------ -----------------
------------- ------- ------- ------ ------- -------
--
-
-其中，extensions 指定了 babel 转换时支持的文件后缀名，将 .js 从后缀名列表中去掉即可。这样，babel 就不会将 ES6 module 转换成 .js 后缀的形式了。
总结
在使用 babel 7 进行转换时，一定要注意环境变量对 ES6 module 转换的影响。为了避免这个问题，可以在 babel 的配置文件中加入上述配置，确保 babel 不会将 ES6 module 转换成 .js 后缀的形式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660b87ffd10417a222bb2d70