최소화 없이 React의 실제 버전을 구축하는 방법은 무엇입니까?

최소화 없이 React의 실제 버전을 구축하는 방법은 무엇입니까?

배경

react를 사용하여 로컬 개발 환경을 설정하기 위해 공식 가이드를 거의 따라왔는데create-react-app셋업도 많이 되고요.

, 이제 ★★★★★★★★★★★★★★★★★★★★★★★★★★★」npm run build모든 정보를 상세하게 볼 수 있습니다.build더입 if if if 。단, run run run run run run run run run run run run run run run run 。npm start 서비스 은 변경되지 것 .JS는 JS를 사용합니다.이데올로기 때문에

질문.

어느 쪽인가 하면,

• " " " " 에서 생성된 수 ?npm start 안된 것 ( )build여기서 수정되지 않습니다.)
• 어떻게 라도 도망칠 수 요?npm run build최소화되지 않은 파일을 사용하여 "개발"이 이루어집니까?

시도하다

저의 목표는 리액트 스크립트의 최소화되지 않은 버전에 접근하는 것입니다.

마지막 질문에 대해서는 이 질문에서 제시된 바와 같이 몇 가지 파라미터와 비결정변수를 시도했지만 실패하였습니다.

$ NODE_ENV=dev npm run build --dev --configuration=dev

> example-project@0.1.0 build [...]
> react-scripts build

Creating an optimized production build...
[...]

시스템.

★★★package.json에는 기본 스크립트가 있습니다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

---

주의: 왜 그러는지 묻거나 나쁘다고 설득하지 마세요.디버깅이나 이 특정 사용 사례 등 다양한 이유가 있습니다.

웹 팩 구성 및 빌드 스크립트를 변경하려면 create-react-app에서 이젝트하거나(향후 호환성이 깨지기 때문에 이 스텝은 권장하지 않습니다) rewire 등의 도구를 사용하여 일부 설정을 덮어씁니다.

이좀좀 봐봐봐봐 。
https://github.com/timarney/react-app-rewiredhttpsgithub.com/timarney/

저는 개인적으로 리와이어를 사용했습니다.

npm i rewire --save-dev

여기 제가 과거에 만든 프로젝트 중 하나에서 작성한 샘플 설정이 있습니다.그것은 꽤 잘 동작했습니다.

1. build.js
2. 패키지를 변경합니다.build.module이 실행되도록 json을 설정합니다.

build.displaces를 실행합니다.

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

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.output.filename = '[name].js';
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename = '[name].css';
config.plugins[5].options.publicPath = '../';

그럼 제 소포에 넣어주세요.json i는 npm 스크립트 링크를 다음과 같이 변경했습니다(build.disc 스크립트를 실행하는 노드 빌드).

패키지.json

