Webpack, Babel 및 React 개발 환경 설정에 대한 튜토리얼-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Webpack, Babel 및 React 개발 환경 설정에 대한 튜토리얼

小云云

Jan 11, 2018 am 09:27 AM

babelreactwebpack

이 글은 Webpack+Babel+React 개발 환경을 구축하는 단계를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

1. Webpack 알아보기

애플리케이션을 구축하기 전에 Webpack은 다양한 파일(예: ReactJS, Babel, Coffeescript, Less/Sass 등)을 다음과 같이 컴파일할 수 있는 모듈 패키징 도구임을 이해해 보겠습니다. 모듈을 선택하고 패키지합니다.

2. Webpack 설치

프로젝트 개발에 Webpack을 사용하려면 먼저 글로벌 환경에 Webpack을 설치해야 합니다.

npm install webpack -g

3. 프로젝트 만들기

설치 후 learn-webpack이라는 프로젝트를 만들고 프로젝트 폴더에 들어가세요. 물론 프로젝트 이름은 무엇이든 지정할 수 있습니다.

mkdir learn-webpack && cd learn-webpack

편집기를 통해 방금 생성한 프로젝트 폴더를 찾으세요

이제 2개의 파일을 만들어 보겠습니다:

app.js

document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Learn-webpack</title>
</head>
<body>
 <p id="app"></p>
 <script src="dist/bundle.js"></script>
</body>
</html>

그런 다음 실행 터미널

webpack ./app.js ./dist/bundle.js

마지막으로 실행하여 로컬 http 서비스를 시작합니다

python -m SimpleHTTPServer

이때 브라우저에 입력할 수 있습니다. ://localhost:8000

브라우저에 Hello World가 보이면 Webpack을 사용하여 main.js를 Bundle.js로 패키징하고 컴파일한 것입니다. 매우 간단하지 않나요?

구성 파일 정의

위 내용은 Webpack 사용에 대한 간략한 소개일 뿐입니다. 실제로 모든 프로젝트에는 Webpack에 수행해야 할 작업을 알려주는 webpack.config.js가 포함되어 있어야 합니다.

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 }
}

이제 터미널에서 webpack

을 실행하여 패키징 및 컴파일 결과가 이전 입력 webpack ./app.js ./dist/bundle.js와 동일한지 확인하세요.

항목: 패키징을 위한 항목 파일을 지정합니다.

1. 단일 파일을 단일 출력 파일로 압축하고 파일 이름을 직접 작성합니다. 예: 항목: "main.js"

2. 파일을 단일 출력 파일로 묶는 경우 파일 이름을 배열에 입력합니다(예: Entry:['main.js','xx.js']

3). 여러 파일을 여러 출력 파일로 압축하고 파일 이름을 키 쌍, 예: 항목: {a:'main.js',b:'xx.js'}

output: 패키징 결과 구성

path는 정의된 출력 폴더이고 filename은 다음의 이름입니다. 패키징 결과 파일(지정된 경우) 패키징 항목 파일은 위의 1번 또는 2번의 경우이고, 파일명은 출력하려는 파일의 이름이 바로 됩니다. 세 번째 경우라면 파일이름은 [이름].파일이름.js로 작성해야 하며, 파일이름의 [이름]이 항목의 키입니다.

변경 사항 모니터링 및 자동 패키징

코드가 지속적으로 변경될 때 한 번 수정되지 않도록 수동으로 다시 패키징합니다. webpack의 watch 기능을 사용할 수 있습니다.

webpack --watch 또는 webpack -w

또는 구성 코드에서 직접 watch를 true로 설정할 수 있습니다

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 watch: true
}

4. Babel 사용

Babel이란 무엇인가요? Babel은 JavaScript 컴파일러입니다. 현재 환경에서 실행될 수 있도록 ES6 구문을 ES5 구문으로 변환하는 데 사용합니다.

터미널에서 실행: npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

설치가 완료된 후 이전 webpack.config.js를 다음으로 수정해야 합니다.

module.exports = {
 entry: "./app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 module: {
  loaders: [
   {
    test: /\.jsx?$/,
    loader: &#39;babel-loader&#39;,
    exclude: /node_modules/,
    query: {
     presets: [&#39;es2015&#39;]
    }
   }
  ]
 },
 resolve: {
  extensions: [&#39;&#39;,&#39;.coffee&#39;,&#39;.js&#39;]
 }
}

이제 ES6 구문을 사용하여 파일에 코드를 작성할 수 있습니다. 다음을 추가하여 테스트해 보겠습니다.

var func = str => {
 console.log(str);
};
func(&#39;我现在在使用Babel!&#39;);

ES6에서는 화살표를 사용하여 함수를 정의할 수 있습니다. "I am now"가 콘솔에 표시되면 Babel을 사용하세요. !"가 인쇄되어 Babel 모듈이 성공적으로 설치되었으며 ES6을 사용하여 코드 작성을 시작할 수 있음을 나타냅니다.

로더 항목은 이러한 유형의 리소스를 로드하는 데 사용되는 로더를 나타냅니다.

test는 일치시킬 리소스 유형을 나타내는 정규식입니다.

exclude는 무시해야 하는 파일을 지정합니다. 여기서는 /node_modules/를 지정합니다.

query에는 두 가지 작성 방법이 있습니다. 하나는 문자열 형식으로 로더 이름 바로 뒤에 오는 것입니다.

loader: &#39;babel-loader?presets[]=es2015

다른 하나는 이 문서에 표시된 것과 같습니다.

query: {
 presets: [&#39;es2015&#39;]
}

resolve.extensions는 이를 지정하는 데 사용됩니다. 프로그램 완성은 어떤 접미사를 자동으로 식별합니다.

접미사가 필요하지 않은 상황에 해당하는 확장명 중 첫 번째는 빈 문자열입니다.

5.Webpack을 이미 구성했습니다. and Babel and done 몇 가지 소개를 마치고 기본 환경이 설정되었으며 이제 React를 사용하기 시작합니다.

React 및 React-dom을 설치하려면 터미널에 다음 코드를 입력하세요

npm install react react-dom --save

Babel针对React的所有的预设插件

npm install babel-preset-react --save-dev

由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。

将module -> loaders下面的query修改如下：

query: {
  presets: [&#39;es2015&#39;,&#39;react&#39;]
}

现在创建一个名为hello.js的文件

import React from "react";

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

export default Hello;

然后将app.js里面的文件修改如下：

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

// var func = str => {
//  console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

ReactDOM.render(
 ,
 document.querySelector('#app')
);

如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。

관련 기사

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.