Node에서 ES6 구문을 사용하는 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

Node에서 ES6 구문을 사용하는 방법(자세한 튜토리얼)

亚连

풀어 주다： 2018-06-13 16:08:58

원래의

2362명이 탐색했습니다.

Google, fifox 및 node6.0의 es6 지원으로 es6 구문의 완성이 점점 더 많은 관심을 끌었습니다. 특히 React 프로젝트가 기본적으로 es6으로 작성되었기 때문입니다. 다음 글에서는 Node에서 ES6 문법을 사용하는 기본적인 튜토리얼을 주로 소개하고 있으니, 필요한 분들은 참고하시면 됩니다.

관련 배경 소개

지금 우리가 많이 사용하는 자바스크립트 문법은 사실 ecmscript5인데, 이것도 es5입니다. 이 버전은 수년 동안 사용 가능했으며 모든 주요 브라우저에서 완벽하게 지원됩니다. 따라서 js를 배우는 많은 친구들은 es5와 javscript의 관계를 결코 알 수 없습니다. JavaScript는 프로그래밍 언어이므로 버전 번호가 es5인지 es6인지입니다. es7의 최신 버전은 이미 본격적으로 출시되었으며 최신 구문을 사용하면 코드 업데이트를 원활하게 작성할 수 있습니다.

Introduction

Node 자체는 이미 일부 ES6 구문을 지원하지만 import import 및 async wait와 같은 일부 구문은 여전히 사용할 수 없습니다(Node 8에서는 이미 지원합니다). 이러한 새로운 기능을 사용하려면 babel을 사용하여 ES6를 ES5 구문으로 변환해야 합니다

Babel 설치

npm install babel-cli -g

로그인 후 복사

기본 지식

babel 구성 파일은 .babelrc

{
 "presets": []
}

로그인 후 복사

데모 폴더를 생성하고 폴더 아래에 1.js

const arr = [1, 2, 3];
arr.map(item => item + 1);

로그인 후 복사

을 생성하는 동시에 터미널에서 새로운 .babelrc 구성 파일

{
 "presets": []
}

로그인 후 복사

run을 생성합니다

babel 1.js -o dist.js

로그인 후 복사

폴더 아래에 새로운 dist.js가 생성된 것을 확인하세요. 이것은 Babel에 의해 트랜스코딩된 파일입니다

그러나 구성 파일에서 트랜스코딩 규칙을 선언하지 않았기 때문에 현재 dist.js에는 변경 사항이 없습니다. Babel은 트랜스코딩할 수 없습니다

트랜스코딩 플러그인 설치

npm install --save-dev babel-preset-es2015 babel-preset-stage-0

로그인 후 복사

구성 파일 수정

{
 "presets": [
 "es2015",
 "stage-0"
 ]
}

로그인 후 복사

es2015는 es2015의 구문 규칙을 트랜스코딩할 수 있고, stage-0은 ES7 구문(예: async wait)을 트랜스코딩할 수 있습니다

터미널을 다시 실행하세요

babel 1.js -o dist.js

로그인 후 복사

화살표 함수가 트랜스코딩된 것을 볼 수 있습니다

var arr = [1, 2, 3];
arr.map(function (item) {
 return item + 1;
});

로그인 후 복사

async wait

async function start() {
 const data = await test();
 console.log(data);
}
function test() {
 return new Promise((resolve, reject) => {
 resolve(&#39;ok&#39;);
 })
}

로그인 후 복사

트랜스코딩된 파일

&#39;use strict&#39;;
var start = function () {
 var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
 var data;
 return regeneratorRuntime.wrap(function _callee$(_context) {
  while (1) {
  switch (_context.prev = _context.next) {
   case 0:
   _context.next = 2;
   return test();

   case 2:
   data = _context.sent;

   console.log(data);

   case 4:
   case &#39;end&#39;:
   return _context.stop();
  }
  }
 }, _callee, this);
 }));
 return function start() {
 return _ref.apply(this, arguments);
 };
}();
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

function test() {
 return new Promise(function (resolve, reject) {
 resolve(&#39;ok&#39;);
 });
}

로그인 후 복사

을 실행해보고 importexport

util.js

export default function say() {
 console.log(&#39;2333&#39;);
}

로그인 후 복사

1.js

import say from &#39;./util&#39;;
say();

로그인 후 복사

이번에는 1.js와 util.js를 모두 트랜스코딩해야 하면 폴더 전체를 트랜스코딩할 수 있습니다

babel demo -d dist

로그인 후 복사

새로 생성된 dist 폴더에 트랜스코딩된 파일이 있습니다. 보시다시피, 트랜스코딩 후에도 module.exportsCMD 모듈은

babel-preset-env

을 로드하는 데 여전히 사용됩니다. 위의 트랜스코딩에는 실제로 결함이 있습니다. 즉, Babel은 기본적으로 모든 코드를 es5로 변환합니다. 즉, 노드가 let 키워드를 지원하더라도 트랜스코딩 후에는 var

로 변환됩니다. babel-preset-env 플러그인을 사용하면 현재 노드 버전을 자동으로 감지하고 해당 구문만 트랜스코딩할 수 있습니다. node는 지원하지 않아 매우 편리합니다

npm install --save-dev babel-preset-env

로그인 후 복사

.babelrc

{
 "presets": [
  ["env", {
  "targets": {
   "node": "current"
  }
  }]
 ]
 }

로그인 후 복사

1.js

class F {
 say() {
  
 }
}
const a = 1;

로그인 후 복사

babel 1.js -o dist.js

로그인 후 복사

컴파일 후

"use strict";
class F {
 say() {}
}
const a = 1;

로그인 후 복사

현재 node 버전(8.9.3)에서는 지원하기 때문에 class와 const가 트랜스코딩되지 않은 것을 볼 수 있습니다. 이 구문

실제 프로젝트에서 ES6 구문을 사용하려면

Koa2에서는 비동기 구문을 지원하기 위해 Node v7.6.0 이상이 필요합니다. 동시에 Koa2에서는 import 모듈러 작성 방법도 사용하려고 합니다

npm install --save-dev babel-register

로그인 후 복사

npm install koa --save

로그인 후 복사

Create 새 폴더 app

util.js

export function getMessage() {
 return new Promise((resolve, reject) => {
  resolve(&#39;Hello World!&#39;);
 })
}

로그인 후 복사

app.js

import Koa from &#39;koa&#39;;
import { getMessage } from &#39;./util&#39;
const app = new Koa();
app.use(async ctx => {
 const data = await getMessage();
 ctx.body = data;
});
app.listen(3000);

로그인 후 복사

파일을 직접 실행하면 반드시 오류가 발생합니다

node app

로그인 후 복사

트랜스코딩하려면 항목 파일이 필요합니다

index.js

require("babel-register");
require("./app.js");

로그인 후 복사

node index

로그인 후 복사

방문 http://localhost:3000/ 페이지를 볼 수 있습니다!

babel-트랜스코딩은 실시간으로 등록되므로 실제로 퍼블리싱할 때는 앱 폴더 전체를 먼저 트랜스코딩해야 합니다

babel app -d dist

로그인 후 복사

이번에는 dist

node app

로그인 후 복사

에서 app.js를 시작하면 됩니다

rrreee

위는 제가 모두를 위해 컴파일한 내용입니다. 예, 앞으로 모든 사람에게 도움이 되기를 바랍니다.