是否可以在使用 ES6 导入时将某些内容导入提供变量名称的module?
即我想在运行时根据配置中提供的值导入一些module:
import something from './utils/' + variableName;
是否可以在使用 ES6 导入时将某些内容导入提供变量名称的module?
即我想在运行时根据配置中提供的值导入一些module:
import something from './utils/' + variableName;
与import
声明无关。import
并且export
以它们可静态分析的方式定义,因此它们不能依赖于运行时信息。
您正在寻找loader API (polyfill),但我对规范的状态有点不清楚:
System.import('./utils/' + variableName).then(function(m) {
console.log(m);
});
虽然这实际上不是动态导入(例如,在我的情况下,我在下面导入的所有文件都将由 webpack 导入和捆绑,而不是在运行时选择),但我一直在使用的一种模式可能在某些情况下有所帮助:
import Template1 from './Template1.js';
import Template2 from './Template2.js';
const templates = {
Template1,
Template2
};
export function getTemplate (name) {
return templates[name];
}
或者:
// index.js
export { default as Template1 } from './Template1';
export { default as Template2 } from './Template2';
// OtherComponent.js
import * as templates from './index.js'
...
// handy to be able to fall back to a default!
return templates[name] || templates.Template1;
我不认为我可以使用 轻松回退到默认值require()
,如果我尝试导入不存在的构造模板路径,则会引发错误。
可以在此处找到 require 和 import 之间的良好示例和比较:http : //www.2ality.com/2014/09/es6-modules-final.html
关于从@iainastacio 重新导出的优秀文档:http ://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles
我很想听听关于这种方法的反馈:)
除了Felix 的回答之外,我还要明确指出ECMAScript 6 语法目前不允许这样做:
进口声明 :
导入 ImportClause FromClause ;
导入module说明 符;
FromClause :
- 来自module说明 符
module说明符 :
- 字符串字面量
甲ModuleSpecifier只能是一个串文字,而不是任何其他种类等的表达的AdditiveExpression。
有一个新规范,称为ES module的动态导入。基本上,你只要打电话import('./path/file.js')
就可以了。该函数返回一个Promise,如果导入成功,该Promise将与module一起解析。
async function importModule() {
try {
const module = await import('./path/module.js');
} catch (error) {
console.error('import failed');
}
}
用例包括React、Vue等的基于路由的组件导入以及延迟加载module的能力,一旦它们在运行时需要。
这是对Google Developers的解释。
据MDN 称,目前所有主流浏览器(IE 除外)都支持它,caniuse.com在全球市场份额中显示 87% 的支持。再次不支持 IE 或非铬边缘。
我了解import
Node.js 中专门针对 ES6 提出的问题,但以下内容可能会帮助其他人寻找更通用的解决方案:
let variableName = "es5.js";
const something = require(`./utils/${variableName}`);
请注意,如果您要导入 ES6 module并需要访问default
导出,则需要使用以下选项之一:
let variableName = "es6.js";
// Assigning
const defaultMethod = require(`./utils/${variableName}`).default;
// Accessing
const something = require(`./utils/${variableName}`);
something.default();
您还可以通过这种方法使用解构,这可能会增加您对其他导入的语法熟悉度:
// Destructuring
const { someMethod } = require(`./utils/${variableName}`);
someMethod();
不幸的是,如果您既要访问default
又要解构,则需要分多个步骤执行此操作:
// ES6 Syntax
Import defaultMethod, { someMethod } from "const-path.js";
// Destructuring + default assignment
const something = require(`./utils/${variableName}`);
const defaultMethod = something.default;
const { someMethod, someOtherMethod } = something;