web-dev-qa-db-ja.com

create-react-appを使用するときにカスタムビルド出力フォルダーを使用する

Facebookはcreate-react-appcommand を提供して、反応するアプリを構築します。 npm run buildを実行すると、/buildフォルダーに出力が表示されます。

npm run build

本番用のアプリをビルドフォルダーにビルドします。プロダクションモードでReactを正しくバンドルし、最高のパフォーマンスを得るためにビルドを最適化します。

ビルドは縮小され、ファイル名にはハッシュが含まれます。アプリをデプロイする準備ができました！

出力に/buildの代わりにカスタムフォルダーを使用するにはどうすればよいですか？ありがとう。

reactjscreate-react-app
43
6324

現在の構成オプションでビルド出力フォルダー名を変更することはできません。

また、すべきではありません。これは react-create-appの背後にある哲学 の一部です：彼らはConvention over Configurationと言います。

本当にフォルダの名前を変更する必要がある場合、2つのオプションが表示されます。

  1. ビルドプロセスが終了した直後に、ビルドフォルダーの内容を別のフォルダーにコピーするコマンドを作成します。たとえば、 copyfiles npmパッケージを試してください 、または同様のことができます。

  2. eject-create-app を試し、設定を微調整することができます。

    ビルドツールと構成の選択に満足できない場合は、いつでも取り出すことができます。このコマンドは、プロジェクトから単一のビルド依存関係を削除します。

    代わりに、すべての構成ファイルと推移的な依存関係（Webpack、Babel、ESLintなど）をプロジェクトに直接コピーして、それらを完全に制御できるようにします。取り出しを除くすべてのコマンドは引き続き機能しますが、コピーされたスクリプトを指すので、微調整できます。この時点で、あなたは一人でいます。

    ただし、これは一方向の操作であることに注意することが重要です。一度取り出したら、戻ることはできません！今後の更新はすべて失います。

したがって、可能であれば、カスタムフォルダの命名を使用しないことをお勧めします。デフォルトの命名法に固執するようにしてください。オプションでない場合は、＃1を試してください。それでも特定のユースケースで機能せず、本当に選択肢が足りない場合は、＃2をご覧ください。幸運を！

27
Kaloyan Kosev

Package.jsonを編集します。

"build": "react-scripts build && mv build webapp"
50
Félix

Create-react-appバージョン2+回答

Create-react-appの最近の（> v2）バージョン（および可能性のある古いバージョン）の場合、次の行をpackage.jsonに追加してから再構築します。

"homepage": "./"

これで、build/index.htmlにサーバールート./static/...へのリンクではなく、相対リンク/static/...が表示されるはずです。

16
Malcolm Dwyer

フェリックスの答えは正解であり、賛成です。 Dan Abramov自身 によってバックアップされています。

ただし、出力自体の構造（buildフォルダー内）を変更する場合は、postbuildの後に自動的に実行されるbuildを使用してビルド後のコマンドを実行できます。 ] _スクリプトはpackage.jsonファイルで定義されています。

以下の例では、static/からuser/static/に変更し、関連するファイルのファイルを移動してファイル参照を更新します（ full Gist here ）：

package.json

{
  "name": "your-project",
  "version": "0.0.1",
  [...]
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "./postbuild.sh",
    [...]
  },
}

postbuild.sh

#!/bin/bash

# The purpose of this script is to do things with files generated by
# 'create-react-app' after 'build' is run.
# 1. Move files to a new directory called 'user'
#    The resulting structure is 'build/user/static/<etc>'
# 2. Update reference on generated files from
#    static/<etc>
#     to
#    user/static/<etc>
#
# More details on: https://github.com/facebook/create-react-app/issues/3824

# Browse into './build/' directory
cd build
# Create './user/' directory
echo '1/4 Create "user" directory'
mkdir user
# Find all files, excluding (through 'grep'):
# - '.',
# - the newly created directory './user/'
# - all content for the directory'./static/'
# Move all matches to the directory './user/'
echo '2/4 Move relevant files'
find . | grep -Ev '^.$|^.\/user$|^.\/static\/.+' | xargs -I{} mv -v {} user
# Browse into './user/' directory
cd user
# Find all files within the folder (not subfolders)
# Replace string 'static/' with 'user/static/' on all files that match the 'find'
# ('sed' requires one to create backup files on OSX, so we do that)
echo '3/4 Replace file references'
find . -type f -maxdepth 1 | LC_ALL=C xargs -I{} sed -i.backup -e 's,static/,user/static/,g' {}
# Delete '*.backup' files created in the last process
echo '4/4 Clean up'
find . -name '*.backup' -type f -delete
# Done
7
Wallace Sidhrée

Ben Carp および WallaceSidhrée による回答に基づく：

これは、ビルドフォルダー全体をwampパブリックフォルダーにコピーするために使用します。

package.json

{
  "name": "[your project name]",
  "homepage": "http://localhost/[your project name]/",
  "version": "0.0.1",
  [...]
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./post_build.ps1",
    [...]
  },
}

post_build.ps1

Copy-Item "./build/*" -Destination "C:/wamp64/www/[your project name]" -Recurse -force

ホームページ行は、サーバーのサブフォルダーに展開する場合にのみ必要です（ この回答 別の質問から参照）。

1
gcoulby

Windows Powershellスクリプト

//package.json
"scripts": {
    "postbuildNamingScript": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./powerShellPostBuildScript.ps1",


// powerShellPostBuildScript.ps1
move build/static/js build/new-folder-name 
(Get-Content build/index.html).replace('static/js', 'new-folder-name') | Set-Content 
build/index.html
"Finished Running BuildScript"

PowerShellでnpm run postbuildNamingScriptを実行すると、JSファイルが 'build/new-folder-name'に移動し、HTMLから新しい場所をポイントします。

1
Ben Carp

フォルダーの名前を変更してビルドの出力場所を変更したいというシナリオがあり、最新バージョンのpackage.jsonのコードの下で使用しました
"build"： "react-scripts build && mv build ../my_bundles"、

0
Jaison

アプリケーションのソース内でコマンドプロンプトを開きます。コマンドを実行する

npm run eject

scripts/build.jsファイルを開き、「use strict」行の後にファイルの先頭に追加します

'use strict';
....
process.env.PUBLIC_URL = './' 
// Provide the current path
.....

enter image description here

config/paths.jsを開き、エクスポートオブジェクトのbuildAppプロパティを宛先フォルダーに変更します。 （ここでは、 'react-app-scss'を宛先フォルダーとして提供しています）

module.exports = {
.....
appBuild: resolveApp('build/react-app-scss'),
.....
}

enter image description here

走る

npm run build

注：プラットフォーム依存スクリプトの実行はお勧めできません

0
Vignesh M

ルートディレクトリの下で、ちょっとしたハックで設定を更新できます。

  1. npm run eject
  2. config/webpack.config.prod.js-行61-パスを次のように変更します：__dirname + './../--your directory of choice--'
  3. config/paths.js-68行目-resolveApp（ './--お好みのディレクトリ-'）への更新

--your directory of choice--をビルドするフォルダーディレクトリに置き換えます

指定したパスは少し汚れている可能性がありますが、構成を変更するために必要なことはこれだけです。

0
Jerry Lin