Vue-cli3、Webpack4、babel7で、IE11向けの「@babel/preset-env」を使いたい

Vue.jsで作っていて、IE11が真っ白になる時。

SCRIPT1003 Expected ':'

このエラーが何か分からなくて、困る時がありますよね？
おそらくbabelの設定が、うまくできてないだけだと思います。

IE11は...

{ value }というようなshort-handが使えず、
{ key: value }にしていないと駄目だったり、

hoge(){}というような関数の省略した書き方は使えず、
hoge: function(){}という書き方にしたり、

data:() => {}というようなアロー演算子は使えないので、
data: function(){ return }に直してみたり...

そもそもコレbabelで解決するべき事ですよね。。

babel.config.jsって、難しいですよね。
babel-polyfillは非推奨ですって言うけど、じゃあどうしろとか説明ないし。

babel7以降で、IE11向けに@babel/preset-envを使いたい時。

とりあえずインストール

今回参考にした記事がvue2-dropzoneのissueなので、ほぼ関係ないと思いますが、
vue2-dropzone以外でも使える書き方みたいです。
まあとりあえず、参考記事の通り入れます。

$ npm install -D vue2-dropzone

vue.config.js

module.exports = {
  //（※通常の設定は省略しています）
  //↓webpack.config.jsの内容を変更する時の書き方
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: (file) => (
            /node_modules/.test(file) &&
            !/vue2-dropzone/.test(file)
          ),
          use: [
            { loader: "babel-loader" },
          ],
        }
      ],
    },
  }
};

babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
  overrides: [
    {
      test: ["./node_modules/vue2-dropzone"],
      presets: [
        ["@babel/preset-env", { targets: { ie: "11" } 
        }],
      ],
      plugins: [
        '@babel/plugin-transform-arrow-functions',
        '@babel/plugin-transform-shorthand-properties',
      ]
    }
  ],
}

'@babel/plugin-transform-arrow-functions',
'@babel/plugin-transform-shorthand-properties',
これがうまく動いていれば、IE11で見えるはずです。

以上です。

参考記事