Question

我正在用nuxt vuetify模板构建一个静态站点，虽然它很棒，并且已经为我完成了许多配置和设置，但是我发现很难使我的站点在Internet Explorer（11）上平稳运行。

由于需要编译ES6代码，因此我尝试在应用程序中配置babel，这是我第一次配置babel（因此，请忽略我对该领域缺乏知识的经验）。互联网上有如此多的问题/疑问，但几乎没有任何尝试。

TL; DR ，我使用的是Nuxt 2.x（内部是Webpack 4），我不知道在何处以及如何添加@babel/polyfill，因为，< / p>

在Nuxt应用程序中我们没有定义或显式的入口点，我可以在其中导入文件import '@babel.polyfill'，如在许多地方所述，包括babel官方文档
< / li>
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"
}

在this thread之后，我还考虑将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] } ] 
}

P.S：我已经看过this question并尝试过，它肯定也可以工作，但是我的用例要求不要使用 polyfill.io。

Answer 1

对于所有这些人，都像我一样敲着脑袋（作为临时解决方案），我决定使用babel-polyfill CDN，并将其url包含在int main() { //************************DECLARATIONS********************** typedef char INFO; INFO f_name[30]; INFO m_name[10]; INFO l_name[30]; int count; // tracks the number of iterations in do loop int workers; double rate; double hrs_worked; double gross_inc; double overtime; double tax_total; float net; float STATE_TAX; float FED_TAX; float UNI_FEE; const double OVERTIME_R = 1.5; //*****************INPUT FROM USER*************************** cout << "Enter amount of workers" << endl; cin >> workers; int employees[workers]; while(count < workers) { cout << "Enter worker's First name: " << endl; cin.getline(f_name, (sizeof(f_name)-1)); cout << "Enter worker's middle name initial: " << endl; cin.getline(m_name, (sizeof(m_name)-1)); cout << "Enter worker's last name: " << endl; cin.getline(l_name, (sizeof(l_name)-1)); cout << "Enter number of hours worked: " << endl; cin >> hrs_worked; // If statement activates if user enters incorrect values // and asks to reenter the correct value. if(hrs_worked < 0 || hrs_worked > 60) { while(hrs_worked < 0 || hrs_worked > 60) { cout << "Must be between 0 and 60: " << endl; cin >> hrs_worked; } } cout << "Enter Rate Per Hour: " << endl; cin >> rate; // If statement activates if user enters incorrect values // and asks to reenter the correct value. if(rate < 0 || rate > 50) { while(rate < 0 || rate > 50) { cout << "Must be between 0 and 50: " << endl; cin >> rate; } } count++; } system("clear"); //**********************************CALCULATIONS***************** // Calculates overtime if employee worked more than 40 hrs if(hrs_worked > 40) { overtime = (hrs_worked - 40.0) * rate * OVERTIME_R; } gross_inc = (rate * hrs_worked) + overtime; STATE_TAX = gross_inc * 0.06; FED_TAX = gross_inc * 0.12; UNI_FEE = gross_inc * 0.02; tax_total = STATE_TAX + FED_TAX + UNI_FEE; net = gross_inc - (tax_total) return 0; }文件的脚本部分中，如下所示< / p>

nuxt.config.js

但是，我仍在寻找更干净，更ES6ish script: [ { src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js' } ]或import的语法以实现所需的结果。因此，如果您有一个这样的解决方案，请随时添加更多答案。

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

1 个答案: