create-react-app을 사용하지 않고 처음부터 React.js 앱을 설정하는 방법은 무엇입니까?

10438 단어 webpackreact
원래 게시됨here

거의 2년 동안 Ember.js에 거주한 후 나는 React.js을 시도했습니다. 모든 개발자가 그렇듯이 저는 React.js를 사용하여 Hello World 앱을 만들기 위해 인터넷 서핑을 시작했습니다.

처음에는 번개처럼 빠른 속도로 React.js를 만드는 데 매우 유용한 create-react-app을 찾았습니다. 개발 서버부터 테스트 설정까지 JS 프레임워크에서 일반적으로 필요한 모든 설정이 포함되어 있기 때문에 create-react-app이 정말 즐거웠습니다.

한동안 사용해보니 커스터마이징이 부족하다는 생각이 들었습니다. create-react-app은 화면 뒤에서 Webpack을 사용하여 애플리케이션을 빌드합니다. Webpack은 널리 사용되는 자바스크립트 번들러로 많은 플러그인을 지원하는 대규모 생태계를 가지고 있습니다. 그러나 create-react-app은 이러한 플러그인을 탐색하도록 허용하지 않습니다.

그래서 React.js로 webpack의 모든 기능을 활용하려면 create-react-app에서 벗어나야 한다는 결론에 도달했습니다. webpack의 모든 기능을 공개하기 위해 나만의 webpack 구성을 작성하기 시작했습니다.

여기에서는 나와 같은 개발자를 돕기 위해 webpack을 사용하여 반응 애플리케이션을 빌드하는 방법을 작성하고 있습니다.

전제 조건



  • 컴퓨터에 Node.js가 설치되어 있어야 합니다. yarn에 대해 잘 알고 계시기를 바랍니다. 또한 원사는 전역적으로 설치됩니다.
  • 빈 프로젝트를 만들고 package.json 파일을 만듭니다.

    • 설치



    다음 패키지를 설치합니다.

    React.js 설정




    yarn add react and react-dom


    반응 - React.js 라이브러리.
    react-dom - 이 패키지는 React의 DOM 및 서버 렌더러에 대한 진입점 역할을 합니다.

    웹팩 설정



    yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

    webpack - Webpack은 모듈용 번들러입니다.
    webpack-cli - webpack용 명령줄 인터페이스입니다.
    webpack-dev-server - 라이브 리로딩을 제공하는 개발 서버.
    html-webpack-plugin - HtmlWebpackPlugin은 웹팩 번들을 제공하기 위해 HTML 파일 생성을 단순화합니다.

    설정 바벨



    yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader

    /core - 주로 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 사용됩니다.
    /preset-env -/preset-env를 사용하면 최신 JavaScript를 사용할 수 있습니다.
    /preset-react - 이 패키지는 React.js 특정 기능을 지원하는 데 사용되는 플러그인 세트입니다.
    babel-loader - 이 패키지는 Babel 및 webpack을 사용하여 JavaScript 파일을 변환할 수 있도록 합니다.

    구성



    webpack을 사용하여 React.js 애플리케이션을 만드는 데 필요한 모든 패키지를 설치했습니다. 다음으로 반응 생성 돔을 삽입해야 하는 index.html 템플릿이 필요합니다. src/폴더 안에 HTML 파일을 만듭니다.

    src/index.html

      <html>
    <head>
      <title>Setup React Application From Scratch</title>
    </head>
    <body>
      <!-- We will insert the dom here -->
      <div id="react-app">

      </div>
    </body>
  </html>


    또한 리액트 애플리케이션을 만들기 위한 시작점이 필요합니다. js 파일 인덱스 src/폴더를 만듭니다.

    src/index.js

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

  const rootElement = document.getElementById('react-app');

  render(<div> Hello World! </div>, rootElement);


    라이브 개발 서버를 제공하도록 웹팩 구성

    webpack.config.js

      const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: path.resolve(__dirname, 'src/index'),
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: ['babel-loader']
      }]
    },
    devServer: {
      contentBase:  path.resolve(__dirname, 'dist'),
      port: 9000
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "src/index.html" //source html
      })
    ]
  };


    바벨 구성

    .babelrc

    {
  "presets" : [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}


    결승선에 도달했습니다. 오 잠깐! 할 일이 하나 더 있습니다. package.json 파일에 webpack 스크립트를 추가합니다.

    패키지.json

    {
  "name": "react-setup-from-scratch",
  "scripts": {
    "serve": "webpack-dev-server --mode development",
    "build": "webpack --mode production",
  }
}


    그게 다야! 쇼 시간입니다. 개발 서버를 시작합시다.

      yarn serve


    짜잔!!! 끝났습니다. 출력을 보자.



    완전히 완성된 코드를 찾을 수 있습니다here.

    이 게시물이 초보자에게 어떻게든 도움이 되었으면 합니다 ❤️.
    attempt to index local'self'(a number value) 오류 해결
    Laravel 확장 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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