gulp + Babel 소개 비망록
gulp + Babel 비망록
개인적인 메모로서(정보가 오래되었을 가능성이 있으므로 참고로 할 때는 주의)
gulp 설치
cd C:\gulp-test ) C:\gulp-test> npm init C:\gulp-test> npm install gulp -g C:\gulp-test> gulp -v 3.9.1 부분)하여 로컬에 설치 C:\gulp-test> npm install [email protected] --save-dev C:\gulp-test> gulp -v Babel 설치
C:\gulp-test> npm install babel-preset-es2015 --save-dev npm install gulp-babel --save-dev npm install babel-core --save-dev .babelrc를 만들고 다음을 설명합니다 (ES2015 용 사전 설정 사용)..babelrc
{
"presets": ["es2015"]
}
gulpfile 편집
gulpfile.js를 만들고 다음 설정을 설명합니다 gulpfile.js
var gulp = require('gulp'); //gulp本体の読み込み
var babel = require('gulp-babel'); //gulpプラグインの読み込み 今回はbabel
// babel
//各処理を実行した結果を.pipe()で次に渡してあげてる
gulp.task('babel', function () { //このタスクにbabelって名前をつける
gulp.src('./es2015/script.js') //変換したいES2015で記述したファイルを指定
.pipe(babel()) //babel()でバベってくれと記述
.pipe(gulp.dest('./js')); //gulp.dest()でファイルの書き出し 今回はjsフォルダに
});
ES2015 파일 만들기
script.js 만들기 ES2015에서 여러 가지 쓰기 /es2015/script.js
//class構文
class Person{
constructor(name, mt){
this.name = name;
this.mt = mt;
}
climb() {
console.log(`${this.name} is climbing ${this.mt}`); //テンプレートリテラル
}
}
let kokona = new Person('Kokona', 'Mt.Takao');
kokona.climb();
트랜스파일
C:\gulp-test> gulp babel /js/script.js
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
//クラス構文
var Person = function () {
function Person(name, mt) {
_classCallCheck(this, Person);
this.name = name;
this.mt = mt;
}
_createClass(Person, [{
key: 'climb',
value: function climb() {
console.log(this.name + ' is climbing ' + this.mt + '.'); //テンプレートリテラル
}
}]);
return Person;
}();
var kokona = new Person('Kokona', 'Mt.Takao');
kokona.climb();
트랜스파일을 확인해 보기
로 읽어보기
할 수있었습니다
덧붙여서 es2015 폴더의 script.js를로드하면 당연히 무리
참고
Reference
이 문제에 관하여(gulp + Babel 소개 비망록), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/gigazombie/items/4227cdf25580a6c539f8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
