gulpのみでJSXをトランスパイルしたい
JSXコンパイルは様々情報が出ていますが
gulpのみでやっているものが出てこなかったので調べてみました。
前提
今回gulpの設定などはできているものとして進めます。
検証環境
$npx gulp -v
CLI version: 2.2.0
Local version: 4.0.1
gulp-babel
以下のページに従って
gulpのプラグインをインストールします。
https://www.npmjs.com/package/gulp-babel
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
npm i babel-plugin-transform-react-jsx
gulpfile.js
gulpタスクを書きます。
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