menggunakan babel-polyfill (dan bukan polyfill.io) di nuxt

Saya sedang membangun situs statis dengan templat nuxt vuetify dan meskipun templatnya mengagumkan dan menyediakan begitu banyak konfigurasi dan pengaturan yang telah dilakukan untuk saya, saya merasa sangat sulit untuk membuat situs saya berjalan lancar di Internet Explorer (11).

Karena kode ES6 perlu ditranspilasi, saya mencoba mengonfigurasi babel di aplikasi saya, dan ini adalah pengalaman pertama saya mengonfigurasi babel (jadi, abaikan kurangnya pengetahuan saya di domain). ada begitu banyak masalah/pertanyaan di internet, dan saya sudah mencoba hampir semuanya tetapi sia-sia.

TL;DR, saya menggunakan Nuxt 2.x (dan Webpack 4, secara internal), saya tidak tahu di mana dan bagaimana cara memasukkan @babel/polyfill karena,

  1. kami tidak memiliki titik masuk yang jelas atau eksplisit di aplikasi Nuxt, tempat saya dapat mengimpor file tersebut import '@babel.polyfill', seperti yang dinyatakan di sejumlah tempat, termasuk dokumentasi resmi babel

  2. webpack 4 juga tidak memiliki bidang entry.vendor, tempat saya dapat memasukkan polyfill tersebut.

inilah nuxt.config.js saya:

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
}

berikut adalah versi paket yang saya gunakan:

"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"
}

mengikuti utas ini, saya juga berpikir untuk memasukkan babel polyfill sebagai vendor ke objek entri webpack tetapi memberi saya kesalahan: Cannot set property 'vendor' of undefined karena, tampaknya, konfigurasi webpack 4 tidak memiliki bidang entri, seperti yang dulu dimiliki webpack 3.

ini adalah konfigurasi webapack saya:

{ 
  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] } ] 
}

P.S: Saya sudah melihat dan mencoba pertanyaan ini , dan itu pasti berhasil juga, tetapi kasus penggunaan saya menuntut untuk tidak menggunakan polyfill.io.


person waleed ali    schedule 22.01.2019    source sumber


Jawaban (1)


Bagi mereka yang suka membenturkan kepala seperti saya, (sebagai solusi sementara) saya memutuskan untuk menggunakan babel-polyfill CDN dan menyertakan urlnya di bagian skrip file nuxt.config.js, seperti di bawah

script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js' }
    ]

Namun, saya masih mencari sintaks ES6ish import atau require yang lebih bersih dan lebih banyak untuk mencapai hasil yang diperlukan. Jadi, silakan menambahkan lebih banyak jawaban jika Anda memiliki salah satu solusinya.

person waleed ali    schedule 25.01.2019