如何实现同时兼容Webpack与Vite的可选依赖动态导入？

最近我开发库的时候碰到个棘手的问题：我的库有个可选依赖，原本打算用try/catch配合动态导入来处理，代码大概是这样的：

let someModule = null;
try {
  someModule = await import("may-not-exist"); // Webpack 和 Vite 都会报错
} catch (e) {
  // 忽略错误
}

// ... 后续检查 someModule 是否为 null

结果发现Webpack和Vite都会对导入做静态分析，只要这个依赖不存在，构建直接失败，这可太麻烦了。

一开始我查了Webpack的解决办法，就是在导入里加/* webpackIgnore: true */注释：

someModule = await import(/* webpackIgnore: true */ "may-not-exist"); // Webpack 正常了，但 Vite 还是不行

这招对Webpack管用，但Vite根本不吃这一套。后来我又找到适配Vite的方法——把模块路径改成动态的，比如封装个函数：

const tryImport = async (path) => {
  try {
    return await import(path); // Vite 不报错了，但 Webpack 又出问题
  } catch (e__ignored) {
    // 依赖不存在时返回 null
    return null;
  }
};
const someModule = await tryImport("may-not-exist");

这下Vite倒是没报错了，可Webpack虽然不会抛出致命错误，但一直弹出烦人的警告：

Critical dependency: the request of a dependency is an expression

而且我试过把/* webpackIgnore: true */加到函数里的导入或者参数前面，都没法消除这个警告，看来Webpack对动态导入的路径要求很严格，必须是静态可识别的才行。

那问题来了：怎么才能让我的库同时兼容Webpack和Vite，还不用让用户修改他们的构建配置来压制这些警告或错误呢？

最终解决方案 #

多亏了@Andrei Gătej的思路，我找到了完美兼容两者的方法：只需要把模块名赋值给一个变量（这就足以让Vite停止静态检查），同时在导入语句里加上Webpack的忽略注释就行，代码如下：

let someModule;
const moduleName = "may-not-exist"; // 让 Vite 跳过静态分析
try {
  someModule = await import(/* webpackIgnore: true */ moduleName);
} catch (e) {
  // 忽略依赖不存在的错误
}

// ... 后续检查 someModule 是否为 null

这样一来，Webpack会因为注释忽略这个导入的静态检查，Vite则因为路径是变量而不做强制解析，两边都能正常工作，也不用麻烦用户改配置啦！

备注：内容来源于stack exchange，提问作者Aayla Secura