[ECMA6]
babel.js, webpack , ES6 using react (es2015) development environment to build
babel.js, webpack, react를 이용한 ES6(es2015)개발환경 구축하기
babel.js, webpack , ES6 using react (es2015) development environment to build
babel.js, webpack, react를 이용한 ES6(es2015)개발환경 구축하기
Depending on the demands of the times ES6 (Ecma Script 6) appeared, but a browser that currently there is not much support.
When it appeared in Babel JS developers to create solutions such as converting to ES5 and ES6 before deployment Clients will render the existing script code (ES5).
시대적 요구에 따라 ES6(Ecma Script 6)가 등장하였으나 현재 지원하는 브라우저가 많지 않습니다.
이러한 해결책으로 등장한것이 Babel JS로 개발자가 ES6로 작성하면 배포전에 ES5로 컨버팅하여
When it appeared in Babel JS developers to create solutions such as converting to ES5 and ES6 before deployment Clients will render the existing script code (ES5).
시대적 요구에 따라 ES6(Ecma Script 6)가 등장하였으나 현재 지원하는 브라우저가 많지 않습니다.
이러한 해결책으로 등장한것이 Babel JS로 개발자가 ES6로 작성하면 배포전에 ES5로 컨버팅하여
클라이언트는 기존 스크립트 코드(ES5)를 렌더링 하게 됩니다.
Given that the conversion points even written code but substantially ES6 order to enjoy the performance improvements of its own
A new generation of grammar without having to worry about compatibility problems that can be very attractive in advance.
Npm must be prepared to use these two.
컨버팅 되는점을 감안하면 실질적으로 ES6코드로 작성하여도 그 자체의 성능 개선 효과를 누릴순 없지만
호환성을 걱정하지 않고 차세대 문법을 미리 사용할수 있다는점이 아주 매력적입니다.
이 두가지를 사용하기위해 npm이 준비되어 있어야 합니다.
npm이 준비되어 있지 않다면 여기 링크된 글을 참고 하세요.
Run the following command to start the project.
프로젝트를 시작하기 위해 아래 명령어들을 실행하세요.
$ npm init below by generating a package.json for dependency management
Would become to see the following screen, enter the enter Both now and skip.
아래 $npm init은 의존성 관리를 위한 package.json을 생성하는 과정으로써
다음과 같은 화면을 보게 될텐데 현재는 모두 enter를 입력하고 넘어갑니다.
$ npm init to download via the following command after the completion of babel.
$ npm init이 완료된 후에 아래 명령어를 통해 babel을 다운로드합니다.
이 두가지를 사용하기위해 npm이 준비되어 있어야 합니다.
Run the following command to start the project.
프로젝트를 시작하기 위해 아래 명령어들을 실행하세요.
$ mkdir es6-babel $ cd es6-babel/$ npm init
$ npm init below by generating a package.json for dependency management
Would become to see the following screen, enter the enter Both now and skip.
아래 $npm init은 의존성 관리를 위한 package.json을 생성하는 과정으로써
다음과 같은 화면을 보게 될텐데 현재는 모두 enter를 입력하고 넘어갑니다.
$ npm init to download via the following command after the completion of babel.
$ npm init이 완료된 후에 아래 명령어를 통해 babel을 다운로드합니다.
$ npm install babel-loader babel-core babel-preset-es2015 --save-dev
Although now ready to use es6 requires a server that will we render the coined code in real time for more convenient development.
Typical tasks are the runner that can easily be configured, etc. There is a grunt, gulp, webpack
In this article, using the webpack to proceed to the next step, we will configure the server.
이제 es6를 사용할 준비가 되었지만 보다 편리한 개발을 위해 우리가 만들어낸 코드를 실시간으로 렌더링 해줄 서버가 필요합니다.
손쉽게 구성할수있는 대표적인 태스크 러너는 grunt, gulp, webpack등이 있는데
이 글에서는 다음 단계를 진행하기 위해 webpack을 이용해서 서버를 구성하도록 하겠습니다.
$ npm install webpack webpack-dev-server --save-dev
Creates the following files to equip a basic folder structure after installation is complete.
설치가 완료된후 기본적인 폴더 구조를 갖추기 위해 아래 파일들을 생성합니다.
$ touch index.html main.js webpack.config.js
After running the above command in the directory it will be as follows:
위 명령어를 실행한후 디렉토리 안에 다음과 같이 되어 있을것 입니다.
Create a webpack.config.js file as follows:
webpack.config.js 파일을 다음과 같이 작성합니다.
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
}
package.json modify the file as follows:
(you must enter a start in the "scripts".)
package.json 파일을 아래와 같이 수정합니다.
("scripts"안에 start를 입력해 주어야 합니다.)
{
"name": "es6-babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "Jaeyoung Lee",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.3.13",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}
Create an index.html file, as shown below.
index.html 파일을 아래와 같이 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use the ES6!</title>
</head>
<body>
<h1>it's working!</h1>
<script src="index.js"></script>
</body>
</html>
After you create all of the $ npm start to run from the terminal.
모두 작성한뒤 터미널에서 $npm start 를 실행합니다.
Now localhost: 3333 if / connecting you will see the following screen.
이제 localhost:3333/ 으로 접속하면 다음과 같은 화면을 볼 수 있을겁니다.
Now all preparations are complete.
npm / babel.js / es6 / webpack Now that all ready to write the code
In this development environment, you'll confirm that ES6 really works well.
자 이제 모든 준비가 완료 되었습니다.
npm / babel.js / es6 / webpack 이 모두 준비되었으니 코드를 작성하여
이 개발환경에서 ES6가 정말로 잘 동작하는지 확인해 보도록 합니다.
$ mkdir es6 $ cd es6 $ touch test1.js test2.js
Create a test1.js file as follows:
test1.js 파일을 다음과 같이 작성합니다.
export default class Test1 {
constructor() {
console.log('test1 is loaded');
}
name()
return 'my name is test1';
}
}
test2.js 파일을 다음과 같이 작성합니다.
export default function test2() {
console.log('test2 is loaded');
let name = () => 'my name is test2';
return name;
}Create a main.js file as follows:
main.js 파일을 다음과 같이 작성합니다.
import Test1 from './es6/test1';
import test2 from './es6/test2';
var test1 = new Test1();
test2();
console.log(test1.name());
console.log(test2());
Create a index.html file as follows:
index.html파일을 다음과 같이 작성합니다.
<head>
<meta charset="UTF-8">
<title>Use the ES6!</title>
</head>
<body>
<h1>it's working!</h1>
<button onClick="test1.name()">test1 name</button>
<button onClick="test2()">test2 name</button>
<script src="index.js"></script>
</body>
</html>
It works well, as shown below.
아래 보이는것과 같이 잘 동작합니다.
In the process, however, it will precompile There is one problem that can not be used anymore ES6 in the traditional manner in html.
그러나 한가지 문제점이 있는데 pre compile하는 과정에서 더이상 기존 방식으로 ES6를 html에서 사용할수 없다는 것입니다.
It's also one surprising fact did.
away through the process of pre compile a surprising look at why.
사실 놀랍지도 않은 일이죠.
pre compile하는 과정을 거치면 어찌보면 당연한 일입니다.
React With angularJS or can be developed using the ES6 code because it binds to strict!
In this article we'll use as the title React.
agnularJS나 React를 이용하면 strict 하게 바인딩 하기 때문에 ES6코드를 이용한 개발을 할수 있습니다!
이번 글에서는 제목과 같이 React를 사용해 보도록 하겠습니다.
$ npm install babel-preset-react react react-dom --save-dev $ touch App.js
After installing react and react-dom webpack.config.js modify the file as follows:
(that is added to react presets)
react와 react-dom을 설치한후에 webpack.config.js 파일을 아래와같이 수정합니다.
(presets에 react가 추가됩니다)
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
Edit the index.html file, as follows:
index.html 파일을 다음과 같이 수정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use the ES6!</title>
</head>
<body>
<h1>it's working!</h1>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
main.js existing file is modified as follows:
기존 main.js 파일은 다음과 같이 수정합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'))
App.js파일을 추가한 후 아래와 같이 내용을 추가해줍니다.
import React from 'react';
import ReactDOM from 'react-dom';
import Test1 from './es6/test1';
import test2 from './es6/test2';
class App extends React.Component {
constructor() {
super();
this.test1 = new Test1();
this.test2 = test2;
}
print(args) {
console.log(args);
}
render() {
return (
<div>
<button onClick={this.print.bind(this, this.test1.name())}>Test1 Name</button>
<button onClick={this.print.bind(this, this.test2())}>Test2 Name</button>
</div>
);
}
}
export default App
If you run all the files after you create the button, you can see that works well.
모든 파일을 작성한후 실행하면 버튼이 잘 동작하는것을 확인 할 수 있습니다.
So far, your code can be downloaded from https://github.com/polyglotm/es6-react-seed
After downloading, you can run only $ npm install.
지금까지 작성한 코드는 https://github.com/polyglotm/es6-react-seed 에서 다운로드 할 수 있습니다.
다운로드 후 $npm install 만 실행 하면 됩니다.
Please use the following URL to see if you are simply using the ES6 grammar.
당신이 단순히 ES6 문법을 사용해보기 위해서라면 아래 사이트를 이용하세요.
https://babeljs.io/repl/
https://babeljs.io/repl/
Next time will be discussed with respect to gulp angular.js-based development environment.
Do not hesitate to ask if there is an error in the article comments.
다음번엔 gulp 기반 angular.js 개발환경에 대해서 다루도록 하겠습니다.
글에 오류가 있다면 주저말고 피드백 부탁드립니다.
댓글 없음:
댓글 쓰기