javascript - 解决导出/进口

Question

我有一个 Namespacing.js，内容如下

(function(){

    window.GlobalObject = {
        foo : function() { console.log("bar"); }
    }

})();

然后我有另一个 MyScript.js

GlobalObject.newAttribute = { ... }

所以我现在正在与 webpack 捆绑在一起，我试图在这上面使用模块，但我做不到。

在 Namespacing.js 我在最后添加:

export default GlobalObject;

然后我尝试在 MyScript.js 中导入它

import GlobalObject from "Namespacing"

但是我的 webpack 给我一个错误

[14:58:44] GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name (Kneat) (line: 1, col: 7, pos: 7)

any1 知道执行此导出/导入的好方法吗？

Answer 1

要切换到import/export，您不能只将exports 添加到现有文件中，您需要更改它们的结构(非常轻微)。

例如，Namespacing.js 将具有:

export const GlobalObject = {
    foo : function() { console.log("bar"); }
};

...导出命名符号 GlobalObject。那将像这样导入:

import { GlobalObject } from './Namespacing.js';

(如果您想在导入模块中使用不同的本地名称，您可以使用 as 子句。)

或者您可以将该对象导出为默认导出:

export default {
    foo : function() { console.log("bar"); }
};

...并像这样导入它:

import GlobalObject from './Namespacing.js';

请注意，在这种情况下，您可以在要导入它的模块中为 GlobalObject 使用任何您想要的名称(不需要 as as 子句) .

---

不要担心它涉及删除 IIFE 的事实；模块固有范围，模块代码不在全局范围内运行。