Skip to main content
4 / 6
[tag:babel]を追加
harry0000
  • 2,800
  • 4
  • 18
  • 22

babelでトランスパイルをしても元ファイルとほぼ同じファイルが出力されてしまう

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 postcssimport = require('postcss-import');
var postcss = require('gulp-postcss');   //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var csswring = require('csswring');
var babel = require("gulp-babel");
var browserSync = require('browser-sync').create();

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', 'babelwatch']);

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

[17:41:45] Finished 'babel' after 9.32 μs
[17:59:09] Starting 'babeltrance'...
[17:59:09] Finished 'babeltrance' after 3.6 ms
[17:59:09] Starting 'babelwatch'...
[17:59:09] Finished 'babelwatch' after 4.08 ms
[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
[17:59:09] Starting 'babelwatch'...
[17:59:09] Finished 'babelwatch' after 4.01 ms
web
  • 129
  • 1
  • 3
  • 19