【React】ビルドフォルダを変更したい

この記事の概要

• npm run buildでReactで開発したファイルをビルドするとき、現在ディレクトリのbuildフォルダ配下にファイルが作成される
• このbuildフォルダの名前や配置を変更できないかと思った
• 【結果】現在ディレクトリの.envファイルにBUILD_PATH={フォルダ名}を入力すると変更できる

1. 背景

Reactのビルドを行うと現在ディレクトリにbuildフォルダとその配下にビルド後のファイルが生成される
ふと、buildフォルダの名前やパスを変更できないか気になり、ソースコードを確認した

2. 調査

1. 実行ファイルの確認
Reactビルド時にはreact-scripts buildが実行されている

$ npm run build

> src@0.1.0 build
> react-scripts build

node_moduleフォルダ配下にreact-scriptsとbuildを起動しているプログラムがありそう

$ find ./node_modules/ -name react-scripts

./node_modules/.bin/react-scripts
./node_modules/react-scripts

コードを確認したところ、

• ./node_modules/.bin/react-scripts：エントリーポイント
• ./node_modules/react-scripts配下：実行

のようだった

2. プログラムの確認
node_modules/react-scripts/scripts/build.jsからbuildフォルダを指定している箇所を確認する

build.js

const buildFolder = path.relative(process.cwd(), paths.appBuild);

110行目に変数buildFolderを発見
pathsファイルのappBuildを使用しているっぽい

paths.js

appBuild: resolveOwn(path.join('../..', buildPath))

buildPath変数の定義を確認

paths.js

const buildPath = process.env.BUILD_PATH || 'build';

■コードの意味

• process.env：現在ディレクトリの.envファイル内の環境変数を使用するプログラム
• ~.BUILD_PATH：.envファイル内のBUILD_PATH変数の値を参照
• ~.BUILD_PATHがundefinedなら'build'をパスとする

調査結果

現在ディレクトリに.envファイルを作成し、BUILD_PATH={フォルダ名}と入力すれば、buildフォルダの名前やパスを変更できそう

3. 実践

1. BUILD_PATHを指定しない場合(デフォルトの場合)

■実行前

.
├── node_modules
├── public
├── package-lock.json
├── package.json
└── src

■実行後
直下に作成された

.
├── build
│   └── static
├── node_modules
├── public
├── package-lock.json
├── package.json
└── src

2. srcフォルダ配下に作成する
.envファイルにパスを入力

.env

BUILD_PATH=src/build2

名前もbuild2に変更

■実行前

.
├── .env
├── node_modules
├── public
├── package-lock.json
├── package.json
└── src

■実行後
src配下に生成された

.
├── .env
├── node_modules
├── public
├── package-lock.json
├── package.json
└── src
    └── build2
        └── static

4. まとめ

• Reactのビルドではnode_modules/react-scripts/scripts/build.jsを実行している
• 実行時に.envのBUILD_PATHを参照し、入力されていなければ./buildにビルドファイルを作成する
• 現在ディレクトリの.envファイルにBUILD_PATH={フォルダ名}を入力すると、ビルドフォルダの名前やパスを変更できる