Improve: Babelの設定を最新化する

[manabuyasuda]

No description provided.

[manabuyasuda]

@babel/polyfillを削除。

🚨 As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

https://babeljs.io/docs/en/babel-polyfill

@babel/preset-envで"useBuiltIns": "usage"と指定して、必要なモジュールを読み込むようにしている。
@babel/polyfillを残しても結果は変わらなかったが、必要ないので削除する。

[manabuyasuda]

Babel7からプロジェクトワイドなコンフィグにbabel.config.jsが、ディレクトリごとに設定を上書き？変更？する場合に.babelrcや.babelrc.jsを使うらしい。

Babel has two parallel config file formats, which can be used together, or independently.

Project-wide configuration
File-relative configuration
.babelrc (and .babelrc.js) files
package.json files with a "babel" key

https://babeljs.io/docs/en/config-files#project-wide-configuration

[manabuyasuda]

babel.config.jsにするとエラーになってしまう。

// パターン1
module.exports = function (api) {
  api.cache(true);

  const presets = [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: 3
      }
    ]
  ];

  return {
    presets
  };
}

// パターン2
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: 3
      }
    ]
  ]
};
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: 3
      }
    ]
  ]
};

// パターン3
const presets =  [
  ['@babel/preset-env', {
    'useBuiltIns': 'usage',
    'corejs': 3
  }]
];
module.exports = { presets }

エラー

WARNING in ./src/assets/js/polyfill.js 6:0-13
"export 'default' (imported as 'svg4everybody') was not found in 'svg4everybody'
 @ ./src/assets/js/site.js

rootModeを指定したり、

 module: {
  rules: [{
    loader: "babel-loader",
    options: {
      rootMode: "upward",
    }
  }]
}

resolveを指定してもダメだった。

        resolve: {
          modules: ['node_modules'],
          extensions: ['.js'],
          alias: {
            vue$: 'vue/dist/vue.esm.js',
          },
        },