React => 설치

간단한 설정

폴더 설정

이 예제는 코드가 src/ 있고 출력이 out/ 에 들어갈 것으로 가정합니다. 이와 같이 폴더 구조는 다음과 유사해야합니다.

example/
|-- src/
|   |-- index.js
|   `-- ...
|-- out/
`-- package.json

패키지 설정

설정 npm 환경을 가정 할 때, 먼저 React 코드를 es5 호환 코드로 바꾸기 위해 babel을 설정해야합니다.

$npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

위의 명령은 npack에게 webpack과 함께 사용할 기본 babel 라이브러리와 로더 모듈을 설치하도록 지시합니다. 또한 JSX 및 es6 모듈 코드를 이해하기 위해 es6 및 반응식 사전 설정을 설치합니다. (사전 설정에 대한 자세한 내용은 Babel 사전 설정에서 확인할 수 있습니다.)

$npm i -D webpack

이 명령은 webpack을 개발 종속성으로 설치합니다. ( i 는 설치의 줄임말이고 -D 는 --save-dev의 줄임말입니다)

또한 추가 webpack 패키지 (추가 로더 또는 webpack-dev-server 확장자)를 설치하려는 경우,

마지막으로 실제 반응 코드가 필요합니다.

$npm i -D react react-dom

웹팩 설정

의존성 설정을 통해 webpack.config.js 파일을 통해 webpack에게 무엇을 할 것인지 알려줄 것입니다.

간단한 webpack.config.js :

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

이 파일은 webpack에게 index.js 파일 (src /에 있다고 가정)로 시작하여 out 디렉토리의 단일 bundle.js 파일로 변환하도록 지시합니다.

module 블록은 webpack에게 정규 표현식에 대해 발생한 모든 파일을 테스트하도록 지시하고 일치하면 지정된 로더를 호출합니다. (이 경우 babel-loader ) 또한 exclude regex는 webpack에 node_modules 폴더의 모든 모듈에 대해이 특수 로더를 무시하도록 알려주기 때문에 추출 프로세스의 속도를 높이는 데 도움이됩니다. 마지막으로, query 옵션은 babel에 전달할 매개 변수를 webpack에 알려주고 이전에 설치 한 사전 설정을 전달하는 데 사용됩니다.

설정 테스트

이제 남아있는 것은 src/index.js 파일을 만들고 애플리케이션을 포장하는 것입니다.

src / index.js :

'use strict'

import React from 'react'
import { render } from 'react-dom'

const App = () => {
  return <h1>Hello world!</h1>
}

render(
  <App />,
  document. getElementById('app')
)

이 파일은 일반적으로 간단한 <h1>Hello world!</h1> 헤더를 'app'이라는 id로 html 태그에 렌더링하지만, 현재로서는 코드를 한 번만 번역하면 충분합니다.

$./node_modules/.bin/webpack . 로컬로 설치된 webpack 버전을 실행합니다 (-g를 사용하여 webpack을 전역으로 설치 한 경우 $webpack 사용하십시오)

이렇게하면 내부에 transpilation 된 코드가있는 out/bundle.js 파일이 만들어지고 예제가 끝납니다.

webpack-dev-server 사용

설정

webpack을 사용하는 간단한 프로젝트를 설정 한 후, $npm i -g webpack-dev-server 를 발급하고 $npm i -g webpack-dev-server 하면 더 빨리 개발할 수 있도록 개발 http 서버가 설치됩니다.

webpack.config.js 수정

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    hot: true
  }
};

수정 내용은

output.publicPath 우리 번들을 제공 할 경로를 설정합니다 (자세한 내용은 Webpack 구성 파일 참조).
devServer
- contentBase 정적 파일을 제공하는 기본 경로 (예 : index.html )
- hot 은 webpack-dev-server가 디스크의 파일에 변경이있을 때 뜨거운 재로드로 설정합니다.

마지막으로 우리는 간단한 index.html을 사용하여 앱을 테스트해야합니다.

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Sandbox</title>
  </head>
  <body>

    <div id="app" />

    <script src="public/bundle.js"></script>
  </body>
</html>

이 설정을 실행하면 $webpack-dev-server 가 포트 8080에서 로컬 http 서버를 시작하고 연결시 <h1>Hello world!</h1> 포함 된 페이지를 렌더링해야합니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

React
설치

수색…