Async/Await с использованием Babel Regenerator-runtime не работает в ie11

У меня есть приложение-шаблон, которое я хочу заставить работать с ie11, для этого я использую webpack + babel. По какой-то причине я игнорирую, мой JS вообще не работает в ie11, хотя я установил его в качестве цели в своей конфигурации. Чтобы проверить это, я использую ie11 в Интернете, но у меня нет доступа к ошибкам стека, так как я на MacOS.

Что мне здесь не хватает?

Исходный код для получения дополнительной информации: https://github.com/VelynnXV/Front-End-Workflow< /а>

веб-сайт: https://nifty-noether-cafbd5.netlify.app/

app.js

import regeneratorRuntime from "regenerator-runtime";

async function app() {

  console.log('App entry point')
  const template = document.getElementById('app')
  await new Promise(r => setTimeout(() => r(), 2500))
  template.innerHTML = `
  <div class="web-container">
      <div id="">
          Async / awat test
      </div>
  </div>
`
  console.log('App finished')
};
app();

веб-пакет.config.json

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: ['core-js/stable', './src/app.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'app.js',
  },
  devServer: {
    publicPath: "./src/",
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({ // will generate the html file WITH app.js
      // see plugin here : https://webpack.js.org/plugins/html-webpack-plugin/
      template: './src/index.html',
      filename: './index.html'
    })
  ],
  module: {
    rules: [ // set of rules letting webpack know how to handle .xyz files 
      {
        test: /\.m?js$/, // source: https://webpack.js.org/loaders/babel-loader/
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',

        }
      }
    ],
  },
};

Babel.config.js

// babel.config.js

module.exports = api => {
    return {
      plugins: [
        "@babel/plugin-transform-runtime",
      ],
      
      presets: [
        [
          "@babel/preset-env",
          {
            useBuiltIns: "entry",
            corejs:3,
            // caller.target will be the same as the target option from webpack
            targets: api.caller(caller => caller && caller.target === "node")
              ? { node: "current" }
              : { chrome: "58", ie: "11" }
          }
        ]
      ]
    }
  }

пакет.json

{
  "name": "front-end-workflow",
  "version": "1.0.0",
  "description": "",
  "main": "src/app.js",
  "scripts": {
    "dev": "npm run clean && npm run build && webpack serve",
    "build": "webpack",
    "clean": "rimraf ./dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.17",
    "@babel/plugin-transform-runtime": "^7.12.17",
    "@babel/preset-env": "^7.12.17",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.2",
    "html-loader": "^2.1.0",
    "html-webpack-plugin": "^5.2.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.6.3",
    "core-js": "^3.3.2"
  }
}

webpack babeljs internet-explorer-11 babel-preset-env babel-polyfill
person Lynn    schedule 20.02.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

С webpack 5 вам, возможно, придется установить target для es5, чтобы он работал в IE11 следующим образом:

// webpack.config.js

module.exports = {
  // ...
  target: ["web", 'es5'],
}
person tmhao2005    schedule 21.02.2021
comment
о боже, я потратил неделю на поиск решения, и это было все - person Lynn; 21.02.2021
comment
Почему я не нашел этого ни в одной документации? - person Lynn; 21.02.2021

arrow_upward
1
arrow_downward

Вы предоставляете две конфигурации Babel — одну, встроенную в webpack.config.js, и одну в babel.config.js. Почти уверен, что конфигурация webpack.config.js будет иметь приоритет и затмит конфигурацию babel. Так что просто измените параметр options на babel-loader в конфигурации вашего веб-пакета и придерживайтесь конфигурационного файла babel.

person thespinkus    schedule 20.02.2021
comment
Здравствуйте, я применил ваши модификации (также обновил код в своем посте), но проблема не устранена, и я не знаю, почему. Благодарность! - person Lynn; 21.02.2021
comment
Ну вот хоть одна проблема решена. В Q вы просто говорите, что ~ JS вообще не работает ... Я не уверен, в чем на самом деле сохраняется проблема. Было бы полезно, если бы вы сократили код примера до минимума, необходимого для проверки того, что Babel работает/не работает для цели. т.е. Ваша точка входа должна выглядеть примерно так: pastebin.com/E0Zw2KcX, а затем просто minwebpak и babel conf. - person thespinkus; 21.02.2021
comment
спасибо за помощь, я изменил свой app.js и установил await new Promise(r => setTimeout(() => r(), 2500)) перед изменением innerHTML моего div. На ie11 не работает. (я обновил код в своем посте) - person Lynn; 21.02.2021
comment
Есть ли какие-нибудь примеры шаблонного проекта веб-пакета с использованием Babel, который действительно работает с ie11? с импортом async/awat и scss? - person Lynn; 21.02.2021
comment
Код в Q по-прежнему довольно сложен. 1. main.js упоминать не нужно. 2. Не используйте экспорт функции для конфигурации babel, просто экспортируйте объект. 3. Вы, вероятно, можете просто удалить загрузчики SCSS webpack, чтобы сосредоточиться на async/await, что, похоже, является проблемой, с которой вы столкнулись. Вам также не нужны обнуляющие и объединяющие плагины — с этим справятся пресеты. - person thespinkus; 21.02.2021
comment
Я упростил вопрос, я просто не уверен в синтаксисе, который следует использовать, когда вы говорите «Не использовать экспорт функции для конфигурации Babel», - person Lynn; 21.02.2021