babel-loader を 7.1.5 → 8.0.0 のアップデートで、以下のエラーが発生。
error Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "@babel/preset-env" relative to directory
解決ついでにパッケージや設定を整理したので、メモしておく。
1. 関連パッケージの入れ直し
以前 Babel を 6→7 にアップデートした際、不要になったパッケージを削除したかの記憶がなかったので、関連したものは一応全部入れ直した。webpack は入れ直す必要はないだろうが一応入れ直した。
Babel 6 で使うパッケージ群と Webpack をアンインストール
npm uninstall --save-dev babel-core babel-preset-env babel-loader webpack @babel/polyfill
Babel 7 で使うパッケージ群を Webpack インストール
npm install --save-dev @babel/core @babel/preset-env babel-loader webpack
脆弱性の自動修正（完全ではない）
npm audit fix
2. .babelrc、.browserslistrc の修正
変更前
{
"presets": [
["env", {
"targets": {
"browsers": [
'> 0.5% in JP',
'Firefox ESR'
]
}
}]
]
}
変更後
対応ブラウザの設定は、.browserslistrc で行う。
"useBuiltIns": "usage" で、指定したブラウザに必要な polyfill を import してくれる。
でも、場合によっては別途 polyfill が必要な場合もあるらしいので留意しておく。
（@babel/polyfill は不要になったのでこの記事冒頭のコマンドでアンインストールした）
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
}
合わせて .browserslistrc の編集（なければ作成）。
autoprefixer 等を使っていれば、すでにあるはず。
記述に対する対象ブラウザは browserl.ist でチェックできる
> 0.5% in JP
Firefox ESR
3. webpack.config.js の編集
presets を 'env' から '@babel/preset-env' に変更
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 変更前は 'env'
}
}
}
]
}
4. gulp に発生したエラーに対処
gulp (v4) のタスクを走らせようとすると、以下のエラーが。
[14:06:41] Failed to load external module @babel/register
[14:06:41] Failed to load external module babel-register
[14:06:41] Failed to load external module babel-core/register
[14:06:41] Failed to load external module babel/register
１番上の @babel/register をインストールすれば良い（他は旧いやつ）。
npm install --save-dev @babel/register