ECMAScript: import()不能传入变量？

描述

// fulfilled
import('./index.jsx');
// rejected
const uri = './index.jsx';
import(uri)

解决方案

1. webpack 编译es6 动态引入 import() 时不能传入变量，例如import(dir) , 而要传入字符串 import(‘path/to/my/file.js’)，这是因为webpack的现在的实现方式不能实现完全动态。

2. 虽然import()方法在es规范中是支持动态引入的，但是webpack的实现是并不支持。
   
   例如import(foo)，这样完全动态的加载方式将会失败，因为webpack需要一些文件位置信息。因为变量foo可能是系统或项目中任何文件的路径。import()必须至少包含关于模块所在位置的一些信息，因此让捆绑可以局限于特定的目录或文件夹。

3. import(./${myFile}.jsx)这种写法解决了import不能传入变量的问题。
   注意：
   ${myFile}变量前边一定要写一个带"/"的字符串。
   “.jsx” 不能写在变量里，要写在字符串里。
   评论

参考

1. 来自segmentfault的解决方案