используя 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, куда я мог бы вставить этот полифилл.

вот мой 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 как vendor на объект ввода webpack, но он выдает ошибку: Cannot set property 'vendor' of undefined, потому что, по-видимому, в конфигурациях webpack 4 нет поля ввода, как и в случае с webpack 3.

это моя конфигурация веб-пакета:

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

PS: я уже видел и пробовал этот вопрос , и это, безусловно, тоже в некоторой степени сработало, но в моем случае использования требуется не использовать polyfill.io.


person waleed ali    schedule 22.01.2019    source источник


Ответы (1)


Для всех тех, кто, как я, бьется головами (в качестве временного решения) я решил использовать babel-polyfill CDN и включил его URL в раздел скриптов nuxt.config.js файла, как показано ниже

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

Однако я все еще ищу более чистый и более ES6ish import или require синтаксис для достижения требуемых результатов. Итак, не стесняйтесь добавлять ответы, если у вас есть одно такое решение.

person waleed ali    schedule 25.01.2019