有条件地导入Vue中条件存在的文件答案

【问题标题】：Conditionally import conditionally existing file in Vue有条件地导入Vue中条件存在的文件
【发布时间】：2021-09-02 17:55:31
【问题描述】：

我需要在设置环境变量时将文件导入到我的项目中，比如dist/built.esm.js。暗示当设置环境变量时，该文件将存在，否则它可能存在也可能不存在。在检查环境变量的 if 语句中包装对 import 的调用似乎很简单，但即使 if 语句从未通过，Vue 也会抛出以下警告：

还有代码：

if (process.env.VUE_APP_USE_COMPILED == 'true') {
    const compiledPackage = require('./dist/built.esm.js')
    Vue.use(compiledPackage)
}

以不确定的方式将 if 语句设置为始终为 false（设置字符串 var，然后将其与不同的值进行比较，而不仅仅是 if (false)）会导致相同的问题，这排除了环境的任何可能性变量不应该是“真”。

我发现的一个临时解决方法是将导入包装在 try/catch 中，这会显示警告而不是错误：

我怎样才能完全摆脱错误和警告？如果文件不存在但环境变量已设置为 true，我确实希望它仍然出错，但如果语句尚未执行，它不应该失败或在编译时发出警告。

【问题讨论】：

@LawrenceCherone 很好。我更新了示例代码和屏幕截图以正确导入。

标签： node.js vue.js webpack vuejs2 dynamic-import

【解决方案1】：

这行得通吗？

if (process.env.VUE_APP_USE_COMPILED == 'true') {
  import('dist/built.esm.js')
    .then(obj => Vue.use(obj))
    .catch(err => console.log(err));
}

【讨论】：

不幸的是：（我认为import() 和require() 非常相似，它们的差异与导致此问题的原因无关

【解决方案2】：

但如果语句尚未执行，它不应该在编译时失败或警告

编译发生在执行之前。如果您收到编译错误，这意味着在您的代码执行之前出了问题，包括任何条件。

我相信这里发生的事情是您正在使用 webpack，并且它试图在您的包中包含 dist/built.esm.js。在幕后，webpack 实际上用一些魔法替换了require。 ~~要解决这个问题，请改用__non_webpack_require__~~

您可以尝试在 webpack 配置中使用 DefinePlugin 设置编译时常量，可能类似于

plugins: [
    new webpack.DefinePlugin({
        // this is resolved compile-time
        USE_COMPILED: process.env.VUE_APP_USE_COMPILED == 'true'
    })
]

然后，在你的代码中

if (USE_COMPILED) require('./dist/built.esm.js')

如果你的环境变量设置为'true'，这里USE_COMPILED的值应该被webpack编译时替换为true，否则false。

【讨论】：

很好的答案，但它似乎在 Vue 中不起作用。我现在在运行时收到Uncaught ReferenceError: require is not defined。我相信这是因为 require 是 NodeJS 的一部分并且在浏览器中不可用。
哦，我没有看到您找到了解决方案。无论如何更新了我的答案，并从你的答案中学到了一些东西！ ^_^

【解决方案3】：

我自己设法解决了这个问题。当文件不存在时，我在 Webpack 配置中使用了 resolve.alias 属性来允许“软失败”。我将导入更改为使用别名 (my-compiled-package-alias)，这将有条件地解析为构建文件或空的虚拟文件 (dev/import-dummy.js)。我不得不使用 resolve.alias 而不是 resolve.fallback，因为 Vue2 使用不包含后一个属性的 Webpack v4。

我更新的代码：

if (process.env.VUE_APP_USE_COMPILED == 'true') {
    const compiledPackage = require('my-compiled-package-alias')
    Vue.use(compiledPackage)
}

在我的vue.config.js：

module.exports = {
  ...
  configureWebpack: {
    resolve: {
      alias: {
        "my-compiled-package-alias":
          process.env.VUE_APP_USE_COMPILED ? "./dist/built.esm.js": "./import-dummy.js"
      }
    }
  },
  ...
}

【讨论】：