【Rails】警告の対処法：Though the “loose” option was set to “false” in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods

rails-prograshi（プロぐらし）-kv Rails
2023/6/19
記事内に広告が含まれていることがあります。

Railsでコンパイル時に大量のbabelに関する警告が発生したときの対処法について。

警告の内容

RailsのWebpackerを使ってコンパイルを実施した時に、次のような警告が発生する。

コンパイル対象のファイルの数だけ繰り返されるため、対象のファイル数が多いとターミナルがこの表記で埋め尽くされる。

ただし、エラーではなく警告なので、コンパイルができないなどの実害は発生しない。

警告の内容

Though the “loose” option was set to “false” in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the “loose” mode option was set to “true” for @babel/plugin-proposal-class-properties.
The “loose” option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
[“@babel/plugin-proposal-private-methods”, { “loose”: true }]

babel/preset-env configで、looseオプションの値がfalseにセットされていますが、babel/plugin-proposal-class-propertiesのlooseオプションの値がtrueにセットされているため、babel/plugin-proposal-private-methodsを使用しません。

babel/plugin-proposal-class-propertiesとbabel/plugin-proposal-private-methodsと babel/plugin-proposal-private-property-in-objectのlooseオプションの値は一致していなければいけません。

[“@babel/plugin-proposal-private-methods”, { “loose”: true }]を追記することでこの警告を非表示にすることができます。

Babelとは？

Babel（バベル）とは、JavaScriptが古いバージョンのブラウザでも使えるように、昔のJavaScriptの記述にコンパイルするツールです。

Babelは、無料かつオープンソースのJavaScriptトランスコンパイラであり、主にECMAScript 2015+（ES6+）コードを古いJavaScriptエンジンで実行できる下位互換バージョンのJavaScriptに変換するために使用される。Babelは、JavaScriptプログラミング言語の最新機能を使用するための一般的なツールである

wikipedia

対処法

警告の中にあるように、["@babel/plugin-proposal-private-methods", { "loose": true }]をbabelのconfigファイルに追記します。

babel.config.jsファイルはルート直下にあります。

    plugins: [
     (省略),
     ["@babel/plugin-proposal-private-methods", { "loose": true }]
    ].filter(Boolean)

保存すれば完了です。

次回のコンパイル以降は警告が表示されなくなります。

実際の記述例

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ],
      ["@babel/plugin-proposal-private-methods", { "loose": true }]
    ].filter(Boolean)
  }
}


コンパイル実行結果

確認のためファイルを変更してコンパイルを実行。

# rails webpacker:compile
Compiling...
Compiled all packs in /rails-vue/public/packs
Hash: 6398fd4a14b17d594099
Version: webpack 4.46.0
Time: 12257ms
Built at: 07/13/2021 10:58:16 AM
                                           Asset       Size  Chunks                         Chunk Names
          js/application-14139e3a84530853743f.js   69.4 KiB       0  [emitted] [immutable]  application
       js/application-14139e3a84530853743f.js.br   15.4 KiB          [emitted]
       js/application-14139e3a84530853743f.js.gz   17.8 KiB          [emitted]
      js/application-14139e3a84530853743f.js.map    205 KiB       0  [emitted] [dev]        application
   js/application-14139e3a84530853743f.js.map.br   43.9 KiB          [emitted]
   js/application-14139e3a84530853743f.js.map.gz   50.9 KiB          [emitted]
            js/hello_vue-9856c290199703e077e6.js   75.3 KiB       1  [emitted] [immutable]  hello_vue
js/hello_vue-9856c290199703e077e6.js.LICENSE.txt   87 bytes          [emitted]
         js/hello_vue-9856c290199703e077e6.js.br     24 KiB          [emitted]
         js/hello_vue-9856c290199703e077e6.js.gz   26.7 KiB          [emitted]
        js/hello_vue-9856c290199703e077e6.js.map    390 KiB       1  [emitted] [dev]        hello_vue
     js/hello_vue-9856c290199703e077e6.js.map.br    103 KiB          [emitted]
     js/hello_vue-9856c290199703e077e6.js.map.gz    120 KiB          [emitted]
                                   manifest.json  689 bytes          [emitted]
                                manifest.json.br  166 bytes          [emitted]
                                manifest.json.gz  200 bytes          [emitted]
Entrypoint application = js/application-14139e3a84530853743f.js js/application-14139e3a84530853743f.js.map
Entrypoint hello_vue = js/hello_vue-9856c290199703e077e6.js js/hello_vue-9856c290199703e077e6.js.map
 [0] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css& 771 bytes {1} [built]
 [1] (webpack)/buildin/global.js 905 bytes {1} [built]
 [2] (webpack)/buildin/module.js 552 bytes {0} [built]
 [7] ./app/javascript/packs/application.js 480 bytes {0} [built]
 [8] ./app/javascript/channels/index.js 205 bytes {0} [built]
 [9] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
[10] ./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css& 746 bytes {1} [built]
[12] ./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css& 759 bytes {1} [built]
[17] ./app/javascript/packs/hello_vue.js + 6 modules 5.97 KiB {1} [built]
     | ./app/javascript/packs/hello_vue.js 1.85 KiB [built]
     | ./app/javascript/app.vue 552 bytes [built]
     | ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true& 213 bytes [built]
     | ./app/javascript/app.vue?vue&type=script&lang=js& 364 bytes [built]
     | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true& 228 bytes [built]
     | ./node_modules/babel-loader/lib??ref--7-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 86 bytes [built]
     |     + 1 hidden module
    + 9 hidden modules

root@59229383d91c:/rails-vue#

先ほどまで表示されていたBabelの警告が一切表示されなくなりました。

タイトルとURLをコピーしました