create-react-app을 사용할 때 사용자 지정 빌드 출력 폴더 사용

create-react-app을 사용할 때 사용자 지정 빌드 출력 폴더 사용

은 Facebook을 합니다.create-react-app 리액트 앱을 빌드하는 명령어.달릴 때npm run build은 '보다 낫다'에서 볼 수 /build더입니니다다

npm 빌드 실행

프로덕션용 앱을 빌드 폴더에 빌드합니다.프로덕션 모드에서 React를 올바르게 번들하고 최고의 성능을 위해 빌드를 최적화합니다.

빌드가 최소화되고 파일 이름에 해시가 포함됩니다.앱을 배포할 준비가 되었습니다!

instead instead instead instead instead instead instead instead 가 아닌 /build력에대??? ??감사해요.

★★★★★★★★★★★★★★★★ react-scripts >= 4.0.2이는 공식적으로 지원됩니다.

을 Create React App으로 합니다./build「」에 /src이 변수를 사용하여 Create React App이 자산을 출력할 새 경로를 지정할 수 있습니다. BUILD_PATH프로젝트 루트에 상대적인 경로로 지정해야 합니다.

// package.json
  "scripts": {
    "build": "BUILD_PATH='./dist' react-scripts build",
    // ...
  },

또는 프로젝트의 루트에 .env 파일을 추가합니다.

# .env
BUILD_PATH='./dist'

주의: 에서 지정된 경로BUILD_PATH, 할 때 다시 한 번 하세요.환경변수가 올바르게 지정되어 있는지, 특히 연속연동을 사용하는 경우 다시 한 번 확인합니다.

패키지를 편집합니다.json:

"build": "react-scripts build && mv build webapp"

Create-React-app 버전 2+ 응답

최근 (> v2) 버전의 create-react-app(및 오래된 버전도 포함)의 경우 패키지에 다음 행을 추가합니다.json, 그럼 재구축해.

"homepage": "./"

index.에는 build/index.html에 링크가 있습니다../static/...루트에 과 같이 지정합니다./static/....

:: " " " " "BUILD_PATH방금 v4.0.2에 도달했습니다.t_dom93의 답변을 참조하십시오.

현재 구성 옵션으로는 빌드 출력 폴더 이름을 변경할 수 없습니다.

더군다나, 그러면 안 돼.이것은 Configuration보다 Configuration이라고 하는 철학의 일부입니다.

폴더 이름을 변경해야 할 경우 다음 두 가지 옵션이 표시됩니다.

1. 빌드 프로세스가 완료되면 빌드 폴더 내용을 원하는 다른 폴더에 복사하는 명령을 작성합니다.예를 들어 npm 패키지 또는 이와 유사한 패키지를 사용해 볼 수 있습니다.

2. create-react-app을 꺼내고 설정을 조정할 수 있습니다.

빌드 도구 및 구성 선택이 만족스럽지 않은 경우 언제든지 꺼낼 수 있습니다.이 명령은 프로젝트에서 단일 빌드 종속성을 제거합니다.

대신 모든 구성 파일과 전이 종속성(Webpack, Babel, ESLint 등)을 프로젝트에 직접 복사하여 사용자가 이들을 완전히 제어할 수 있도록 합니다.eject를 제외한 모든 명령어는 계속 작동하지만 사용자가 조정할 수 있도록 복사된 스크립트를 가리킵니다.이쯤에서 넌 혼자야

단, 이것은 단방향 조작이라는 점에 주의해 주십시오. 한 번 꺼내면 돌아갈 수 없어!향후 업데이트 내용을 모두 삭제했습니다.

따라서 가능하면 사용자 지정 폴더 이름을 사용하지 않는 것이 좋습니다.기본 이름을 그대로 사용합니다.옵션이 아닌 경우 #1을 사용해 보십시오.그래도 특정 사용 사례에 맞지 않고 선택지가 없는 경우 #2를 참조하십시오.행운을 빕니다.

원원의 BUILD_PATH방금 v4.0.2에 도달했습니다.

BUILD_PATH to 에 variable 。.envbuild다음 중 하나:

// .env file
BUILD_PATH=foo 

모든 이 " " " 에 됩니다.foo더입니니다다

Félix의 답변은 정확하고, Dan Abramov 자신이 뒷받침한 투표보다 우세하다.

