Question

因此，我最近开始使用动态导入，并尝试以我在common.js中具有的风格编写代码，遇到了不同之处，并希望获得一些信息。

在common.js中，我将这样编写导出文件：

var x = {};

x.foo = async () => {

    //Imaginary code here.

};

x.bar = async () => {

    //Imaginary code here.

};

modules.export = x;

然后我就这样导入：

var fooBar = require("fooBar");

它可以正常工作，我可以打电话给fooBar.foo();，但是与import();不同的是，我的导出将是：

var x = {};

x.foo = async () => {

    //Imaginary code here.

};

x.bar = async () => {

    //Imaginary code here.

};

export {x};

和导入：

var module = ( await import('./module.js') ).x;

这就是差异的来源，我需要将导入文件包装在().x;中，以使module.foo();正常工作，否则我的对象将如下所示：

并调用module.foo()会导致undefined，我理解为什么会这样做，但是尝试调用module.x.foo()会导致：

这没有意义，因为展开module.x会显示foo()。同样在导出中，为什么当我的对象已经是{x}对象时却需要封装我的对象，但是写入export x;会导致语法错误。我尝试了各种方法来获得所需的功能，而我的尝试是：

使用传播算子：

var {... module} = await import('./module.js');
module.x.foo();// function is accessible.

命名为export

//module.js
export {x as module};

//app.js
var {module} = await import('./module.js');

//Object name is tied to export declaration and not ideal.

最终，我来到这里是为了尽可能接近我想要的功能：

index.html

<!doctype html>

    <head>

        <script src=app/js/imp.js defer></script>
        <script type=module src=app/js/app.js defer></script>

    </head>

    <body></body>

</html>

imp.js

var imp = async file => {

    try {

        var exp = await import(file);

        return exp.x;

    }catch(err) {

        return err;

    }

};

app.js

(async () => {

    try {

        var module = await imp('./module.js');

        module.foo();
        module.bar();

    }catch(err) {

        throw(err);

    };

})();

module.js

var x = {};

x.foo = async () => {

    //Imaginary code here.

};

x.bar = async () => {

    //Imaginary code here.

};

export {x};

TLDR;

为什么import()是用这种方式创建的，并且有更好的方法弯曲import()使其表现得更像common.js（我很乐意与prototype混淆，但是不知道如何，是否可能）如何将export添加到object而不必更改我的写作风格。

P.S请不要包含“使用静态导入或框架”之类的答案。

ES模块动态import（）的差异

0 个答案: