Question

我们想从React和webpack创建bundle.js，其中包含每个构建配置并可用于React代码，但我们不确定如何执行此操作。

这个想法是做一些像：

npm run build -- config="config123.json"

然后让生成的bundle.js包含该配置，以便根容器可以使用它。类似的东西：

import React from 'react';
import ReactDOM from 'react-dom';
import RootContainer from './containers/main-container';

ReactDOM.render(
    <RootContainer config={configPassedByBuildProcess}/>, 
    document.getElementById('app')
);

这是否可能，如果可行，我们应该如何处理？

Answer 1

不，我不相信你可以在构建时传递一个文件，据我所知，唯一可以传递的是一个类似ENV变量的字符串。您可以像这样导入config123.json文件

import React from 'react';
import ReactDOM from 'react-dom';
import RootContainer from './containers/main-container';
import config from '/path/to/config123.json'
ReactDOM.render(
    <RootContainer config={config}/>, 
    document.getElementById('app')
);

您可能需要JSON加载程序来导入JSON文件

Answer 2

经过一些实验，我发现的解决方案是使用Webpack的DefinePlugin，因为这提供了一种在webpack构建阶段进行字符串替换的方法。

在我的React代码中我定义了：

// Will be substituted by webpack's DefinePlugin. Not an error.
const bundleConfig = BUNDLE_CONFIG;

然后在我的webpack.config.js我首先加载我的配置（现在硬编码）：

// The path can be pulled in via 'process.args' and parsed as appropriate
const bundleConfig = fs.readFileSync('bundle-config/default-config.json', 'UTF-8');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
        'BUNDLE_CONFIG': bundleConfig
    })
  ]
}

请注意，如果由于某种原因我们想要使用缺少或未定义的bundleConfig进行构建，那么正确的替换可能是字符串（而不是关键字）'undefined'，以保持代码有效，这样： / p>

const bundleConfig = 'undefined';

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
        'BUNDLE_CONFIG': bundleConfig
    })
  ]
}

还有一件事是package.json的配置（仅限脚本部分）：

{
    "scripts": {
        "build": "run() { NODE_ENV=production && webpack -p $1; }; run",
    }
}

当我们调用时，允许传递到webpack.conf.js脚本的路径：

 npm run build /path/to/config.json

React，webpack和使用每个构建json创建一个包？

2 个答案: