javascript - 导入模块的最佳实践是什么？

Question

大多数时候我导入如下所示的模块。

import * as fs from "fs"

const Reporter = {
    createDirectory: (dir) => {
        if (!fs.existsSync(dir)) {
            mkdirp.sync(dir)
        }
    }
}

但我看到一些开发人员/教程在函数调用中导入模块，或者仅在所需的方法上导入模块，如下所示。

const Reporter = {
    import * as fs from "fs"

    createDirectory: (dir) => {
        if (!fs.existsSync(dir)) {
            mkdirp.sync(dir)
        }
    }
}

1. 哪一个是最佳实践？
2. 这两种方式的优点/缺点是什么？

Answer 1

第二种方式(在Reporter的声明中)是不正确的语法。

静态导入语句始终必须位于模块的顶部。

也许您将静态导入与动态导入混淆了。动态导入在变量声明中就可以了，看起来像这样，例如:

const Reporter = {
    createDirectory: (dir) => {
        import("fs").then(fs => {
            if (!fs.existsSync(dir)) {
                mkdirp.sync(dir)
            }
        });
    }
}

使用动态模块的好处是可以使用像webpack这样的工具来做code splitting ，即将初始 javascript 包的大小优化为首次呈现页面时所需的代码。仅在需要时才从其他包异步加载动态导入。

如果您不使用代码分割，则根据 Mozilla Developer Network documentation 推荐使用静态导入。 .