解决出口/进口问题

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子句）。

---

不要担心它涉及拆除IIFE;模块本质上是作用域的，模块代码不在全局范围内运行。