よく分からないまま Babel 関連のパッケージをアップデートしてみた

メインサイト Neo's World には、軽微な JavaScript を組み込んでいる。コーディング時は ES2015 で実装し、Gulp の Watch タスクにて Babelify を使ってトランスパイルと圧縮をしている。

Babelify の使い方については以下の記事で説明した。

• Browserify + Babelify + Babel-Preset-ES2015 で ES2015 をトランスパイルして1つのファイルに結合する

お馴染み Browserify で複数のファイルを1つにまとめるのだが、その際にトランスパイルするためのツールを間に挟み込むことができる。そのツールとして Babelify を指定し、Babelify が使用するトランスパイルの設定情報として、Babel-Preset-ES2015 というパッケージを読み込む、という関係。

Browserify でバンドルする際のオプションに、Babel ラッパー的な位置付けの Babelify が横入りし、どういう言語設定でトランスパイルするか、という内訳は Babel-Preset-ES2015 というパッケージを指定する、という関係だった。

今回、Neo's World の構築に使用するパッケージ群をアップデートしようと思い立っていじりはじめたところ、Babel 周りのパッケージ名が変わっていたので、その部分だけ抜き出してまとめる。

目次

• 開発リポジトリ
• 元の状態
• バージョンアップしてみる
• 変更後

開発リポジトリ

Neo's World のソースコードは以下のリポジトリで公開している。

• GitHub - Neos21/neos21.net: Repository of Neo's World

このうち、今回記事にするのはこのコミットの中の一部。

• 各種パッケージをアップデート ef7c627

元の状態

Babel 関連の元の状態を抜粋。

• package.json

"devDependencies": {
  "babel-preset-es2015": "6.24.1",
  "babelify": "7.3.0",
  // 中略…

• gulpfile.js … JavaScript ファイルの変換タスク

gulp.task('js', () => {
  return $.browserify({
    entries: ['./src/scripts/index.js'],  // エントリポイント
    transform: [
      ['babelify', {         // Babelify
        presets: ['es2015']  // Babel-Preset-ES2015
      }]
    ]
  })
    .bundle()  // Do Browserify!
    .on('error', function(error) {
      console.log(`Browserify Error : ${error.message}`);
      this.emit('end');
    })
    .pipe($.vinylSourceStream('scripts.js'))  // Vinyl に変換しリネームする
    .pipe($.vinylBuffer())                    // Uglify できるように変換する
    .pipe($.uglify())                         // Uglify する
    .pipe(gulp.dest('./dist'));               // ./dist/scripts.js を出力する
});

['babelify', { presets: ['es2015'] }] 部分で、babelify と babel-presets-es2015 の2パッケージを探しに行ってトランスパイルしている。

その他、当然ながら Gulp 本体、Browserify などは devDependencies に記述してインストールしてある。

バージョンアップしてみる

で、npm outdated したり、npmjs で README を見てみたりしたところ、どうも Babel 7 からはスコープ付きパッケージに名前が変わっているっぽかった。

今回の Babel 7 で最大の変更点は、何と言ってもスコープ付きパッケージ方式（scoped packages）の採用だと考えます。簡単に言うと、パッケージ名が babel-* から @babel/* に変更された、ということです。以下、例です。

• babel-cli -> @babel/cli
• babel-core -> @babel/core
• babel-preset-env -> @babel/preset-env

• 参考 : Babel 7 リリースプレビュー

それと、babel-presets-es2015 のような、プリセット系のパッケージが非推奨になっていて、babel-preset-env ないしは @babel/preset-env を使うように、となっていた。

ECMAScript 仕様は年々アップデートされるので、年次を指定する必要性が徐々に薄れてきており、また preset-env パッケージを使えば実行環境に合わせて自動で適切なプリセットを選んでくれます。

なんか @babel/preset-env がうまいことやってくれるっぽいので、コレに従うことにした。

さらに、@babel/core というコアパッケージが、Dependency ではなく Peer Dependency に変わった。コアモジュールのバージョンを利用者に固定してもらうためと思われる。つまりは @babel/core を package.json に書かないといけなくなった、ということ。

変更後

そういうワケで、バージョンアップして正常に動作するように直したコードは以下のようになった。

• package.json

"devDependencies": {
  "@babel/core": "7.1.2",        // 新規追加
  "@babel/preset-env": "7.1.0",  // babel-presets-es2015 から変更
  "babelify": "10.0.0",          // バージョンアップ
  // 中略…

• gulpfile.js

gulp.task('js', () => {
  return $.browserify({
    entries: ['./src/scripts/index.js'],  // エントリポイント
    transform: [
      ['babelify', {                    // Babelify : 変更なし
        presets: ['@babel/preset-env']  // Babel Preset-Env に変更
      }]
    ]
  })
    .bundle()  // Do Browserify!
    .on('error', function(error) {
      console.log(`Browserify Error : ${error.message}`);
      this.emit('end');
    })
    .pipe($.vinylSourceStream('scripts.js'))  // Vinyl に変換しリネームする
    .pipe($.vinylBuffer())                    // Uglify できるように変換する
    .pipe($.uglify())                         // Uglify する
    .pipe(gulp.dest('./dist'));               // ./dist/scripts.js を出力する
});

以上。パッケージ名が変わって混乱するかと思ったが、@babel/core を Dependencies に追加して、babel-presets-es2015 を @babel/preset-env に変更して、presets: ['es2015'] 部分を presets: ['@babel/preset-env'] に変えるだけで済んだ。

そうそう、今回、Gulp 本体は v4 に上げていない。Gulp 離れしたいところなんだけど、やっぱり Watch とか楽でつい使い続けている。

あと、gulp-sass でも @import で .css ファイルをインポートした時に警告が出るようになって、うまく直せず。

• ポートフォリオサイトっぽいモノを GitHub Pages に作ってみた

.css なファイルを @import している SCSS ファイルをコンパイルしようとすると、node-sass がワーニングを出してくるのだが、イマイチ詳細や解決策が分からない。謎の node-sass-loader 的なパッケージを入れろとか書いてあったが、よく分からないのでワーニングごと無視することにした。

この件の関連。もう @neos21/neos-normalize も SCSS ファイルを配布するか…。