1

我有一个 Node 脚本，它fs.readFileSync多次读取文件系统上存在的各种 JSON5 配置文件。根据 ENV 变量中的某些标准，这些被读入、组合、操作、附加等。该文件的输出是一个 JavaScript 对象，通过module.exports.

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

这似乎是加载程序可以解决的问题，但我无法让它们中的任何一个工作。

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

4

1 回答 1

2

正如我在对您的问题的评论中所说，在 webpack 中处理配置的惯用方式是 with DefinePlugin，因此在您的情况下，这意味着在您的 webpack 配置中进行配置处理。然后，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-loaderwhich 是一个加载器

执行给定的模块，并在构建时返回执行结果，此时该模块在包中是必需的

[来源]

使用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 is truthy
}
于 2019-04-06T14:20:11.807 回答