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

Posted 2023-03-07

【中文标题】Vue - 删除生产模式的特定 JavaScript 文件

【英文标题】：Vue - Remove specific JavaScript files for production mode

【发布时间】：2021-10-21 07:06:04

【问题描述】：

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

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

第一个问题，如果我动态导出或导入它们，webpack在我运行npm run build时会包含这些文件吗？换句话说，假设我创建了一个 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 文件。

【问题讨论】：

您可以使用 require 而不是 import 来使用条件或动态导入。如果条件始终为假，它将不包含在捆绑包中

你能举个例子还是有我可以阅读的文件？

在这里查看答案***.com/questions/56083969/…

我想了解的是，在这个答案中，导入是基于条件的，如果不满足这个条件，则根本不导入组件。在这种情况下，webpack 会继续构建这个组件用于生产还是会丢弃它？

这取决于一个条件。这不是特定于 Webpack 而是特定于未显示的设置。是 Vue CLI 还是？

【参考方案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';

【讨论】：

这似乎是合乎逻辑的。我会尽力让你知道。感谢您的回复。

我用这种方式导入.js文件。我也尝试了 .json 格式，它可以工作。但是同样的逻辑不适用于 Vue 组件。我尝试使用与 comp-$process.env.NODE_ENV.vue 相同的方式在 vue.config 中创建一个新别名，但它不起作用。我错过了什么吗？

我更新了我的答案，将extensions 属性添加到解析对象。看看有没有帮助。

我添加了 extensions 属性，只是为了举个例子，我添加了以下内容；条件组件：path.resolve(__dirname, src/components/component-$process.env.NODE_ENV.vue)。创建了两个 vue 组件并将它们导入，就像在您的答案 import * as myComp from "conditionalComponent" 中一样，我将 myComponent 放在组件中：。当我使用 myComponent 时，Vue 正在寻找 conditionalComponent 但它不是在寻找 component-development.vue 或 component-production.vue（我的示例 vue 组件的名称）