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

Question

我正在尝试将代码迁移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跨文件访问变量？

Answer 1

请实际阅读babel-browser的文档

不打算用于严肃的用途
在浏览器中编译具有相当有限的用例,因此如果您在生产站点上工作,则应该在服务器端预编译脚本.有关更多信息,请参阅setup build systems.

你不应该在生产环境中使用像这样的babel浏览器.实际上,即使是在开发项目中也是如此.

相反,为代码设置正确的构建步骤以转换和捆绑代码.

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

a.js

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

export var eat;

b.js

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