用ie它为啥说语法错误

我的index.html是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是一个页面
    <script src="./dist/index.js"></script>
</body>
</html>

index.js是这样的：

import 'core-js/stable';
let a = '这是一个测试的js文件，用来babel编译';
let b = new Promise((resolve,reject)=>{
    resolve('我执行成功了，然后传到了then方法中');
});
b.then((data)=>{
    console.log(data);
});
class Person {
    constructor(name){
        this.name = name;
    }
}
let c = new Person('张三');
import age from './md.js';
let d = age;
console.log('这是一个age'+ age);
console.log(Object.assign({a:1,b:2},{c:3,d:4}));
console.log(Array.from('abcde'));

按照老师打的，打到最后，用谷歌是可以正常输出的，但是用ie试了一下说我语法错误

weixin_慕码人7523200 2021-12-15

源自：Babel 与 Webpack 4-2 loader-1

收起

1回答

好帮手慕小李 2021-12-15 11:24:37

同学你好，老师猜测ie11报错的原因是Promise引起的，在ie浏览器会出现不支持Promise（部分ES6的新语法）的情况，尝试解决方案如下：

一、检查安装core-js的版本与视频中的是否一样。如下图：

二、直接在项目中安装babel-polyfill，操作如下：

1、首先在cmd中输入 npm install babel-polyfill --save

2、在入口js文件中添加 import 'babel-polyfill' （babel-polyfill用来解决，ie浏览器不支持ES6新语法的解决方案）

效果如下：

同学自己试试，祝学习愉快。

收起回答

提问者 weixin_慕码人7523200 #1

已经删掉promise代码，已经安装polyfill，已经引入

index.js代码：

import 'core-js/stable';
import 'babel-polyfill';
let a = '这是一个测试的js文件，用来babel编译';


class Person {
    constructor(name){
        this.name = name;
    }
}
let c = new Person('张三');
import age from './md.js';
let d = age;
console.log('这是一个age'+ age);
console.log(Object.assign({a:1,b:2},{c:3,d:4}));
console.log(Array.from('abcde'));

webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',

    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude:/node_modules/,
            loader:'babel-loader'
        }]
    }
};

package.json:

{
  "name": "webpack01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.0",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

.babelrc:

{
    "presets": ["@babel/preset-env"]
}

在ie中还是显示语法错误

2021-12-15 21:11:04

提问者 weixin_慕码人7523200 #2

而且，我生成的dist目录下的index.js里面，很长，非常长
是不是因为这个太长了所以在ie显示语法错误？

2021-12-15 21:15:16
好帮手慕小李回复提问者 weixin_慕码人7523200 #3

同学你好，通过代码比对，发现同学使用webpack版本是5.xx，视频中老师使用的是4.44.1。问题就出在这里，如果按照webpack5.xx版本搭配babel，需要改动的配置文件很多，老师建议同学直接使用视频中讲师的webpack与webpack-cli版本。如下：
同学可以先试试，老师这边配置好webpack5版本后会再给同学贴一下代码的。祝学习愉快。

2021-12-16 10:43:25