널리 사용되는 트랜스코더 - Babel

참고:

Babel

Babel은 ES6 코드를 기존 환경에서 실행할 수 있도록 ES5 코드로 변환할 수 있는 널리 사용되는 트랜스코더입니다.

// 转码前
input.map(item => item + 1);// 转码后
input.map(function (item) {  return item + 1;});

구성 파일

---

구성 파일은 .babelrc이며 프로젝트의 루트 디렉터리에 저장됩니다. Babel 사용의 첫 번째 단계는 이 파일을 구성하는 것입니다

<span style="color: #888888"><code class=" language-javascript"><span class="token punctuation">{  <span class="token string">"presets"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">,  <span class="token string">"plugins"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">}<br/><br/><strong><code>presets</code>字段  </strong>设定转码规则，官方提供以下的规则集，你可以根据需要安装<br/></span></span></span></span></span></span></span></span></span></span></span></code></span>

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015# react转码规则
$ npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

  {"presets": [      "es2015",      "react",      "stage-2"],"plugins": []  }

babel-register

---

babel-register 모듈은 require 명령을 다시 작성하고 이에 후크를 추가합니다. 그 이후로는 require를 사용하여 .js, .jsx, .es 및 .es6 접미사가 있는 파일을 로드할 때마다 먼저 Babel을 사용하여 트랜스코딩됩니다

　　$ npm install --save-dev babel-register

사용시 반드시 babel-register 를 먼저 로딩해야 합니다

　require("babel-register");

　require("./index.js?1.1.11");

그런 다음, Index.js를 수동으로 트랜스코딩할 필요가 없습니다.

babel-register는 현재 파일이 아닌 require 명령으로 로드된 파일만 트랜스코딩한다는 점에 유의해야 합니다. 게다가 실시간 트랜스코딩이기 때문에 개발 환경에서만 사용하기 적합합니다

babel-core

---

트랜스코딩을 위해 Babel의 API를 호출해야 하는 코드가 있다면, 반드시 babel-core 모듈을 사용해야 합니다.

설치 명령: $ npm install babel-core --save , 그러면 프로젝트에서 babel-core를 호출할 수 있습니다.

var babel = require('babel-core');

// 문자열 트랜스코딩
babel.transform('code();', options);
// => ; { code, map, ast }

// 파일 트랜스코딩(비동기)
babel.transformFile('filename.js', options, function(err, result) {
result; / / => ; { code, map, ast }
});

// 파일 트랜스코딩(동기화)
babel.transformFileSync('filename.js', options);
// => 코드, 맵, ast }

// Babel AST 트랜스코딩
babel.transformFromAst(ast, code, options);
// => { 코드, 맵, ast }

객체 옵션을 구성하려면 공식 문서 http://babeljs.io/docs/usage/options/

를 참조하세요. 다음은 예시입니다.
　var es6Code = 'let x = n => n + 1';
　var es5Code = require('babel-core').transform(es6Code, {
　　　presets: ['es2015']
　})
위 코드에서 변환 메소드의 첫 번째 매개변수는 변환이 필요한 ES6 코드를 나타내는 문자열이고, 두 번째 매개변수는 변환의 구성 객체입니다.

babel-polyfill

---

Babel은 기본적으로 새로운 JavaScript 구문(syntax)만 변환하고, Iterator, Generator, Set, Maps, Proxy, Reflect와 같은 새로운 API는 변환하지 않습니다. Symbol , Promise 및 기타 전역 개체는 물론 전역 개체에 정의된 일부 메서드(예: Object.sign)는 트랜스코딩되지 않습니다.

해결책: babel-polyfill을 사용하여 현재 환경에 shim을 제공하세요

$ npm install --save babel-polyfill

스크립트 헤드에 다음 코드 줄을 추가하세요:

import 'babel-polyfill';
// 또는
require('babel-polyfill');

위 내용은 널리 사용되는 트랜스코더 - Babel의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!