использование babel-polyfill (а не polyfill.io) в nuxt - PullRequest
Новая
       8

использование babel-polyfill (а не polyfill.io) в nuxt

0 голосов
/ 22 января 2019

Я создаю статический сайт с шаблоном 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 в качестве поставщика для входа в объект веб-пакета, но это дает мне ошибку: Cannot set property 'vendor' of undefined, потому что, по-видимому, конфигурации веб-пакета 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] } ] 
}

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

1 Ответ

0 голосов
/ 25 января 2019

Для всех тех, кто бьет их по голове, как я, (как временное решение) я решил пойти с 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 для достижения требуемых результатов. Поэтому, пожалуйста, не стесняйтесь добавлять дополнительные ответы, если у вас есть одно такое решение.

...