javascript - 如何使用 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 的文档

Not intended for serious use
Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side. See setup build systems for more information.

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

相反，为您的代码设置一个正确的构建步骤来转换和捆绑您的代码。

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

a.js

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

export var eat;

b.js

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