如何有条件地导入ES6模块？

Question

我需要做类似的事情:

if (condition) {
    import something from 'something';
}
// ...
if (something) {
    something.doStuff();
}

上面的代码没有编译; 它抛出SyntaxError: ... 'import' and 'export' may only appear at the top level.

我试着用System.import如图所示这里,但我不知道在哪里System的来了.是不是最终被接受的ES6提案？该文章中"programmatic API"的链接将我转储到已弃用的文档页面.

Answer 1

我们现在有ECMA的动态进口提案.这是在第3阶段.这也可以作为babel预设.

以下是根据您的情况进行条件渲染的方法.

if (condition) {
    import('something')
    .then((something) => {
       console.log(something.something);
    });
}

这基本上是一个承诺.承诺的解决方案预计将有模块.该提案还具有其他功能,如多个动态导入,默认导入,js文件导入等.您可以在此处找到有关动态导入的更多信息.

Answer 2

如果您愿意,可以使用require.这是一种具有条件require语句的方法.

let something = null;
let other = null;

if (condition) {
    something = require('something');
    other = require('something').other;
}
if (something && other) {
    something.doStuff();
    other.doOtherStuff();
}

Answer 3

你不能有条件地进口,但你可以做相反的事情:有条件地出口.这取决于您的使用案例,因此这项工作可能不适合您.

你可以做:

api.js

import mockAPI from './mockAPI'
import realAPI from './realAPI'

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

我用它来模拟像mixpanel这样的分析库...因为我目前不能有多个构建或我们的前端.不是最优雅,但有效.我只是在这里和那里有一些'if'取决于环境,因为在mixpanel的情况下,它需要初始化.

Answer 4

2020 更新

您现在可以将import关键字作为函数（即import()）调用以在运行时加载模块。

例子：

const mymodule = await import(modulename);

或者：

import(modulename)
    .then(mymodule => /* ... */);

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports

Answer 5

看起来答案是,截至目前,你不能.

http://exploringjs.com/es6/ch_modules.html#sec_module-loader-api

我认为目的是尽可能地启用静态分析,并且条件导入的模块会破坏它.另外值得一提的是 - 我正在使用Babel,我猜这System是Babel不支持的,因为模块加载器API没有成为ES6标准.

Answer 6

如果您使用动态导入 Webpack 模式，则重要区别eager：

if (normalCondition) {
  // this will be included to bundle, whether you use it or not
  import(...);
}

if (process.env.SOMETHING === 'true') {
  // this will not be included to bundle, if SOMETHING is not 'true'
  import(...);
}

Answer 7

JS 有条件导入和导出

const value = (
    await import(`${condtion ? `./file1.js` : `./file2.js`}`)
).default

export default value