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

Question

当环境变量被设置时，我需要导入一个文件到我的项目中，例如 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（设置字符串变量，然后将其与不同的值进行比较，而不仅仅是if(false)）会导致相同的问题，这排除了环境变量在不应该为true时却为true的任何可能性。

我找到的一个临时解决方法是在try/catch中包装import，这样可以显示警告而不是错误：

我该如何完全消除错误和警告？如果文件不存在但环境变量已设置为true，仍然希望出现错误，但在语句尚未执行时不应在编译时失败或发出警告。

- Spooky

---

@LawrenceCherone 很好的发现。我更新了我的示例代码和截图以正确导入。 - Spooky

Answer 1

但如果语句尚未执行，编译时不应该失败或警告。编译发生在执行之前。如果出现编译错误，这意味着在执行代码之前就出了问题，包括任何条件语句。我认为这里发生的是你正在使用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')

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

- kraxor

---

回答不错，但在Vue中似乎无法工作。现在运行时出现“未捕获的引用错误：require未定义”。我认为这是因为require是NodeJS的一部分，在浏览器中不可用。 - Spooky

哦，我没看到你已经找到了解决方案。不过我还是更新了我的答案，并且也从你那里学到了一些东西！^_^ - kraxor

Answer 2

这个可以工作吗？

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

- brice

---

很遗憾不是这样的 :( 我认为import()和require()非常相似，它们的区别与导致这个问题的原因无关。 - Spooky

Answer 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"
      }
    }
  },
  ...
}

- Spooky