"scripts": {
    "start": "react-scripts start",
    "build": "node build && gulp",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

따라서 create-react-app에서 이젝트하려면 실행하기만 하면 됩니다.

npm run-script eject

그러면 create-react-app에서 사용되는 모든 설정이 포함된 새 폴더가 나타납니다.

단, 앞에서 설명한 바와 같이 rewire를 사용하지 않고 이젝트하지 않고 설정을 덮어쓸 필요가 없습니다.

Angular로 고쳐 쓰는 일을 하면서 React 앱의 해독되지 않은 코드를 원했다(크기의 5%와 의존성의 1%를 훨씬 더 쉽게 만들어낸다).

React를 사용한 적은 없지만 파일을 수정하여 알게 되었습니다.

<base_path>/node_module/module-module/config/webpack.config.module.module.module

module.displays 아래의 큰 최적화 설정 항목을 다음과 같이 바꿉니다.

module.exports = {...

    optimization: {
            minimize: false,
            splitChunks: {
                chunks: 'all',
                name: true
            },
            runtimeChunk: true
        },

npm은 다른 수정 사항을 사용하지 않고 예상대로 실행된 해독되지 않은 판독 가능한 빌드 코드를 실행합니다.npm install 명령어, npm run build 명령어, npm start 명령어만으로 Gitbash를 사용하였습니다.누군가 도움이 될 것 같아서요.

당신이 원하는 코드가 아직 웹팩 평가판에 싸여있기 때문에 나는 이것을 추천하지 않는다.소스에서 유용한 부분을 선택하거나 앱을 재구축하는 것이 더 쉽습니다.기껏해야 클러스터 반응과 웹 팩이 무엇인지 봐야 합니다.

소스 파일을 볼 수 없는 이유는 무엇입니까?다음은 제가 시도하고자 하는 것입니다.

1. 을 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★npm run start
2. 를 열어주세요.http://localhost:3000
3. 개발자 도구를 열고 webpack-dev 서버에서 생성된 청크 번들을 검사합니다.Mac의 Chrome에서는 다음을 수행할 수 있습니다.cmd+option+j개발자 도구가 열립니다.그런 다음 sources 탭을 클릭합니다.이 탭에는 react의 빌드 구성에 의해 작성된 번들이 표시됩니다.이 번들의 출력은 그다지 좋지 않을 수 있지만 모두 갖추어져 있습니다.

어플리케이션의 구성 " " "에되어 있습니다.webpack.config.js(''을 사용하는 경우에도)create-react-app이 설정은 노드 모듈 내에서만 캡슐화되기 때문입니다.따라서 이 파일을 꺼내지 않고 직접 편집할 수 있습니다.<base_path>/node_modules/react-scripts/config/webpack.config.js다만, 기존의 설정이 깨지지 않게 주의할 필요가 있습니다.은 아마 이 일을 예요.source-map★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★이는, 해 재인스톨 할 수 .react-scripts초기 설정으로 돌아갑니다.또한 '반안전' 샌드박스 환경에서 커스터마이징을 할 수 있습니다.명심해, 마법이란 건 없어create-react-app빌드 구성에 유용한 기본 설정만 제공합니다.

마지막으로 @xzesstence에서 지적했듯이 react-app-rewired 모듈을 사용해 볼 수 있습니다.

그게 도움이 됐으면 좋겠네요!

파일은 ( rewire 등의 수를합니다.writeToDiskWebpack DevServer webpack documents 。

, 파일 /는, 「」/「」로 하면 할 수 .webpack-dev-server서버 아래에 있는 엔드포인트.

예를 들어 localhost:3000에서 기본 URL을 사용하는 경우 다음 URL을 사용하여 서버상의 모든 파일을 표시합니다.

http://localhost:3000/webpack-dev-server

그러나 실제로 필요한 것은 index.html(일반적으로 JS 파일을 로드하는 stub일 뿐)과 다음 3개의 JS 파일과 각각의 소스 맵파일입니다.

1. main.disc.disc.disc.discs
2. bundle.module을 클릭합니다.
3. 벤더~main.devel.devel

페이지의 링크를 마우스 오른쪽 버튼으로 클릭하여 저장하거나 직접 링크를 탐색하거나 Chrome Dev Tools "sources" 탭에서 가져올 수 있습니다.

일반적으로 코드 변경의 경우 main.chunk.js 파일만 업데이트되므로 평균 코드 변경의 경우 업데이트된 main.chunk.js 및 main.chunk.js.map 파일만 가져올 수 있습니다.

건 이걸 .npm i -D cra-build-watch.

저는 이 라이브러리가 과소평가되고 있다고 생각합니다만, 리액트 앱의 변경 사항을 지켜보기만 할 뿐, 패키지 전체를 재구축하는 것은 반복하지 않습니다.

재배선은 빌드를 최소화하는 데 도움이 되지만, 여전히 빌드의 전체 과정을 반복해서 거칩니다.

이 문제에 대해 하루 종일 고민했지만, 생산 코드의 미공개 버전을 입수할 방법을 찾을 수 없었습니다.

크롬에서 개발 도구를 열고 sources 탭으로 이동하여 javascript 파일을 찾습니다(create-react-app에서는 보통 static > js > main.js).

javascript 파일이 보이면 화면 왼쪽 하단에 한 쌍의 물결 괄호가 나타납니다(이미지 참조).

개발 도구의 스크린샷

곱슬곱슬한 괄호를 클릭하면 코드가 아름답게 표시되고, 그 후 코드에 브레이크 포인트를 추가하고(줄의 번호를 클릭), 페이지를 갱신하고 디버거를 시작할 수 있습니다.그 코드를 다루는 것은 편리하지 않지만, 지금으로서는 그것이 나에게 효과가 있었습니다.

도움이 됐으면 좋겠네요

언급URL : https://stackoverflow.com/questions/55165466/how-to-build-a-production-version-of-react-without-minification