Vue - 为生产模式删除特定的 JavaScript 文件

Question

我有很多.js文件要导入到我项目的 Vue 组件中。 其中一些 JavaScript 文件用于开发模式，它们不会包含在生产中，但我不允许在项目中删除这些文件。 例如;

有两个名为authDev.js和authProd.js的 JavaScript 文件。 它们的用法基本相同，但内容各不相同。 在这些 JavaScript 文件中有函数，我将它们导出以便能够导入多个 Vue 组件。

第一个问题，如果我动态导出或导入它们，当我运行npm run build时，webpack 会包含这些文件吗？ 换句话说，假设我创建了一个 JavaScript 文件，但我没有导出它，所以我也没有将它导入到任何地方。 webpack 是否理解这个 JavaScript 文件没有在这些 Vue 项目的任何地方使用，并在将我的项目构建到生产环境时丢弃它？ 或者它是否包括项目中存在的每个文件？

第二个问题，有没有办法告诉 webpack 那些 JavaScript 文件不会包含在 dist 文件夹中，这些将......我的意思是，我可以指定用于开发和生产的文件吗？

首先我认为我可以根据条件导入或导出它们，但是当我尝试将我的导入放入if statements时，它给了我一个错误并说"imports must be at the top level" 。 所以我尝试动态导出它们，但也做不到。

然后我尝试删除文件中的特定代码块。 有一些包和插件可以从 Vue 项目中删除每个控制台输出，但我找不到任何可以删除或丢弃特定代码行的东西。

最后，我决定采用一种包含和排除特定文件的方法。 有办法吗？ 如果是，我该怎么做？ 提前致谢。

解决方案（编辑）

为了进行快速测试，我在src/assets/js/filename.js位置创建了两个名为auth-development.js和auth-production.js的.js文件。 这是它们的内容；

auth-production.js

export const auth = {
    authLink: "http://production.authlink/something/v1/",
    authText: "Production Mode"
}

auth-development.js

export const auth = {
    authLink: "http://localhost:8080/something/v1/",
    authText: "Development Mode"
}

然后我修改了vue.config.js文件中的 webpack 配置；

const path = require('path');

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
              'conditionalAuth': path.resolve(__dirname, `src/assets/js/auth-${process.env.NODE_ENV}.js`)
            }
          }
    }
  }

Vue 给出了"path is undefined"错误，我添加了代码的顶部来处理该错误。 我使用process.env.NODE_ENV来获取development和production字样以添加我的 javascript 文件的末尾，以便我可以定义它们的路径。

然后我将这个conditionalAuth动态导入到一个名为"HelloWorld"的测试组件中，如下所示；

<script>
import * as auth from 'conditionalAuth';

export default {
  name: 'HelloWorld',
  data(){
    return {
      auth: auth
    }
  }
}
</script>

我像这样使用它们；

<template>
  <div>
    <p>You are in the {{ auth.auth.authText}}</p>
    <p>{{ auth.auth.authLink }}</p>
  </div>
</template>

这样，当我npm run serve时，它会导入auth-development.js但如果我npm run build并尝试在实时服务器上的dist文件夹中使用index.html ，它只会导入auth-production.js 。

最后，当我检查最终构建时， auth-development.js不是为我的项目的 dist 版本构建的。 它只在块中导入生产 javascript 文件。

Answer 1

假设文件名为： auth-development.js和auth-production.js ，您可以使用 webpack alias根据环境导入文件。

 resolve: {
    alias: {
      'conditionalAuth': path.resolve(__dirname, `path/to/js/auth-${process.env.NODE_ENV}.js`)
    },
    extensions: ['.js', '.vue', '.json']
  }

那么您应该能够导入所需的文件，例如：

import * as auth from 'conditionalAuth';