Node.js
ES6을 사용한 Node.JS
수색…
소개
ES6, ECMAScript 6 또는 ES2015는 JavaScript에 대한 최신 사양으로 통어론에 설탕을 도입했습니다. 언어에 대한 큰 업데이트이며 많은 새로운 기능을 소개 합니다.
Node 및 ES6에 대한 자세한 내용은 해당 사이트 https://nodejs.org/en/docs/es6/ 에서 확인할 수 있습니다.
노드 ES6 바벨로 프로젝트 지원 및 생성
전체 ES6 사양은 아직 완전히 구현되지 않았으므로 새로운 기능 중 일부만 사용할 수 있습니다. http://node.green/ 에서 현재 지원되는 ES6 기능 목록을 볼 수 있습니다.
NodeJS v6부터 꽤 좋은 지원이있었습니다. 따라서 NodeJS v6 이상을 사용하는 경우 ES6을 사용하여 즐길 수 있습니다. 그러나 출시되지 않은 기능 중 일부와 그 밖의 기능을 사용할 수도 있습니다. 이것을 위해서 당신은 transpiler를 사용해야 할 것입니다.
런타임에 변환기를 실행하고 빌드하여 모든 ES6 기능 등을 사용할 수 있습니다. 자바 스크립트에서 가장 많이 사용되는 transpiler는 Babel입니다.
Babel을 사용하면 ES6 사양의 모든 기능과 'stage-0'과 함께 ' var thing = require('thing')
대신 import thing from 'thing
과 같은 일부 추가 비표준 기능을 사용할 수 있습니다.
우리가 import와 같은 'stage-0'기능을 사용하는 프로젝트를 만들고 싶다면 Babel을 transpiler로 추가해야합니다. react와 Vue를 사용하는 프로젝트와 다른 commonJS 기반 패턴이 스테이지 0을 자주 구현하는 것을 보게 될 것입니다.
새 노드 프로젝트 만들기
mkdir my-es6-app
cd my-es6-app
npm init
ES6 프리셋과 스테이지 0을 설치하십시오.
npm install --save-dev babel-preset-es2015 babel-preset-stage-2 babel-cli babel-register
server.js
라는 새 파일을 만들고 기본 HTTP 서버를 추가하십시오.
import http from 'http'
http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'})
res.end('Hello World\n')
}).listen(3000, '127.0.0.1')
console.log('Server running at http://127.0.0.1:3000/')
import http from 'http'
의 import http from 'http'
사용합니다.이 기능은 stage-0 기능이며 작동한다면 transpiler가 올바르게 작동한다는 의미입니다.
node server.js
를 실행하면 가져 오기를 처리하는 방법을 알지 못합니다.
디렉토리 루트에 .babelrc 파일을 만들고 다음 설정을 추가하십시오.
{
"presets": ["es2015", "stage-2"],
"plugins": []
}
이제 node src/index.js --exec babel-node
서버를 실행할 수 있습니다. node src/index.js --exec babel-node
프로덕션 응용 프로그램에서 실시간으로 transpiler를 실행하는 것은 좋지 않습니다. 그러나 우리는 package.json에 스크립트를 구현하여보다 쉽게 작업 할 수 있습니다.
"scripts": {
"start": "node dist/index.js",
"dev": "babel-node src/index.js",
"build": "babel src -d dist",
"postinstall": "npm run build"
},
위의 내용은 npm install
distiled 디렉토리에 transpiled 코드를 빌드합니다. npm start
프로덕션 응용 프로그램을 위해 코드 변환 된 코드를 사용할 수있게합니다.
npm run dev
는 프로젝트를 로컬에서 작업 할 때 좋고 선호되는 서버 및 babel 런타임을 부팅합니다.
한 번 더 가면 nodemon npm install nodemon --save-dev
를 npm install nodemon --save-dev
하여 변경 사항을 감시 한 다음 노드 응용 프로그램을 재부팅 할 수 있습니다.
이것은 바벨 (babel)과 NodeJS로 작업 속도를 향상시킵니다. 당신은 package.json에서 "dev"스크립트를 업데이트하여 nodemon을 사용합니다.
"dev": "nodemon src/index.js --exec babel-node",
NodeJS 앱에서 JS es6을 사용하십시오.
JS es6 (es2015라고도 함)은 OOP를 사용하거나 현대 개발 작업에 직면 할 때 JS 언어 목표를 더욱 직관적으로 만드는 새로운 기능 세트입니다.
선수 과목 :
http://es6-features.org에 있는 새로운 es6 기능을 확인하십시오. 다음 NodeJS 앱에서 실제로 사용하려는 경우 명확하게 설명 할 수 있습니다.
http://node.green 에서 노드 버전의 호환성 수준을 확인하십시오.
모두 괜찮 으면 - 코드를 작성하자!
다음은 JS es6을 사용한 간단한 hello world
앱의 간단한 샘플입니다.
'use strict'
class Program
{
constructor()
{
this.message = 'hello es6 :)';
}
print()
{
setTimeout(() =>
{
console.log(this.message);
this.print();
}, Math.random() * 1000);
}
}
new Program().print();
이 프로그램을 실행하여 같은 메시지를 반복해서 인쇄하는 방법을 관찰 할 수 있습니다.
이제 .. 한 줄씩 나누십시오.
'use strict'
이 줄은 js es6을 사용하려는 경우 실제로 필요합니다. strict
모드는 의도적으로 일반적인 코드와 다른 의미를가집니다 (MDN에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode 에서 읽어보십시오 )
class Program
믿을 수없는 - class
키워드! 빠른 참조를 위해 - es6 이전에 js의 클래스를 정의하는 유일한 방법은 ... function
키워드를 사용하는 것입니다!
function MyClass() // class definition
{
}
var myClassObject = new MyClass(); // generating a new object with a type of MyClass
OOP를 사용할 때 클래스는 개발자가 시스템의 특정 부분을 표현하는 데 도움이되는 매우 기본적인 기능입니다 (코드가 커질 때 코드 분할이 중요합니다. 예 : 서버 측 코드 작성)
constructor()
{
this.message = 'hello es6 :)';
}
당신은 인정해야합니다 - 이것은 꽤 직관적입니다! 이것은 내 수업의 핵심입니다.이 독특한 "함수"는이 특정 수업에서 객체가 만들어 질 때마다 발생합니다 (우리 프로그램에서는 한 번만).
print()
{
setTimeout(() => // this is an 'arrow' function
{
console.log(this.message);
this.print(); // here we call the 'print' method from the class template itself (a recursion in this particular case)
}, Math.random() * 1000);
}
print는 클래스 스코프에 정의되어 있기 때문에 클래스의 객체 나 클래스 자체에서 호출 할 수 있습니다.
그래서 .. 지금까지 우리 클래스를 정의했습니다 .. 사용할 시간 :
new Program().print();
진정으로 다음과 같습니다.
var prog = new Program(); // define a new object of type 'Program'
prog.print(); // use the program to print itself
결론 : JS es6은 코드를 단순화하여 직관적이고 이해하기 쉽게 만듭니다 (이전 버전의 JS와 비교). 기존 코드를 다시 작성하고 차이점을 직접 확인해보십시오
즐겨 :)