解决出口/进口问题

时间:2017-12-18 15:27:57

标签: javascript ecmascript-6

我有一个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"

但是后来我的网络包给我一个错误

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

any1知道这种导出/导入的好方法吗?

1 个答案:

答案 0 :(得分:3)

要切换到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;模块具有固有范围,模块代码不在全局范围内运行。