web-dev-qa-db-ja.com

create-react-appにREACT_APP接頭辞なしでdotenv変数を挿入する方法は？

レガシーReactアプリから標準create-react-appに移行するプロジェクトがあります（排出されません）。

レガシープロジェクトでは、dotenvおよび.envを含むdotenv-expandファイルを手動でロードし、webpack DefinePluginを介して挿入します。

create-react-appはdotenvを直感的にサポートしますが、REACT_APP_接頭辞が付いた変数のみを認識できます。

レガシーコードには、process.env.xxx変数を使用している他のリポジトリにインポートされたパッケージと同様に非常に多くの場所があるため、移行前にプレフィックスを付けて名前を変更することは今のところ不可能です。

この場合、create-react-appプレフィックスのないdotenv変数をREACT_APP_に認識させるにはどうすればよいですか？

ところで、私は前にrewireビルドスクリプトを試しましたが、jsとcssをバンドルするなど、webpackを介していくつかの簡単なカスタマイズを行いました。

const path = require('path');
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');

let webpackConfig = defaults.__get__('config');

webpackConfig.output.filename = 'static/js/[name].js';
webpackConfig.optimization.splitChunks = { cacheGroups: { default: false } };
webpackConfig.optimization.runtimeChunk = false;
webpackConfig.plugins.find(plugin => plugin.__proto__.constructor.name === 'MiniCssExtractPlugin').options.filename = 'static/css/[name].css';
webpackConfig.plugins.find(plugin => plugin.__proto__.constructor.name === 'MiniCssExtractPlugin').options.moduleFilename = () => 'static/css/[name].css';

しかし、dotenvとDefinePluginはより複雑なようです。それが同じ方法で達成できるかどうかはわかりません。

reactjswebpackcreate-react-appdotenv
2
Mike

数年前 Dan Abramov（CRAの共同作成者）は、変数を再定義してエントリポイントスクリプトにREACT_APP_を合わせ、package.jsonのreact-scriptsを呼び出すことを提案しました。

NetlifyのCOMMIT_REFやGitlabのCI_COMMIT_SHAなどのCIプラットフォーム変数など、これらの変数をサポートする必要がある場合は、別のスクリプトを追加せずにこれらの変数をインラインで設定できます。

  "scripts": {
    "start": "react-scripts start",
    "build": "REACT_APP_COMMIT_SHA=$COMMIT_REF$CI_COMMIT_SHA react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

これはREACT_APP_COMMIT_SHAを、それが組み込まれているサービスのハッシュの値に設定します（他の変数は空になるため）。

0
Jeff Puckett