配置完,没有报错,但是ie11无法打印,感觉时编译成低版本的js代码错了,帮忙看看

配置完,没有报错,但是ie11无法打印,感觉时编译成低版本的js代码错了,帮忙看看

webpack.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "babel-loader": "^8.2.5",
    "core-js": "^3.22.4"
  }
}

webpack.config.js

const path = require('path');
module.exports = {
     mode:'development',
     entry: {
         main:"./hhh/index.js",
         module:"./hhh/module.js"
     },  
     output: {
      path: path.resolve(__dirname, 'dist'), 
      filename: "[name].js",   
     },
     module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_module/,
                loader:"babel-loader",
            }
        ]
    }
}

.babelrc

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

编译前的两个js代码

下面这个叫index.js

import 'core-js/stable'
import {value,age} from './module.js'
if (value < age){
    console.log(1)
}else{
    console.log('err')
}
const a = Object.assign({x:0},{y:1});
console.log(a);
//下面这个叫module.js
const value = 10;
let age = 20;
export {value,age};

ie打印结果

https://img1.sycdn.imooc.com//climg/6271edca0981f21431431925.jpg

麻烦老师帮忙看看。


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2022-05-04 15:22:29

同学你好,因为编辑后的js文件中带有箭头函数,ie浏览器无法识别,所以会报“语法”错误。

建议修改:可以试试在webpack.config.js文件中的output下添加environment: {arrowFunction: false},让打包生成的js代码不带有箭头函数。如下:

https://img1.sycdn.imooc.com//climg/627229a3097a7ad010080390.jpg

祝学习愉快~

  • 提问者 曹雨sama #1

    谢谢老师。有一个问题,Babel-presets-env将新代码转换成老版本,为什么还会有箭头函数,箭头函数不是es6推出的语法吗?这个解决方法,要去哪里找呀,官网上我也没有找到。

    2022-05-04 15:36:42
  • 好帮手慕慕子 回复 提问者 曹雨sama #2

    同学你好,可以参考如下解析:

    1、@babel/presets-env的转换规则是基于指定的浏览器版本,如果未指定的话,会采用默认的,导致转换后的代码存在箭头函数。

    2、同学代码使用的webpack版本为5.x版本的,可以查看下官网上关于v4升级到v5的一些问题及解决方案的介绍,示例:

    https://img1.sycdn.imooc.com//climg/62723296091e453b21641136.jpg

    3、可以选择在(webpack.config.js)配置文件中的output下添加environment: {arrowFunction: false},来解决问题IE报箭头函数语法错误的问题

    具体的可以查看官网 介绍的webpack 在生成的运行时代码中可以使用哪个版本的 ES 特性

    祝学习愉快~

    2022-05-04 16:13:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师