この記事の概要

1. 背景

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

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

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

のようだった

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';

■コードの意味

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

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