ES6 코드를 ES5로 변환

이 글에서는 Gulp와 Babel 6을 사용하여 ES6 코드를 ES5 코드로 변환하는 방법을 소개합니다.

다른 도구를 사용하여 Babel로 작업하는 경우 여기에서 볼 수 있습니다. Gulp가 무엇인지 모르시나요? 먼저 Gulp 시작하기 가이드를 확인해 보세요.

1. 설치종속성

전역 Gulp 설치

npm install -g gulp

프로젝트에 사용된 Gulp 설치

npm install --save-dev gulp

Babel에 Gulp 설치 플러그인

npm install --save-dev gulp-babel

Babel

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

에 ES6를 ES5로 변환하기 위한 플러그인을 설치합니다. 2. Gulp 구성

gulp파일.js 콘텐츠,

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

gulp.task("default", function () {
  return gulp.src("src/**/*.js")// ES6 源码存放的路径
    .pipe(babel()) 
    .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
});

형식 Soucemap을 생성하려면 다음 형식으로 gulp-sourcemaps를 사용하세요.

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

gulp.task("default", function () {
  return gulp.src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("all.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

3 . Babel 구성

> 프로젝트 루트 경로에 .babelrc 파일을 생성합니다. 내용은

{
  "presets": ["es2015"]
}

4입니다.

를 변환하고 명령줄에서

gulp

를 실행하세요.

---

위 내용은 ES6 코드를 ES5로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!