gulp + Babel 導入備忘録
14194 ワード
gulp + Babel 備忘録
個人的メモとして(情報が古くなっている可能性があるので参考にするときは注意)
gulpインストール
- nodeをインストール
- 適当にディレクトリを作成
- コマンドプロンプトを起動してディレクトリに移動 (
cd C:\gulp-test
) C:\gulp-test> npm init
- 色々聞かれるので答える(後で変更可能なので分からなかったらEnterで飛ばしてOK)
- package.jsonが作られる
- gulpをグローバルインストール
C:\gulp-test> npm install gulp -g
- 右のコマンドでバージョンが出たらOK
C:\gulp-test> gulp -v
- 8で表示されたバージョンを指定(
3.9.1
の部分)してローカルにもインストールC:\gulp-test> npm install [email protected] --save-dev
- 右のコマンドでローカルのgulpのバージョンが表示されたらOK
C:\gulp-test> gulp -v
Babelをインストール
- ES2015用のpresetをインストール
C:\gulp-test> npm install babel-preset-es2015 --save-dev
- gulpプラグインのBabelをインストール
npm install gulp-babel --save-dev
- babel-coreをインストール
npm install babel-core --save-dev
- ディレクトリ内に
.babelrc
を作成して以下を記述(ES2015用のプリセットを使うので)
.babelrc
{
"presets": ["es2015"]
}
gulpfileの編集
- ディレクトリ内に
gulpfile.js
を作成して以下の設定を記述 - 例としてルート直下にes2015フォルダと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ファイル作成
- 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();
トランスパイルする
- Babelを実行
C:\gulp-test> gulp babel
- 変換されたファイルがjsフォルダの中にscript.jsとして作られる
/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();
トランスパイルしたのを確認してみる
- 試しに適当なhtmlファイルを作ってes2015対応していないIE11(https://kangax.github.io/compat-table/es6/) で読み込んでみる できました
ちなみにes2015フォルダの方のscript.jsを読み込むと当然無理
参考
Author And Source
この問題について(gulp + Babel 導入備忘録), 我々は、より多くの情報をここで見つけました https://qiita.com/gigazombie/items/4227cdf25580a6c539f8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .