如何使用babel跨Javascript文件访问变量

Question

我正试图将我的代码从ES5迁移到ES6并使用babel。我在代码中经常使用模块模式，如果我有一个像apple这样的模块，我会这样做:

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

，然后访问不同文件中的appleModule。但是，当从this移动所有内容时:

<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跨文件访问变量?

Answer 1

请实际阅读babel-browser的文档

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

你不应该在生产环境中像那样使用babel-browser。即使是在一个发展中国家，真的。

相反，为你的代码设置一个适当的编译步骤来编译和绑定你的代码。

你甚至不需要像那样创建你自己的模块

a.js

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

研究

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

Answer 2

ES6导出只接受导出的部分，其他的几乎都相当于在一个函数中，导入appleModule

export var appleModule = (function() {
var yummy = true;
var eat = function() { }
return { "eat": eat }
})();
import  {appleModule as appleModule}  from './apple';