解決した

create-react-appで作成したPythonとReactプロジェクト間で設定ファイルを共有する

フロントエンド

私はPythonとReactコードの間で設定ファイルを共有する必要があります - それぞれにインポートするのは簡単なJSONを使うことができますが、コメントを追加したり、部品をオン/オフすることができます。

このようなことをする良い方法は何ですか?


Progress 100%

一番いい

回答

フロントエンド

私はHJSON(人が読めるJSON)を試していましたが、HJSONのようなテキストファイルをReactビルドにバンドルすると、AFAIKは動作しません。create-react-appを出したり、webpackの設定を変更してrawローダーを使用したり、 react-app-rewiredと同様のことをする。

私は反応アプリ再配線を使用して巻き上げた -

まず、これらのライブラリをReactプロジェクトに追加します。

yarn add react-app-rewired
yarn add hjson
yarn add hjson-loader

次に、Reactプロジェクトのトップレベルにconfig-overrides.jsファイルを追加しconfig-overrides.jsこれは、その場でwebpack設定を変更します。

const { getLoader } = require('react-app-rewired');

function rewireAddHjson(config, env, options = {}) {
  const hjsonExtension = /\.hjson$/;
  const excludeRule = getLoader(config.module.rules, rule => rule.exclude);
  excludeRule.exclude.push(hjsonExtension);
  const hjsonRule = {
    test: hjsonExtension,
    loader: 'hjson-loader',
  };
  config.module.rules.push(hjsonRule);
  return config;
}

module.exports = function override(config, env) {
  config = rewireAddHjson(config, env);
  return config;
};

package.jsonでは "react-scripts"を "react-app-rewired"に置き換えます:

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test --env=jsdom",
+   "start": "react-app-rewired start",
+   "build": "react-app-rewired build",
+   "test": "react-app-rewired test --env=jsdom"
}

そして、Pythonであなたは言うことができます

import hjson
with open('app/client/src/assets/options.hjson') as f:
    options = hjson.load(f)

リアクションで言うことができる

import options from '../assets/options.hjson'; // a json object