如何使用 babel 访问 Javascript 文件中的变量？答案

【问题标题】：How to access variables across Javascript files with babel?如何使用 babel 访问 Javascript 文件中的变量？
【发布时间】：2016-01-23 17:08:44
【问题描述】：

我正在尝试将我的代码从 ES5 迁移到 ES6 并使用 babel。我在我的代码中使用了相当多的模块模式，所以如果我有一个像 apple 这样的模块，我会做这样的事情：

var appleModule = (function() {
    var yummy = true;
    var eat = function() { }

    return { "eat": eat }
})();

然后在另一个文件中访问appleModule。但是，当从这里移动所有内容时：

<script type="text/javascript" src="/scripts/apple.js"></script>
<script type="text/javascript" src="/scripts/banana.js"></script>

到这里：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.js"></script>
<script type="text/babel" src="/scripts/apple.js"></script>
<script type="text/babel" src="/scripts/banana.js"></script>

我无法再访问不同文件中的appleModule。我收到ReferenceError 说它不存在。 babel 和 ES6 如何跨文件访问变量？

【问题讨论】：

标签： javascript module global-variables ecmascript-6 babeljs

【解决方案1】：

请实际阅读babel-browser的文档

不适合认真使用
在浏览器中编译的用例相当有限，因此如果您在生产站点上工作，您应该在服务器端预编译脚本。请参阅setup build systems 了解更多信息。

您不应该在生产环境中使用像那样的 babel-browser。甚至在开发中也没有，真的。

相反，为您的代码设置适当的构建步骤，以转译和捆绑您的代码。

您甚至不必像这样创建自己的模块

a.js

var yummy = true;
var eat = function(){};

export var eat;

b.js

import {eat} from './a.js';

【讨论】：

不会仍然存在同样的问题吗？另外，我只使用 babel-browser 进行开发。当然，我会在发布之前编译所有内容。
@RyanPeschel 没有。使用 ES6 module system 而不是重新发明轮子。

【解决方案2】：

ES6 导出只需要导出的部分，其他所有内容实际上相当于在一个函数中导入 appleModule

export var appleModule = (function() {
var yummy = true;
var eat = function() { }

return { "eat": eat }
})();

import  {appleModule as appleModule}  from './apple';

【讨论】：