, 출력는( 「 」내) 「 」 「 」 「 」 「 」build를 사용하면 후 를 실행할 수 .postbuildbuild에서 package.jsonfilename을 클릭합니다.

는 '보다 낫다'에서 '보다 낫다'로 .static/로로 합니다.user/static/, 파일 이동 및 관련 파일 참조 업데이트(여기서 전체 개요):

패키지.json

{
  "name": "your-project",
  "version": "0.0.1",
  [...]
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "./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

폴더 이름 변경 및 빌드 출력 위치 변경 등의 시나리오를 패키지의 아래 코드를 사용했습니다.최신 버전의 json

"build": "react-scripts build && mv build ../my_bundles"

다음은 솔루션입니다.root에 .env를 작성한 후 이 행을 추가합니다.

BUILD_PATH=$npm_package_name-$npm_package_version

빌드 경로는 "name_of_app"-version"이 됩니다.

이러한 값은 패키지로 설정할 수 있습니다.json

{
  "name": "my-app",
  "version": "0.1.2",
...
}

Ben Carp와 Wallace Sidhré의 답변을 바탕으로 합니다.

이것은 빌드 폴더 전체를 wamp 공용 폴더에 복사하는 데 사용하는 것입니다.

패키지.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

홈페이지 행은 서버상의 서브폴더에 전개하는 경우에만 필요합니다(다른 질문의 답변 참조).

윈도우용 이동 명령이 작동하지 않았습니다.정적 폴더와 하위 폴더를 복사하지 않기 때문입니다.그래서 나는 'ROBOCOPY'를 사용해서 이 문제를 해결할 수 있었다.

"build": "react-scripts build && ROBOCOPY build ../my-relative-path/react-app /E",

빠른 호환성 빌드 스크립트(Windows에서도 사용 가능):

"build": "react-scripts build && rm -rf docs && mv build docs"

Linux와 Windows에서 모두 사용할 수 있는 답변을 찾고 계신 분은 다음 절차를 따르겠습니다.

이 항목을 에 추가합니다.scripts에 있어서의 섹션.package.json

"build": "react-scripts build && mv build ../docs || move build ../docs",

와 함께../docs빌드 폴더를 이동할 상대 폴더입니다.

크로스 env를 사용하는 것이 해결책입니다.

크로스 엔비 설치:

npm install cross-env

업데이트 대상:

"scripts": {
  "build": "cross-env BUILD_PATH='../yourCustomBuildFolder' react-scripts build",
}

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"

입니다.npm run postbuildNamingScriptin powershell은 JS 파일을 다음 주소로 이동합니다.build/new-folder-name새로운 장소를 가리키고 있습니다.index.html.

응용 프로그램 원본 내에서 명령 프롬프트를 엽니다.명령어 실행

npm 실행 이젝트

scripts/build.js 파일을 열고 '엄격 사용' 행 뒤에 파일 시작 부분에 추가합니다.

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

config/paths.js를 열고 대상 폴더로 내보내기 개체의 buildApp 속성을 수정합니다.(여기서 'react-app-scss'를 대상 폴더로 제공)

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

달려.

npm 빌드 실행

주의: 플랫폼에 의존하는 스크립트를 실행하는 것은 권장되지 않습니다.

다음 두 가지 가능성이 있습니다.

1. 변경 사항package.json스크립트 항목"build": "react-scripts build && mv build webapp"어디에webapp대상 폴더입니다.
2. 만들다.env파일을 루트 디렉토리에 저장하고 그 디렉토리에 빌드 대상 폴더의 새로운 정의를 삽입합니다(예: BUILD_PATH='./data')

루트 디렉토리의 작은 해킹을 사용하여 설정을 갱신할 수 있습니다.

1. npm 실행 이젝트
2. config/webpack.config.config.config.config.config.config.config.config.config.config.config.config.config.config.config.config.config.config.c
3. config/paths.js - line 68 - update to resolveApp ('/---선택한 디렉토리--')

--선택한 디렉토리를 빌드할 폴더 디렉토리로 바꿉니다.

제공된 경로가 다소 지저분할 수 있지만, 설정을 변경하려면 이 작업만 하면 됩니다.

webpack =>

Build to dist로 이름 변경

output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },

언급URL : https://stackoverflow.com/questions/41495658/use-custom-build-output-folder-when-using-create-react-app