react.js 는 웹 팩 을 사용 하여 환경 에 맞 는 입문 튜 토리 얼 을 사용 합 니 다.

8524 단어 react.jswebpack환경.
본 고 는 react.js 가 웹 팩 을 사용 하여 환경 에 맞 는 입문 강 좌 를 소개 하고 여러분 에 게 공유 하 며 자신 에 게 도 필 기 를 합 니 다.
직접 개발 하고 싶다 면,이러한 조합 환경의 번 거 로 운 과정 을 뛰 어 넘 고 싶다 면,공식 create-react-app 명령 을 사용 하 는 것 을 추천 합 니 다.

npm install -g create-react-app //  create-react-app    npm node.js      ，         node.js
create-react-app my-app //  create-react-app  ，my-app     
cd my-app/ //  my-app  
npm start //
지금 엽 니 다.http://localhost:3000/ 초기 화면 을 볼 수 있 습 니 다.
 나 는 공식 적 으로 이 비 계 를 가지 고 다 니 는 것 을 그다지 원 하지 않 는 다.왜냐하면 그것 의 웹 팩 설정 이 너무 복잡 하기 때문이다.나 는 비교적 우둔 하고 잘 알 지 못 하기 때문에 큰 신 이 철저하게 연구 하여 공유 할 수 있 기 를 바란다.
어떻게 create-react-app 내부 의 웹 팩 설정 파일 을 압축 해제 합 니까?

npm run eject
소스 코드
매번 튜 토리 얼 을 볼 때마다 나 는 먼저 종목 을 뛰 어 올 린 후에 다시 한 마디 코드 로 이해 하 는 것 을 좋아한다.하면,만약,만약...

git clone https://github.com/lingjiawen/HelloReact.git
cd HelloReact/
npm install
npm run dev
1.프로젝트 구조 만 들 기
HelloReact 라 는 이름 의 새 폴 더
제 가 쓰 는 IDE 는 Sublime 입 니 다.
이 폴 더 에서 프로젝트 구 조 를 이렇게 구성 합 니 다:

|--app   //    
 |--components   //    
 |---Hello.jsx
 |--main.js   //    
|--build   //  build  
 |--index.html   //  html
|--.babelrc   //babel        

|--package.json  //npm    ，          
|--webpack.config.js  //webpack
build/index.html 에서 다음 코드 를 복사 합 니 다:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ReactDemo1</title>
 </head>
 <body>
 <!--  React     -->
 <div id="main">
 </div>
 <script src="bundle.js"></script>
 </body>
</html>
React 코드 는 main 에 삽입 되 어 있 으 며,bundle.js 는 webpack 패키지 로 생 성 된 js 파일 입 니 다.여기 서 먼저 다음 글 을 기록 하고 돌아 오 면 알 수 있 습 니 다.
package.json 에 다음 코드 를 입력 하 십시오:
모든 주석 을 입력 하지 마 세 요!

//package.json
{
 "name": "HelloReact",  //    
 "version": "1.0.0",  //    
 "main": "webpack.config.js", 
 "scripts": {
 "start": "webpack",  //npm start   
 },
 "author": "",   //  
 "license": "ISC",
 "devDependencies": {
 //     
 "babel-core": "^6.25.0",
 "babel-loader": "^7.1.1",
 "babel-plugin-react-transform": "^2.0.2",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-react": "^6.24.1",
 "react": "^15.6.1",
 "react-dom": "^15.6.1",
 "react-transform-hmr": "^1.0.4",
 "webpack": "^3.4.1",
 },
 "description": "",
 "dependencies": {
 //     

 }
}
웹 팩 설정 파일 웹 팩.config.js 에 다음 코드 를 입력 하 십시오.

var webpack = require('webpack');//  Webpack  ，        ES5    


module.exports = {
 entry: __dirname + "/app/main.js",//      
 output: {
 path: __dirname + "/build",//    bundle.js       
 filename: "bundle.js" //       
 },
 module: {
 //loaders   
 loaders: [
  {
  test: /\.(js|jsx)$/, //  loaders             ， jsx js  
  loader: 'babel-loader' //loader   
  }
 ]
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin()//       
 ]
};
.babelrc 는 babel 변환기 의 설정 파일 로 es6 코드 를 es5 코드 로 변환 할 수 있 고 react 문법 변환 도 지원 합 니 다.
.babelrc 에 다음 코드 를 입력 하 십시오:

//.babelrc
{
 "presets": [
 "react",
 "es2015"
 ],
 "env": {
 "development": {
 "plugins": [
 [
  "react-transform",
  {
  "transforms": [
  {
  "transform": "react-transform-hmr",
  "imports": [
   "react"
  ],
  "locals": [
   "module"
  ]
  }
  ]
  }
 ]
 ]
 }
 }
}
app/coponents/Hello.jsx 에 다음 코드 를 입력 하 십시오.

