LoginSignup
1
2

More than 3 years have passed since last update.

gulpのみでJSXをトランスパイルしたい

Last updated at Posted at 2019-05-12

gulpのみでJSXをトランスパイルしたい

JSXコンパイルは様々情報が出ていますが
gulpのみでやっているものが出てこなかったので調べてみました。

前提

今回gulpの設定などはできているものとして進めます。

検証環境

environment.shell

$npx gulp -v
CLI version: 2.2.0
Local version: 4.0.1

gulp-babel

以下のページに従って
gulpのプラグインをインストールします。
https://www.npmjs.com/package/gulp-babel

installbabel.shell

npm install --save-dev gulp-babel @babel/core @babel/preset-env

babel-plugin-transform-react-jsx

以下のページに従ってインストールします。
https://www.npmjs.com/package/babel-plugin-transform-react-jsx

installreactjsx.shell

npm i babel-plugin-transform-react-jsx

gulpfile.js

gulpタスクを書きます。

gulpfile.js

var gulp = require('gulp'); //gulp本体の読み込み
var babel = require('gulp-babel'); //gulpプラグインの読み込み

//babelというタスクの定義をする
gulp.task('babel', function () { 
    return gulp.src('./es2015/*.js') //変換したいES2015で記述したファイルを指定
        .pipe(babel({
            plugins: ['transform-react-jsx']//babel-plugin-transform-react-jsxを使用することを定義
        }))
        .on('error', console.error.bind(console))//この行を有効にするとエラーの詳細を表示してくれる。
        .pipe(gulp.dest('./js')); //gulp.dest()でファイルの書き出し 今回はjsフォルダに
});

備考

今回のようにローカルでコンパイルする意味としては
静的なファイルとしてアップすればサーバリソースを食うこともなく
様々な処理をする体制が整えられるというメリットがあります。

JSXのコンパイルを検索すると
webpackやCDN、babeljs.ioでの情報が出てきますが
gulpのみというものの日本語情報が出てこなかったのでまとめてみました。
babel-plugin-transform-react-jsxの最終更新が
2年前なので少し気になっています。ツッコミありましたらお願いいたします。

参考URL

以下のページを参考にさせていただきました。ありがとうございました。
https://www.npmjs.com/package/gulp-babel
https://www.npmjs.com/package/babel-plugin-transform-react-jsx
https://stackoverflow.com/questions/33243895/how-convert-jsx-to-js-with-gulp-and-babel

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2