import both and do the conditional

Question

Views

App.js

Original

import x from 'project/a'

can it be

var project = 'a'

if(project == 'a')
{
   import x from 'project/a'
}
else
{
   import x from 'project/b'
}

or could it use

var project = 'a'
var filepath = '';

if(project == 'a')
{
   filepath = 'project/a';
}
else
{
   filepath = 'project/b';
}

import x from filepath

about 4 years ago · Juan Pablo Isaza

Answer question

Answer 1 · 2022-07-05T10:03:18.308Z

You could either:

Imagine one file with codes of projectA and projectB and conditional.

import initProjectA
import initProjectB

if (condition) {
  initProjectA()
} else {
  initProjectB()
}

this will be compiled down into something like:

function initProjectA() {
}

function initProjectB() {
}

if (condition) {
  //
}

dynamic imports:

This will produce 3 separate files: projectA, projectB, conditional.

import(module).then(importedModule => {
  importedModule.default() // assuming you did `export default`
})

conditional file will only load either one of them then execute it.

You might have to change some configurations to be able to do dynamic imports. You can search for the topic "webpack dynamic imports" on Google.