如何使用 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

ES6 导出仅采用导出的部分，其他所有内容实际上等同于在函数中导入 appleModule

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

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

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

Answer 2

请实际阅读 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';

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

How to access variables across Javascript files with babel?

javascript

module

global-variables

ecmascript-6

babeljs