React
기본 웹팩, 반응 및 바벨 환경을 설정하는 방법
수색…
비고
이 빌드 파이프 라인은 정확히 "프로덕션 준비"라고는 할 수 없지만 원하는 개발 경험을 얻기 위해 필요한 것을 추가 할 수있는 확실한 시작을 제공합니다. 어떤 사람들은 (나 자신을 포함해서) 어떤 사람들이 가져 오는 접근법은 Yeoman.io 또는 다른 곳의 파이프 라인을 완전히 쌓은 다음 스타일에 맞는 스타일이 될 때까지 원하지 않는 것들을 제거하는 것입니다. 이것에 대해서는 아무 문제가 없지만 위의 예제를 사용하면 반대 접근법을 선택하고 맨손으로 뼈를 만들 수 있습니다.
추가 할만한 몇 가지 사항은 테스트 프레임 워크 및 Mocha 또는 Jasmine을 사용하는 Karma와 같은 적용 통계와 같은 것들입니다. ESLint를 linting. webpack-dev-server에서 핫 모듈을 대체하여 Ctrl + S, F5 개발 경험을 얻을 수 있습니다. 또한 현재 파이프 라인은 dev 모드에서만 빌드되므로 생산 빌드 작업이 좋을 것입니다.
잡았다!
webpack.config.js 의 컨텍스트 속성에서 노드 경로 모듈을 사용하여 __dirname 을 문자열 /src 연결하는 대신 경로를 정의 했습니다 . 이는 Windows에서 슬래시가 싫어 지기 때문입니다. 그래서 솔루션을 더 많은 크로스 플랫폼 호환 노드를 이용하여 우리를 도울 수 있습니다.
webpack.config.js 등록 정보에 대한 설명
문맥
이것은 webpack이 상대 경로를 해석 할 때 루트 경로로 사용할 파일 경로입니다. 따라서 index.jsx에서 require('./index.html') 를 사용 require('./index.html') 이 점은 실제로이 속성에서 src/ 디렉토리로 정의했기 때문에 실제로 src/ 디렉토리로 해석됩니다.
기입
webpack은 먼저 솔루션 번들링을 시작합니다. 이것이 index.jsx에서 우리가 필요로하는 것과 수입으로 솔루션을 결합하고있는 것을 보게되는 이유입니다.
산출
여기서 webpack이 번들로 찾은 파일을 삭제해야하는 위치를 정의합니다. 또한 번들로 제공되는 자바 스크립트와 스타일을 삭제할 파일의 이름을 정의했습니다.
devServer
webpack-dev-server에 특정한 설정입니다. contentBase 는 서버가 루트가되어야하는 위치를 정의하며 dist/ folder를 여기에 기본으로 정의했습니다. port 는 서버가 호스트되는 포트입니다. open 은 webpack-dev-server가 서버를 회전 시키면 기본 브라우저를 열도록 지시하는 데 사용됩니다.
모듈> 적재기
이는 webpack이 사용할 매핑을 정의하므로 다른 파일을 찾을 때 수행 할 작업을 알 수 있습니다. test 속성은 webpack이이 모듈을 적용해야 할지를 결정하는 데 사용할 정규식을 제공합니다. 대부분의 경우 파일 확장자가 일치합니다. loader 또는 loaders 는 webpack에 파일을로드하는 데 사용할 로더 모듈의 이름을 제공하고 해당 로더가 해당 파일 유형의 번들링을 처리하도록합니다. 자바 스크립트에는 query 속성이 있습니다.이 옵션은 로더에 쿼리 문자열을 제공하기 때문에 원하는 경우 HTML 로더에서도 쿼리 속성을 사용할 수있었습니다. 그것은 일을하는 다른 방식 일뿐입니다.
이미지가있는 사용자 정의 된 "Hello world"에 대한 파이프 라인을 작성하는 방법.
1 단계 : Node.js 설치
빌드 할 빌드 파이프 라인은 Node.js를 기반으로하기 때문에 첫 번째 인스턴스에서이를 설치해야합니다. Node.js를 설치하는 방법에 대한 지시 사항은 여기 에서 SO 문서를 체크 아웃 할 수 있습니다.
2 단계 : 프로젝트를 노드 모듈로 초기화
명령 행에서 프로젝트 폴더를 열고 다음 명령을 사용하십시오 :
npm init
당신이 모든 당신이 체크 아웃 할 수 무엇을 의미하는지에 대한 추가 정보를 원한다면이 예제의 목적을 위해 당신은 기본값을 자유롭게 또는 수 이 패키지 구성 설정에 대한 SO 문서를.
3 단계 : 필요한 npm 패키지 설치
명령 행에서 다음 명령을 실행하여이 예제에 필요한 패키지를 설치하십시오.
npm install --save react react-dom
그런 다음 dev 종속성에 대해 다음 명령을 실행합니다.
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader
마지막으로 webpack과 webpack-dev-server는 프로젝트 종속성보다는 전체적으로 설치하는 것이 좋습니다. 종속성으로 추가하려는 경우에는 그렇게 할 것입니다. 그렇지 않습니다. 다음은 실행할 명령입니다.
npm install --global webpack webpack-dev-server
3 단계 : .babelrc 파일을 프로젝트의 루트에 추가하십시오.
방금 설치 한 사전 설정을 사용하도록 바벨이 설정됩니다. .babelrc 파일은 다음과 같아야합니다.
{
"presets": ["react", "es2015"]
}
4 단계 : 프로젝트 디렉토리 구조 설정
디렉토리의 루트에서 다음과 같은 디렉토리 구조를 설정하십시오.
|- node_modules
|- src/
|- components/
|- images/
|- styles/
|- index.html
|- index.jsx
|- .babelrc
|- package.json
참고 : node_modules , .babelrc 및 package.json 은 모두 이전 단계에서 이미 포함되어 있으므로 방금 포함 된 위치를 볼 수 있습니다.
5 단계 : Hello World 프로젝트 파일로 프로젝트 채우기
이것은 파이프 라인을 구축하는 과정에서 정말로 중요하지 않으므로 여기에 코드를 제공하고 붙여 넣을 수 있습니다.
src / components / HelloWorldComponent.jsx
import React, { Component } from 'react';
class HelloWorldComponent extends Component {
constructor(props) {
super(props);
this.state = {name: 'Student'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({name: e.target.value});
}
render() {
return (
<div>
<div className="image-container">
<img src="./images/myImage.gif" />
</div>
<div className="form">
<input type="text" onChange={this.handleChange} />
<div>
My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
</div>
</div>
</div>
);
}
}
export default HelloWorldComponent;
src / images / myImage.gif
이미지와 함께 번들링 할 수 있다는 점을 증명할 수있는 이미지로 대체하십시오. 자신의 이미지를 제공하고 다른 이름을 지정하면 변경 내용을 반영하도록 HelloWorldComponent.jsx 를 업데이트해야합니다. 마찬가지로 파일 확장명이 다른 이미지를 선택한 경우 webpack.config.js의 이미지 로더의 test 속성을 적절한 정규식과 함께 새 파일 확장명과 일치하도록 수정해야합니다.
src / styles / styles.css
.form {
margin: 25px;
padding: 25px;
border: 1px solid #ddd;
background-color: #eaeaea;
border-radius: 10px;
}
.form div {
padding-top: 25px;
}
.image-container {
display: flex;
justify-content: center;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning to build a react pipeline</title>
</head>
<body>
<div id="content"></div>
<script src="app.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';
require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');
render(<HelloWorldComponent />, document.getElementById('content'));
6 단계 : 웹팩 구성 만들기
프로젝트의 루트에 webpack.config.js라는 파일을 만들고이 코드를 복사하십시오.
webpack.config.js
var path = require('path');
var config = {
context: path.resolve(__dirname + '/src'),
entry: './index.jsx',
output: {
filename: 'app.js',
path: path.resolve(__dirname + '/dist'),
},
devServer: {
contentBase: path.join(__dirname + '/dist'),
port: 3000,
open: true,
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.gif$/,
loaders: [
'file?name=[path][name].[ext]',
'image-webpack',
]
},
{ test: /\.(html)$/,
loader: "file?name=[path][name].[ext]"
}
],
},
};
module.exports = config;
7 단계 : 파이프 라인을위한 npm 작업 만들기
이렇게하려면 프로젝트의 루트에있는 package.json 파일에 정의 된 JSON의 스크립트 키에 두 개의 속성을 추가해야합니다. 스크립트 키를 다음과 같이 만듭니다.
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
test 스크립트는 이미 거기에 있었을 것입니다. 당신이 그것을 유지할 것인지 여부를 선택할 수 있습니다.이 예제에서는 중요하지 않습니다.
8 단계 : 파이프 라인 사용
명령 줄에서 프로젝트 루트 디렉토리에 있다면 다음 명령을 실행할 수 있습니다.
npm run build
이것은 당신이 만든 작은 애플리케이션을 묶어 프로젝트 폴더의 루트에 생성 할 dist/ 디렉토리에 놓을 것입니다.
다음 명령을 실행하면 :
npm start
그런 다음 작성한 애플리케이션은 webpack dev 서버 인스턴스의 기본 웹 브라우저에서 제공됩니다.