바벨이 es6을 es5로 변환할 수 있나요?

예, 변환 방법: 1. 프로젝트 루트 디렉터리에서 "npm install -g babel-cli --save-dev" 명령을 실행하여 프로젝트에 Babel을 설치하고 Babel 구성 파일 ".babelrc"를 2. 프로젝트에 gulp 및 gulp-babel을 설치하고 "gulpfile.js" 파일을 구성합니다.

이 튜토리얼의 운영 환경: windows7 시스템, ECMAScript 6&&babel 버전 6, Dell G3 컴퓨터.

우리는 여전히 ES5에 집착하고 있지만 ES6이 출시된 지 몇 년이 되었는지 모릅니다. 시대는 발전하고 있으며 WEB 프론트엔드 기술도 날이 갈수록 변화하고 있습니다. 이제 변화가 필요한 때입니다!

ECMAScript 6(ES6)은 매우 빠르게 발전하고 있지만 최신 브라우저는 ES6의 새로운 기능에 대한 지원이 높지 않기 때문에 ES6의 새로운 기능을 브라우저에서 직접 사용하려면 다른 도구를 사용해야 합니다.
Babel은 널리 사용되는 트랜스코더입니다. Babel은 ES6 코드를 ES5 코드로 완벽하게 변환할 수 있으므로 브라우저 지원을 기다리지 않고도 프로젝트에서 ES6 기능을 사용할 수 있습니다.

Babel 6과 이전 버전의 차이점:

이전 버전은 Babel만 설치하면 되기 때문에 이전 버전에는 많은 내용이 포함되어 있고 이로 인해 불필요한 것도 많이 다운로드하게 됩니다. 그러나 바벨 6에서는 바벨이 babel-cli와 babel-core라는 두 개의 패키지로 분할되었습니다. CLI(터미널 또는 REPL)에서 babel을 사용하려면 babel-cli를 다운로드하고, 노드 다운로드 babel-core에서 사용하려면 바벨을 다운로드하세요. Babel 6은 최대한 모듈화하여 만들었기 때문에 여전히 Babel 6 이전 방식을 사용하여 ES6을 변환하면 플러그인을 설치해야 하기 때문에 변환이 되지 않습니다. 화살표 기능을 사용하려면 화살표 기능 플러그인 npm install babel-plugin-transform-es2015-arrow-functions를 설치해야 합니다.

이 기사에서는 ES6의 구문 기능에 대해 논의하지 않고 ES6 코드를 ES5 코드로 변환하는 방법에 중점을 둡니다.

Babel transcoding:

ES6를 접해보지 않으셨다면, 다음 코드를 보시면 조금 당황스러우실 겁니다. ) ), 하지만 당신이 읽은 내용이 맞습니다. 이것은 ES6입니다. 보든 안 보든 여기 있어요.

var a = (msg) => () => msg;
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

사실 위 코드를 Babel로 변환한 후에는 다음과 같습니다.

"use strict";
 
var a = function a(msg) {
  return function () {
    return msg;
  };
};
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;
 
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

자, 다시 본론으로 돌아가 위의 트랜스코딩 효과를 얻기 위한 몇 가지 방법을 시도해 보겠습니다.

1. Babel 직접 설치 방법:

1.1) 먼저 Babel을 전역으로 설치합니다.

$ npm install -g babel-cli
 
//也可以通过直接将Babel安装到项目中，在项目根目录下执行下面命令，同时它会自动在package.json文件中的devDependencies中加入babel-cli
//在执行安装到项目中命令之前，要先在项目根目录下新建一个package.json文件。
$ npm install -g babel-cli --save-dev

Babel을 프로젝트에 직접 설치하면 package.json 파일의 devDependency에 babel-cli가 자동으로 추가됩니다. 아래와 같이

	//......
	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2"
	  }
	}

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

이 파일의 전체 파일 이름은 ".babelrc"이며, 시작 부분에 "."가 있다는 점에 유의하세요. 내 컴퓨터는 Windows 시스템이므로 이 파일을 만들 때 항상 "파일 이름을 입력해야 합니다."라는 오류가 발생합니다. 나중에 구글링해서 찾아보니 이 파일을 만들때 파일명을 ".babelrc."로 바꿨네요. 참고로 앞뒤에 점이 있으니 잘 저장되겠죠

	{
	  "presets": [],
	  "plugins": []
	}

1.3) 사전 설정 필드의 트랜스코딩 규칙 공식은 다음과 같은 규칙 세트를 제공하며 필요에 따라 설치할 수 있습니다.

Babel 중국어 공식 웹사이트 사전 설정 구성 페이지로 이동하려면 여기를 클릭하세요: Babel Plugins

	# 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

1.4) 공식 웹사이트의 지시에 따라 npm을 사용하여 이러한 플러그인 도구를 설치한 후 다음 규칙을 추가해야 합니다. .babelrc. 아래와 같이:

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

1.5) 트랜스코딩 및 트랜스코딩 규칙:

	# 转码结果输出到标准输出
	$ babel test.js

	# 转码结果写入一个文件
	# --out-file 或 -o 参数指定输出文件
	$ babel a.js --out-file b.js
	# 或者
	$ babel a.js -o b.js

	# 整个目录转码
	# --out-dir 或 -d 参数指定输出目录
	$ babel src --out-dir lib
	# 或者
	$ babel src -d lib

	# -s 参数生成source map文件
	$ babel src -d lib -s

2. 도구 구성 방법:

실제로 우리는 , common grunt, gulp, Webpack 및 Node 등 아래에서는 나에게 좀 더 익숙한 gulp 구성 방법에 대해 간략하게 설명하겠습니다.

여기를 클릭하면 Babel 중국어 공식 웹사이트로 이동합니다. 도구 구성 페이지: Babel Tool

2.1) 먼저 프로젝트에 gulp를 설치해야 합니다.

	$ npm install gulp --save-dev

2.2) 그런 다음 프로젝트에 gulp-babel을 설치해야 합니다. :

	$ npm install --save-dev gulp-babel

Dang 위의 두 명령을 실행하면 루트 디렉터리의 package.json 파일 내용이 다음과 같이 자동으로 수정된 것을 확인할 수 있습니다.

	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2",
	    "gulp": "^3.9.1",
	    "gulp-babel": "^6.1.2"
	  }
	}

2.3) gulpfile.js 파일을 작성합니다.

	var gulp = require("gulp");
	var babel = require("gulp-babel");

	gulp.task("default", function () {
	  return gulp.src("src/a.js")
	    .pipe(babel())
	    .pipe(gulp.dest("lib"));
	});

현재 프로젝트 디렉터리에서 다음 명령어를 실행하면 원래 src 폴더에 있던 a.js 파일(ES6 표준에 따라 작성됨)이 ES5 표준 a로 트랜스코딩된 것을 확인할 수 있습니다. .js이며 lib 폴더에 저장됩니다.

	$ gulp default

	#或者用下面的命令也行
	$ gulp

【관련 추천: javascript 비디오 튜토리얼, 프로그래밍 비디오】

위 내용은 바벨이 es6을 es5로 변환할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!