이 글은 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('#app').innerHTML = 'Hello World!';
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: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } } ] }, resolve: { extensions: ['','.coffee','.js'] } }
이제 ES6 구문을 사용하여 파일에 코드를 작성할 수 있습니다. 다음을 추가하여 테스트해 보겠습니다.
var func = str => { console.log(str); }; func('我现在在使用Babel!');
ES6에서는 화살표를 사용하여 함수를 정의할 수 있습니다. "I am now"가 콘솔에 표시되면 Babel을 사용하세요. !"가 인쇄되어 Babel 모듈이 성공적으로 설치되었으며 ES6을 사용하여 코드 작성을 시작할 수 있음을 나타냅니다.
로더 항목은 이러한 유형의 리소스를 로드하는 데 사용되는 로더를 나타냅니다.
test는 일치시킬 리소스 유형을 나타내는 정규식입니다.
exclude는 무시해야 하는 파일을 지정합니다. 여기서는 /node_modules/를 지정합니다.
query에는 두 가지 작성 방법이 있습니다. 하나는 문자열 형식으로 로더 이름 바로 뒤에 오는 것입니다.
loader: 'babel-loader?presets[]=es2015
다른 하나는 이 문서에 표시된 것과 같습니다.
query: { presets: ['es2015'] }
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: ['es2015','react'] }
现在创建一个名为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('#app').innerHTML = 'Hello World!'; ReactDOM.render(, document.querySelector('#app') );
如果你能在浏览器里面看到 "Hello, React!",就说明我们已经将Webpack+Babel+React的环境搭建好了,接下来我们就可以此基础上来进行开发了。
相关推荐:
위 내용은 Webpack, Babel 및 React 개발 환경 설정에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!