>  기사  >  웹 프론트엔드  >  ES6 코드를 ES5로 변환

ES6 코드를 ES5로 변환

PHPz
PHPz원래의
2017-04-04 10:32:163059검색

이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.