Question

我有一个Node脚本，该脚本多次使用fs.readFileSync来读取文件系统上存在的各种JSON5配置文件。根据ENV变量中的某些条件，可以读取，组合，操作，附加这些内容。该文件的输出是通过module.exports的JavaScript对象。

我希望每次运行Webpack构建过程并使该捆绑包中的输出JS对象都可用时对该脚本进行评估，因此当我的客户端React脚本执行import { foo, bar } from 'config';时，这些值可以由客户代码。

这似乎是装载机可以解决的问题，但我一直无法使它们中的任何一个正常工作。

如何在Webpack编译期间评估Node脚本并将其导出对已编译的客户端代码可用？

Answer 1

正如我在对您的问题的评论中所说，在Webpack中处理config的惯用方式是使用DefinePlugin，因此在您的情况下，这意味着在webpack config中进行配置处理。然后，Webpack会自动就地处理配置变量的插值，并且您不需要使用import语句来引入配置。像这样：

// webpack.config.js
const webpack = require("webpack");
const config = require("./process-config")

module.exports = {
  // ...
  plugins: [
    webpack.DefinePlugin({
      config
    })
  ]
};

// app.js
if (config.SOME_CONFIG_VAR) {
  // do work when SOME_CONFIG_VAR=true
}

话虽如此，另一种与您要查找的内容相吻合的方法可能是使用val-loader，它是一种装载程序

执行给定的模块，并在捆绑包中需要该模块时返回构建时的执行结果

[source]

使用val-loader可能类似于：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /config.js$/,
        use: [{ loader: "val-loader" }]
      }
    ]
  }
}

// config.js
const config = require("./process-config.js");
const JSON = require("json5");

module.exports = {
  code: `module.exports = "${JSON.stringify(config)}"`
}

// app.js
const config = require("./config.js");

if (config.SOME_CONFIG_VAR) {
  // do work when SOME_CONFIG_VAR=truet
}

如何在Webpack构建期间评估Node脚本并将其内容提供给编译后的代码？

1 个答案: