我需要做一些类似的事情:
if (condition) {
import something from 'something';
}
// ...
if (something) {
something.doStuff();
}
上面的代码不能编译;它抛出SyntaxError:…“import”和“export”只能出现在顶层。
我尝试使用系统。导入如下所示，但我不知道系统来自哪里。是ES6提案最终没有被接受吗?那篇文章中的“程序化API”链接把我扔到了一个废弃的文档页面。
当前回答
我们现在有ECMA的动态进口建议。这是第三阶段。这也可作为babel预设。
以下是根据您的情况进行条件渲染的方法。
if (condition) {
import('something')
.then((something) => {
console.log(something.something);
});
}
这基本上返回了一个承诺。决议的承诺是有预期的模块。该建议还具有其他功能，如多个动态导入，默认导入，js文件导入等。您可以在这里找到关于动态导入的更多信息。
其他回答
我们现在有ECMA的动态进口建议。这是第三阶段。这也可作为babel预设。
以下是根据您的情况进行条件渲染的方法。
if (condition) {
import('something')
.then((something) => {
console.log(something.something);
});
}
这基本上返回了一个承诺。决议的承诺是有预期的模块。该建议还具有其他功能，如多个动态导入，默认导入，js文件导入等。您可以在这里找到关于动态导入的更多信息。
Require()是一种在运行时导入某些模块的方法，如果与字符串文本路径一起使用，它同样有资格进行静态分析。这是捆绑器为捆绑包选择依赖项所必需的。
const defaultOne = require('path/to/component').default;
const NamedOne = require('path/to/component').theName;
对于具有完整静态分析支持的动态模块解析，首先在索引器(index.js)中索引模块，然后在主机模块中导入索引器。
// index.js
export { default as ModuleOne } from 'path/to/module/one';
export { default as ModuleTwo } from 'path/to/module/two';
export { SomeNamedModule } from 'path/to/named/module';
// host.js
import * as indexer from 'index';
const moduleName = 'ModuleOne';
const Module = require(indexer[moduleName]);
你不能有条件地进口，但你可以做相反的事情:有条件地出口。这取决于您的用例，所以这种方法可能不适合您。
你可以:
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的情况下，它需要初始化。
在eval中隐藏它对我有用，在静态分析器中隐藏它……
if (typeof __CLI__ !== 'undefined') {
eval("require('fs');")
}
如果你使用动态导入Webpack模式，重要的区别是:
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(...);
}
