时间戳

首页 > 解决方案 > 在 nuxt 中使用 babel-polyfill（而不是 polyfill.io）

javascript - 在 nuxt 中使用 babel-polyfill（而不是 polyfill.io）

问题描述

我正在使用 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] } ] 
}

PS：我已经看到并尝试过这个问题，它肯定也有点工作，但我的用例要求不要使用polyfill.io。

标签： javascriptwebpackbabeljsnuxt.js

解决方案

对于所有这些，像我一样敲打他们的头，（作为临时解决方案）我决定使用 babel-polyfill CDN并将其 url 包含在nuxt.config.js文件的脚本部分中，如下所示

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

但是，我仍在寻找一种更简洁、更符合 ES6 风格的语法import或require语法来实现所需的结果。因此，如果您有这样的解决方案，请随时添加更多答案。

推荐阅读