Can We Import ES6 Modules with Dynamic Variable Names?

Customizing ES6 Module Imports with Variable Variable Names

Introduction:

In ES6, the import statement allows us to import modules and provide default exports with specific names. However, can we assign a variable name to an imported module based on runtime values?

Question:

Is it possible to import modules with variable names during runtime using the ES6 import statement, similar to this pattern:

<code class="javascript">import something from './utils/' + variableName;</code>

Answer:

Unfortunately, this syntax is not valid for ES6 import statements. Imports and exports in ES6 are statically analyzable and cannot depend on runtime information.

Alternative Approach:

To achieve dynamic import behavior, you can utilize the loader API (polyfill), which offers a method called 'System.import'. This method takes a module specifier as an argument and returns a promise that resolves to the imported module:

<code class="javascript">System.import('./utils/' + variableName).then(function(m) {
  console.log(m);
});</code>

Note that the compatibility and support for the loader API vary across different platforms and browsers.

The above is the detailed content of Can We Import ES6 Modules with Dynamic Variable Names?. For more information, please follow other related articles on the PHP Chinese website!