javascript - 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 语句 中时，它给我一个错误，并显示 “导入必须位于顶层”。所以我尝试动态导出它们，但也无法做到。

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

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

解决方案(已编辑)

为了快速测试，我在 中创建了两个 .js 文件，分别名为 auth-development.js 和 auth-production.js >src/assets/js/filename.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 给出“路径未定义” 错误，我添加了代码的顶部部分来处理该错误。我使用 process.env.NODE_ENV 获取单词 development 和 product 添加我的 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 runserve 时，它会导入 auth-development.js 但如果我 npm run build 并尝试 >index.html 在实时服务器上的 dist 文件夹中，它仅导入 auth-production.js。

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

Answer 1

假设文件名为:auth-development.js和auth-product.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';