Javascript 用Web包中字段的值替换静态字段的对象

我有一个模块，如下所示：

let Info = {};

Info.VALUE_ONE = 123;
Info.VALUE_TWO = 456;
Info.VALUE_THREE = 789;

module.exports = Info;

我希望这个模块在编译后完全从代码中消失，并且在适用的情况下内联123、456和789的值-如何使用Webpack实现这一点？

一个解决方案是使用内联

信息。

到

。然后，要移除模块本身，您有两个选项

• 选项1：保留commonjs语法，并用于将模块转换为空对象。这种方法的警告是，我看不到任何删除模块引用的方法，因为webpack安全地假设

  require

  语句本身可能会产生副作用1

• 选项2：开始使用es6导入和导出，并利用网页包的功能。这将把info.js放在与其使用者相同的范围内，允许迷你们删除其代码（因为不会引用

  info

  对象）。您还需要通过

  npx webpack-r esm

因此，给定以下目录结构：

- index.js
- info.js
- webpack.config.js

这段代码应该提供您想要的（我使用代码段语法使它们可折叠-代码不可运行）

选项1的代码

//info.js
模块.出口{
价值1:123，
价值2:456，
价值三：789，
}
//index.js
const Info=require（“./Info”）
控制台日志（信息值）
//webpack.config.js
const Info=require（“./Info”）
const searchAndReplaceInfo=createSearchAndReplaceInfo（Info）
module.exports={
模式:"发展",，
条目：'./index.js'，
输出：{
文件名：“bundle.js”，
路径：_dirname
},
模块：{
规则：[
{
测试：path.resolve（uu dirname，'info.js'），
使用：“空加载程序”
}, {
排除：/\/node\u模块\/，
加载器：“字符串替换加载器”，
选项：{
多个：searchAndReplaceInfo
}
}
]
}
}
函数createSearchAndReplaceInfo（信息）{
返回Object.keys（Info）.map（key=>[key，Info[key]]）.map（toSearchAndReplace）
}
函数toSearchAndReplace（[键，值]）{
返回{
搜索：“信息”。+键，
替换：“”+值
}
}

听起来您可能想使用，它允许您在编译时内联全局值

webpack.config.js

plugins: [
  new webpack.DefinePlugin({
    Info: require('./info.js'),
  }),
  //...
]

---

例如，您的源代码将按如下方式进行转换：

来源

let value = null;

switch (value) {
  case Info.VALUE_ONE:
    //...
  case Info.VALUE_TWO:
    //...
  case Info.VALUE_THREE:
    //...
  default:
    //...
}

输出

let value = null;

switch (value) {
  case 123: //...

  case 456: //...

  case 789: //...

  default: //...

}

---

你能在任何地方都参考信息吗？i、 e.不要将信息重新分配给另一个变量，并期望内联线传播。@AAAAA我不确定您的意思-是否将信息作为全局变量？当我需要信息时，它总是被放入一个叫做Info的变量中，如果这是你要问的，是的，这就是我的意思。我想到的解决方案的另一个警告是，您将无法执行

const{VALUE_ONE}=require（'path/to/info'）。让我来玩玩一些代码，然后我会发布一个答案。我最初尝试过这个方法-只有在您省略“const Info=require（'path/to/Info'）”的情况下才有效。我假设它试图变得聪明，而不是覆盖声明的变量。@aaaaaa不太确定你的意思是什么？即使
require
被分配给另一个变量，它也应该仍然有效。我的意思是，如果您试图内联的文件中有
const Info=require（'path/to/Info'）
，那么DefinePlugin不会覆盖信息，因为它被声明为常量。它似乎只覆盖未定义的全局变量。我明白了，你是对的。应用程序代码中不应使用
info
模块
webpack.DefinePlugin
发生在编译时，如果存在同名的局部作用域
Info
变量，则不会替换该变量。对-因此，如果OP可以使用隐式全局“Info”对象，则此解决方案是最简单的。使用方法1，我遇到了一个奇怪的错误。我的Info文件有如下条目：Info.TEST_ONE=123；和Info.TEST_TWO=456；替换结果为“123_-2”（来自“Info.TEST_-ONE”），这为无效的JS带来了一个错误幸运的是-它看起来与下划线有关，如果不复制，我无法分辨，但我假设它与数据相关（即
信息的内容
）。字符串替换加载程序不应该有什么神奇的事情发生，搜索/替换逻辑是