node.js 中的 ES6 变量导入名称？

Question

is it possible to import something into module providing variable name while using ES6 import?

Ie I want to import some module at a runtime depending on values provided in a config:

import something from './utils/' + variableName;

Answer 1

Not with the import statement. import and export are defined in such a way that they are statically analyzable, so they cannot depend on runtime information.

You are looking for the loader API (polyfill) , but I'm a bit unclear about the status of the specification:

System.import('./utils/' + variableName).then(function(m) {
  console.log(m);
});

Answer 2

Whilst this is not actually a dynamic import (eg in my circumstance, all the files I'm importing below will be imported and bundled by webpack, not selected at runtime), a pattern I've been using which may assist in some circumstances is:

import Template1 from './Template1.js';
import Template2 from './Template2.js';

const templates = {
  Template1,
  Template2
};

export function getTemplate (name) {
  return templates[name];
}

or alternatively:

// 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;

I don't think I can fall back to a default as easily with require() , which throws an error if I try to import a constructed template path that doesn't exist.

Good examples and comparisons between require and import can be found here: http://www.2ality.com/2014/09/es6-modules-final.html

Excellent documentation on re-exporting from @iainastacio: http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles

I'm interested to hear feedback on this approach :)

Answer 3

In addition to Felix's answer , I'll note explicitly that this is not currently allowed by the ECMAScript 6 grammar :

ImportDeclaration :

• import ImportClause FromClause ;

• import ModuleSpecifier ;

FromClause :

• from ModuleSpecifier

ModuleSpecifier :

• StringLiteral

A ModuleSpecifier can only be a StringLiteral , not any other kind of expression like an AdditiveExpression .

Answer 4

There is a new specification which is called a dynamic import for ES modules. Basically, you just call import('./path/file.js') and you're good to go. The function returns a promise, which resolves with the module if the import was successful.

async function importModule() {
   try {
      const module = await import('./path/module.js');
   } catch (error) {
      console.error('import failed');
   }
}

Use cases

Use-cases include route based component importing for React, Vue etc and the ability to lazy load modules , once they are required during runtime.

Further Information

Here's is an explanation on Google Developers .

Browser compatibility (April 2020)

According to MDN it is supported by every current major browser (except IE) and caniuse.com shows 87% support across the global market share. Again no support in IE or non-chromium Edge.

Answer 5

I understand the question specifically asked for ES6 import in Node.js, but the following might help others looking for a more generic solution:

let variableName = "es5.js";
const something = require(`./utils/${variableName}`);

Note if you're importing an ES6 module and need to access the default export, you will need to use one of the following:

let variableName = "es6.js";

// Assigning
const defaultMethod = require(`./utils/${variableName}`).default;

// Accessing
const something = require(`./utils/${variableName}`);
something.default();

You can also use destructuring with this approach which may add more syntax familiarity with your other imports:

// Destructuring 
const { someMethod } = require(`./utils/${variableName}`);    
someMethod();

Unfortunately, if you want to access default as well as destructuring, you will need to perform this in multiple steps:

// 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;

Answer 6

you can use the non-ES6 notation to do that. this is what worked for me:

let myModule = null;
if (needsToLoadModule) {
  myModule = require('my-module').default;
}

Answer 7

I less like this syntax, but it work:
instead of writing

import memberName from "path" + "fileName"; 
// this will not work!, since "path" + "fileName" need to be string literal

use this syntax:

let memberName = require("path" + "fileName");

Answer 8

Dynamic import() (available in Chrome 63+) will do your job. Here's how:

let variableName = 'test.js';
let utilsPath = './utils/' + variableName;
import(utilsPath).then((module) => { module.something(); });

Answer 9

I had similar problem using Vue.js : When you use variable in import(variableName) at build time Webpack doesn't know where to looking for. So you have to restrict it to known path with propriate extension like that:

let something = import("@/" + variableName + ".js") 

That answer in github for the same issue was very helpful for me.

Answer 10

./utils/test.js

export default () => {
  doSomething...
}

call from file

const variableName = 'test';
const package = require(`./utils/${variableName}`);
package.default();

Answer 11

I would do it like this

function load(filePath) {
     return () => System.import(`${filePath}.js`); 
     // Note: Change .js to your file extension
}

let A = load('./utils/' + variableName)

// Now you can use A in your module

Answer 12

It depends. You can use template literals in dynamic imports to import a file based on a variable.

I used dynamic imports to add .vue files to vue router. I have excluded the Home.vue view import.

const pages = [
  'About',
  ['About', 'Team'],
]

const nodes = [
  {
    name: 'Home',
    path: '/',
    component: Home,
  }
]
for (const page of pages) {
  if (typeof page === 'string') {
    nodes.push({
      name: page,
      path: `/${page}`,
      component: import(`./views/${page}.vue`),
    })
  } else {
    nodes.push({
      name: _.last(page),
      path: `/${page.join('/')}`,
      component: import(`./views/${_.last(page)}.vue`)
    })
  }
}

This worked for me. I was using yarn + vite + vue on replit.