스캐폴딩, 핫 리프레시, 핫 로딩

이번에는 스캐폴딩, 핫 리프레시, 핫 로딩에 대한 주의사항을 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

Webpack은 매우 강력하며 합리적인 스캐폴딩을 통해 지루하고 의미 없는 작업을 많이 줄일 수 있습니다. 그 중 핫 리프레시와 핫 로딩은 기존 개발에 비해 개발 속도를 크게 향상시킵니다.

스캐폴딩에서 핫 새로 고침과 핫 로딩의 차이점을 알아보세요

대부분의 vue 개발자는 vue-cli로 시작한다고 생각합니다. 많은 초보자가 vue 프로젝트를 즐겁게 실행하지만 vue-cli 구성을 마음대로 변경할 수는 없습니다. webpack은 실제로 매우 복잡하며 vue-cli도 초보자를 위한 경험을 최적화하기 위해 많은 작업을 수행했습니다.

반대로, React는 상대적으로 견고한 스캐폴딩을 제공하지 않습니다(적어도 제가 분명히 발견한 것은 아닙니다. 여러분이 제게 깨달아주셨으면 좋겠습니다). 내가 아는 한, 그 중 하나는 yeoman의 Generator-react-webpack, React의 create-react-app 및 좋은 React-starter-kit(핫 로딩, 많이 참조되는 많은 코드 통합)입니다.
React를 배울 때 위에서 언급한 처음 두 개의 React 스캐폴드가 핫 로딩이 아닌 핫 새로 고침을 제공한다는 것을 발견했습니다.

핫 로딩과 핫 새로 고침의 간단한 구분:

핫 새로 고침: 파일이 내부적으로 변경된 후 어떤 상태도 유지하지 않고 전체 페이지가 새로 고쳐집니다(예: 콘텐츠가 입력된 입력 양식). 새로고침
핫 로딩: 파일이 변경된 후 변경된 영역이 최소한의 비용으로 변경됩니다. 파일을 변경하기 전 상태를 유지해 보세요(입력 내용 입력 후 다른 태그의 코드 수정)

둘 다 기존 개발(수동 F5)에 비해 개발 경험이 향상되었지만 둘 사이에는 여전히 차이점이 있습니다. 매우 규모가 크며, 특히 프로젝트가 더욱 복잡해짐에 따라 우리는 이 문제를 완전히 해결해야 합니다(버그 개발에 더 많은 시간을 투자).

직접 수정

처음부터 구성하는 것은 또 다른 영역이므로 vue-cli에서 직접 변경을 시작합니다.

다음 단계는 영감 참조를 위한 핵심 항목만 나열합니다. 자세한 내용은 최종 github 전체 프로젝트를 참조하세요

1. vue 관련 종속성, 파일 등을 삭제하면 전체 scr이 삭제될 수 있습니다. package.json 종속성 babel-loader 추가 webpack-dev-server React-hot-loader (가장 중요)

2. package.json 명령줄 설정 "dev": "webpack-dev-server --inline --progress - -config build/webpack .dev.conf.js"

3. webpack.base.conf .jsx 파일 추가는 babel-loader로 처리해야 하며 옵션 구성: {plugins:['react-hot-loader/babel' ]}

4. 반응할 babelrc 사전 설정을 추가하고 아래 플러그인을 추가하세요: ['react-hot-loader/babel']

5. src 폴더에 main.js를 생성하세요(이름은 항목과 일치해야 합니다) webpack으로 구성된 파일)

6. import 'core-js/fn/object/assign';
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { hot } from 'react-hot-loader';
   import App from './pages/App'; // 自己写吧
   import './assets/css/reset.scss';
   // Render the main component into the dom
   ReactDOM.render(<App/>, document.getElementById('app'));
   export default hot(module)(App); // 热加载的关键

   이제 우리는 즐겁게 React를 사용하여 핫 로딩의 즐거움을 경험할 수 있습니다~

문제

사실 우리는 vue-cli에서 main.js 파일을 간단히 수정합니다. 관련 코드에 반응하고( jsx 를 처리하도록 babel을 구성하는 것을 잊지 마세요) 여전히 핫 새로 고침을 수행합니다. 로컬 코드를 관찰하고 비교한 결과 매력적인 이름을 찾았습니다.

webpack.dev.conf 파일에서:

new webpack.HotModuleReplacementPlugin()

온라인에서 검색한 결과 이것이 핫 로딩을 구현하는 핵심이라는 것을 알았습니다. 이 특성은(즉, 세 가지 주요 프레임워크가 재사용 가능한 구성 요소를 작성할 수 있는 한 프레임워크가 이러한 특성을 활용할 수 있음을 의미함) 코드를 연결하거나 분리하여 핫 로딩을 달성할 수 있습니다.

반응의 jsx 특수 효과는 HotModuleReplacementPlugin으로 처리할 수 없으며 핫 새로 고침만 가능합니다.

이 경우, React-hot-loader가 나올 예정입니다. 공식적인 사용 방법에 따라 계속해서 핫 리로딩을 사용할 수 있습니다.

ps: 참고용으로 저도 많은 리액트 코드를 탐색하고 학습하고 있습니다

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 관련 기사를 주목해 주세요. PHP 중국어 웹사이트!

추천 자료:

axios의 302 상태 코드

Vue2 라우팅 탐색 후크를 캡슐화하고 실제 전투에서 사용

위 내용은 스캐폴딩, 핫 리프레시, 핫 로딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!