ใช้ babel-polyfill (และไม่ใช่ polyfill.io) ใน nuxt

ฉันกำลังสร้างไซต์แบบคงที่ด้วยเทมเพลต nuxt vuetify และถึงแม้ว่ามันจะยอดเยี่ยมและมีการกำหนดค่าและการตั้งค่ามากมายให้ฉันแล้ว แต่ฉันพบว่ามันยากมากที่จะทำให้ไซต์ของฉันทำงานได้อย่างราบรื่นบน Internet Explorer (11)

เนื่องจากจำเป็นต้องแปลงรหัส ES6 ฉันจึงพยายามกำหนดค่า Babel ในแอปของฉัน และนี่คือประสบการณ์ครั้งแรกของฉันในการกำหนดค่า Babel (ดังนั้น โปรดเพิกเฉยต่อการขาดความรู้ในโดเมนของฉัน) มีปัญหา/คำถามมากมายบนอินเทอร์เน็ต และฉันได้ลองเกือบทั้งหมดแล้ว แต่ก็ไร้ผล

TL;DR ฉันใช้ Nuxt 2.x (และ Webpack 4 ภายใน) ฉันไม่รู้ว่าฉันจะรวม @babel/polyfill ไว้ที่ไหนและอย่างไร เพราะ

1. เราไม่มีจุดเข้าที่กำหนดไว้หรือชัดเจนในแอป Nuxt ซึ่งฉันสามารถนำเข้าไฟล์นั้น import '@babel.polyfill' ตามที่ระบุไว้ในหลายแห่ง รวมถึงเอกสารอย่างเป็นทางการของ Babel

2. webpack 4 ไม่มีฟิลด์ entry.vendor เช่นกัน ซึ่งฉันสามารถฉีด polyfill นั้นได้

นี่คือ nuxt.config.js ของฉัน:

babel: {
      presets: [
        ['@babel/preset-env', {
          'useBuiltIns': 'usage',
          'targets': '> 0.25%, not dead'
        }]
      ],
      plugins: ['@babel/plugin-syntax-dynamic-import', [
        '@babel/plugin-transform-runtime',
        {
          'corejs': false,
          'helpers': true,
          'regenerator': true,
          'useESModules': false
        }
      ]],
      'configFile': false,
      'babelrc': false
}

นี่คือเวอร์ชันของแพ็คเกจที่ฉันใช้:

"dependencies": {
    "@babel/polyfill": "^7.2.5"
}

"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/runtime-corejs2": "^7.3.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-dynamic-import-node": "^2.2.0"
}

หลังจาก กระทู้นี้ ฉันก็คิดที่จะผลักดัน babel polyfill เป็น ผู้ขายไปยังวัตถุรายการ webpack แต่มันทำให้ฉันมีข้อผิดพลาด: Cannot set property 'vendor' of undefined เพราะเห็นได้ชัดว่าการกำหนดค่า webpack 4 ไม่มีช่องรายการเช่นเดียวกับที่ webpack 3 เคยมี

นี่คือ การกำหนดค่า webapack ของฉัน:

{ 
  name: 'client',                                                                                                                                                                                 
  mode: 'production',
  devtool: false,
  optimization: 
   { runtimeChunk: 'single',
     minimize: true,
     minimizer: undefined,
     splitChunks: 
      { chunks: 'all',
        automaticNameDelimiter: '.',
        name: undefined,
        cacheGroups: [Object] } },
  output: 
   { path: '/home/waleed/project/.nuxt/dist/client',
     filename: '[chunkhash].js',
     chunkFilename: '[chunkhash].js',
     publicPath: '/_nuxt/' },
  performance: { maxEntrypointSize: 1024000, hints: 'warning' },
  resolve: 
   { extensions: [ '.wasm', '.mjs', '.js', '.json', '.vue', '.jsx' ],
     alias: 
      { '~': '/home/waleed/project',
        '~~': '/home/waleed/project',
        '@': '/home/waleed/project',
        '@@': '/home/waleed/project',
        assets: '/home/waleed/project/assets',
        static: '/home/waleed/project/static' },
     modules: 
      [ 'node_modules',
        '/home/waleed/projectnode_modules',
        '/home/waleed/project/node_modules/@nuxt/config/node_modules' ] },
  resolveLoader: 
   { modules: 
      [ 'node_modules',
        '/home/waleed/project/node_modules',
        '/home/waleed/project/node_modules/@nuxt/config/node_modules' ] },
  module: 
   { rules: 
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  plugins: 
   [ VueLoaderPlugin {},
     WarnFixPlugin {},
     WebpackBarPlugin {
       profile: false,
       handler: [Function],
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true,
       options: [Object],
       reporters: [Array] },
     MiniCssExtractPlugin { options: [Object] },
     HtmlWebpackPlugin { options: [Object] },
     HtmlWebpackPlugin { options: [Object] },
     VueSSRClientPlugin { options: [Object] },
     DefinePlugin { definitions: [Object] } ] 
}

ป.ล. ฉันได้เห็นและลองแล้วคำถามนี้ และแน่นอนว่ามันก็ใช้ได้ผลบ้างเช่นกัน แต่กรณีการใช้งานของฉันต้องการไม่ใช้ polyfill.io