import(变量)报错，找不到地址

在js中想要根据不同条件，动态import不同的包。尝试给import函数传入变量，发现报错找不到变量对应的包。本文会简短讲解该问题背后的原因，以及如何正确的引入包

问题再现📷

今天写代码，为了解决兼容性问题，不同版本引入不同的包

const pkgName = true ? pkg1 : pkg2;

// 动态引入
import(pkgName).then(callback);

结果发现报错，找不到pkg1

问题原因

🙅‍♂️webpack中不能使用完全动态的 import 语句
例如 import(foo)。是因为 foo 可能是系统或项目中任何文件的任何路径。

正确用法

🙆‍♂️import() 必须至少包含一些关于模块的路径信息。
打包可以限定于一个特定的目录或文件集，webpack打包时会都加入chunk，然后运行时得到结果，选择一种

例如， import(./locale/${language}.json) 会把 .locale 目录中的每个 .json 文件打包到新的 chunk 中。在运行时，计算完变量 language 后，就可以使用像 english.json 或 german.json 的任何文件。

// 想象我们有一个从 cookies 或其他存储中获取语言的方法
const language = detectVisitorLanguage();

import(`./locale/${language}.json`).then((module) => {
  // do something with the translations
});

参考webpack的中文文档：https://webpack.docschina.org/api/module-methods/

这篇好文章是转载于：学新通技术网