import React from 'react'; //  react

//     ：         
class Hello extends React.Component {
 render() {
 return (
  <div>Hello World!</div>
 )
 }
}

//    
export default Hello;
React 는 일반적인 JavaScript 대신 JSX 를 사용 합 니 다.
JSX 는 XML 처럼 보 이 는 JavaScript 문법 확장 입 니 다.
이것 은 자바 script 코드 에 XML 을 직접 쓰 는 문법 으로 보이 지만 실질 적 으로 문법 사탕 으로 모든 XML 라벨 은 JSX 변환 도구(예 를 들 어 babel)에 의 해 순수한 자바 script 코드 로 변 환 됩 니 다.
app/main.js 에 다음 코드 를 입력 하 십시오.

//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/Hello.jsx';

ReactDOM.render(
 <Hello />,
 document.getElementById('main')
);
2.운영 항목
명령 행 을 열 고 cd 를 HelloReact 폴 더 디 렉 터 리 로 실행 합 니 다.

npm install
이 명령 은 package.json 의 모든 의존 파일 을 설치 합 니 다.설치 가 완료 되면 실행 합 니 다:

npm start
npm start 명령 은 방금 package.json 에서 정의 한 것 입 니 다.

"scripts": {
 "start": "webpack",
 }
주:start 만 run 을 생략 할 수 있 고 다른 것 은 모두 run 을 추가 해 야 합 니 다.예 를 들 어 npm run dev;
build.js 에 bundle.js 파일 이 더 많은 것 을 발견 할 수 있 습 니 다.이것 은 웹 팩.config.js 에서 정의 하 는 포장 파일 입 니 다.

var webpack = require('webpack');//  Webpack  ，        ES5    

module.exports = {
 ……
 output: {
 path: __dirname + "/build",//    bundle.js       
 filename: "bundle.js" //       
 },
 ……
};
이 디 렉 터 리 의 index.html 를 열 면 다음 출력 이 성공 적 으로 실 행 된 것 을 볼 수 있 습 니 다.

3.열 교체 모듈 추가
프로젝트 는 이미 실행 할 수 있 습 니 다.그러나 매번 지 는 코드 는 npm start 로 포장 해 야 합 니 다.생각 만 해도 참 을 수 없습니다.이 는 webpack-dev-server 열 교체 모듈 을 사용 해 야 합 니 다.보 이 는 대로 얻 을 수 있 습 니 다.
사실 앞의 코드 에서 번 거 로 움 을 피하 기 위해 서 나 는 몰래 열 교체 모듈 의 부분 설정 을 넣 었 다.
webpack.config.js 의

……
plugins: [
 new webpack.HotModuleReplacementPlugin()//       
 ]
……
패키지 

 "devDependencies": {
 ……
 "babel-plugin-react-transform": "^2.0.2",
 "react-transform-hmr": "^1.0.4",
 "webpack-dev-server": "^2.6.1"
 ……
 }
그리고...babelrc 중 에...

"env": {
 "development": {
 "plugins": [
 [
  "react-transform",
  {
  "transforms": [
  {
  "transform": "react-transform-hmr",
  "imports": [
   "react"
  ],
  "locals": [
   "module"
  ]
  }
  ]
  }
 ]
 ]
 }
 }
이 코드 들 을 삭제 할 수 있 습 니 다.정상적으로 포장 하고 실행 할 수 있 습 니 다.열 로드 를 사용 하지 않 았 기 때 문 입 니 다.
그럼 지금 쓰 고 싶 은 데 어떻게 써 야 되 지?
간단 합 니 다.package.json 에 가입:

…… 
"scripts": {
 "start": "webpack",
 "dev": "webpack-dev-server"
 }
……
자,이제 npm run dev 를 실행 합 니 다.
localhost 열기:8080

어,왜 파일 목록 을 보 여 주 는 거 야?어 머,기본 경 로 를 설정 하지 않 았 구나.

…… 
"scripts": {
 "start": "webpack",
 "dev": "webpack-dev-server --contentBase='./build' "
 }
……
npm run dev 다시 실행:
 
앱 수정/연락처/Hello.jsx
 
저장 후 다시 페이지 로 돌아 가면 페이지 가 자동 으로 업 데 이 트 된 것 을 발견 합 니 다:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
JavaScript 가 구현 한 검색 및 하 이 라이트 디 스 플레이 기능 예제
JavaScript 변수 유형 및 변수 역할 영역 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage