0

babelでトランスパイルがうまくいきません。

トランスパイルしたjsファイルはできており、ほんのちょっとだけ変更されています。
(;などをつけてくれています。)
ただしそこしか変わっていません。

トランスパイル前

const add1 = i => i + 1
const multi = (n, m) => i * j

var elem = document.getElementByClassName("js-test5");
elem.innerHTML = "<span style='color: red;'>span要素に変更したよ!</span>";
 const enzann = () => {
   docment.getElementByClassName('js-test5').innerHTM('daikunn' + (50+50) + 'kg');
 }
 enzann();

トランスパイル後

const add1 = i => i + 1;
const multi = (n, m) => i * j;

var elem = document.getElementByClassName("js-test5");
elem.innerHTML = "<span style='color: red;'>span要素に変更したよ!</span>";
const enzann = () => {
  docment.getElementByClassName('js-test5').innerHTM('daikunn' + (50 + 50) + 'kg');
};
enzann();

gulpの設定と実行結果は以下の通りです。

var gulp = require('gulp');              //gulpをインポート
var babel = require("gulp-babel");

gulp.task('babeltrance', function() {
  gulp.src('dest-after/js/babel/*')
    .pipe(babel())
    .pipe(gulp.dest('dest-after/js'))
});

gulp.task('babelwatch', function() {
  gulp.watch('dest-after/js/babel/*', ['babel'])
});

gulp.task('babel', ['babeltrance']);

ちゃんと動いていそうです。

[17:59:09] Starting 'babel'...
[17:59:09] Finished 'babel' after 9.72 μs
[17:59:09] Starting 'babeltrance'...
[17:59:09] Finished 'babeltrance' after 7.16 ms
2

1 件の回答 1

5

はい。あなたのgulpで、babelはきちんと動いています。

では、なぜ「あなたが求めている変換」は行われなかったのでしょうか。
まずはREADMEちゃんと読みましょうね。
https://www.npmjs.com/package/gulp-babel

このサンプルにあるように、

.pipe(babel({
    presets: ['es2015']
}))

とすればes2015→es5への変換はだいたい行われるはずです。(一部ポリフィルかそれに類ずるものが必要なのは行われないかもしれませんし、babel-preset-es2015をインストールしておく必要もあります。)

babelでトランスパイルをするには、そのプリセットを指定してやる必要があるのです。

3
  • 前半何を言ってるのかよく分かりませんでしたが…… もしかすると読まれた記事が古かったのかもしれませんね。というのも、babel 6 より仕組みが少し変更されています。 qiita.com/kamijin_fanta/items/e8e5fc750b563152bbcf 「gulp babel」で検索してでてくるQiita記事はbabel 5の頃のものがあったのでそのせいかもしれません。「SourceMaps」は機能です。これを使えばデバッガーで変換前のコードを見ながらデバッグしたりすることが可能になります。
    – hinaloe
    2017年1月7日 11:23
  • 公式では英語なので、キータをみて行ったのですが、そこのはこのような記載がありませんでした。 公式も見ないとだめですね。 Usage は使用法のようなので絶対に記載が必要な部分ということでよろしいでしょうか? 英語なのでどこが必須でどこが必須でないか初心者にはなかなかわかりません。 Source Maps はおそらく全体像ですが、ここも必須の全体像なんですかね? 日本語があるといいのですが、webpacの時代になっても相変わらずgulpは日本語のサイトなどできないですね
    – web
    2017年1月8日 3:03
  • >>> Usage は使用法のようなので絶対に記載が必要な部分ということでよろしいでしょうか? 英語なのでどこが必須でどこが必須でないか初心者にはなかなかわかりません。 上記のみが必須の記載ということでよいでしょうか?
    – web
    2017年1月8日 3:04

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。