首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

默认的webpack箭头函数IE11问题

是指在使用webpack构建项目时,如果箭头函数没有经过特殊处理,可能会在IE11等旧版浏览器中出现兼容性问题。

箭头函数是ES6中引入的一种新的函数语法,它具有更简洁的语法形式和绑定this的特性。然而,箭头函数在IE11及以下版本的浏览器中不被支持,会导致代码执行错误。

为了解决这个问题,可以通过使用Babel等工具对箭头函数进行转换,将其转换成普通的函数表达式,以确保在旧版浏览器中能够正常运行。

在webpack中,可以通过babel-loader来实现对箭头函数的转换。具体步骤如下:

  1. 首先,安装必要的依赖:
代码语言:txt
复制
npm install babel-loader @babel/core @babel/preset-env webpack --save-dev
  1. 在webpack配置文件中,添加babel-loader的规则:
代码语言:txt
复制
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};
  1. 创建.babelrc文件,并添加babel转换的配置:
代码语言:txt
复制
{
  "presets": ["@babel/preset-env"]
}

通过上述配置,webpack将会使用babel-loader对项目中的JavaScript文件进行处理,将箭头函数转换成普通的函数表达式,从而解决在旧版浏览器中出现的兼容性问题。

推荐的腾讯云相关产品:无

相关链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js this问题和es6箭头函数this问题

如果把最后一行代码修改为   o.m.apply(o); //1 ES6中箭头函数与普通函数this区别 普通函数this: 1. this总是代表它直接调用者, 例如 obj.func ,那么...undefined 4.使用call,apply,bind(ES5新增)绑定,this指的是 绑定对象 箭头函数this 默认指向在定义它时,它所处对象,而不是执行时对象, 定义它时候,可能环境是...,定时器中函数,由于没有默认宿主对象,所以默认this指向window 问题: 如果想要在setTimeout中使用这个对象引用呢?...var obj={ fn:function(){ console.log(this); } } obj.fn();//object 以上这段代码是再浅显不过this指向问题,也就是谁调用函数...); }); } } obj.fn();//object this又指向函数宿主对象了 为了更加清楚对比一般函数箭头函数this指向区别,我们给对象添加变量 var obj=

1.3K30
  • 面试官:箭头函数和普通函数区别?箭头函数this指向哪里?

    一、箭头函数更直观、简洁 箭头函数为匿名函数 let a = () => {} 有一个参数可省略(),多个的话不能省略(),用 ,号分开 let a = m => {} let b = (m, n...console.log(this, '箭头函数 this 执行环境') // window }, fn2: function () { console.log(this.name.../ undefined console.log(b.prototype); // {constructor: ƒ} 五、箭头函数参数不能用arguments,值是有外围非箭头函数所决定 //...报错 let a = (m) => { console.log(arguments) } a(1,2,3) // arguments is not defined // 值是有外围非箭头函数所决定...函数,不能使用yield关键字 箭头函数this指向为其上下文this,一级一级往上找,直到找到 window 当然箭头函数与普通函数区别还有很多,小编总结也不是很齐全,有想法,请各位看官大大多多交流指正

    55230

    箭头函数this值

    其实那只是其中一个因素,还有一个因素就是在ZnHobbies方法中this已经不属于上一个区块,而这里this并没有name值。...所以 解决办法其中一个就是在ZnHobbies函数中写入 var that = this; 然后将this替换成that,所以输出结果中,就有了lucifer名字啦。...还有的一个办法就是将ZnHobbies函数map改写成箭头函数: ZnHobbies: function () { this.hobbies.map((hobby)=...为什么箭头函数可以达到这样效果呢?是因为箭头函数没有它自己'this'值。它this值是继承于它父作用域。...所以它不会随着调用方法改变而改变,所以这里this值就指向它父级作用域,而上一个this指向是Lucifer这个Object。所以我们就能准确得到Lucifername值啦。

    2.2K20

    箭头函数与普通函数区别

    说到箭头函数和普通函数区别,大家都一定会觉得这是一道高频面试题,但许多人其实对它们理解还不够到位,今天我就来帮大家打造一个更清晰认知。...01  【从定义方式来看】 【普通函数】 定义普通函数方式通常有函数声明和函数表达式: 【箭头函数箭头函数是普通函数语法糖(使用语法糖能够增加程序可读性,从而减少程序代码出错机会),书写要更加简洁...【箭头函数】 无论是严格模式还是非严格模式下,this始终指向window: 箭头函数没有自己执行上下文,this指向是在定义函数时就被确定下来箭头函数this,永远指向外层作用域中最接近自己普通函数...箭头函数会忽略任何形式this指向改变(bind、call、apply等方式无法改变箭头函数this指向),箭头函数this指向是静态: 03 【从构造函数来看】 【普通函数】 通过new关键字调用普通函数...,保存着函数执行时传入参数: 【箭头函数箭头函数没有arguments: 05 【补充】 箭头函数没有prototype属性 箭头函数不能当做Generator函数,不能使用yield关键字

    72420

    普通函数箭头函数区别

    详解箭头函数和普通函数区别以及箭头函数注意事项、不适用场景 箭头函数是ES6API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家喜爱。...它们(call、aaply、bind)会默认忽略第一个参数,但是可以正常传参。 然后我又通过隐式绑定来尝试同样也失败了,new调用会报错,这个稍后再说。...(全局对象) 唔,这个问题实际上是面试官提出来,当时我认为箭头函数规则就是:箭头函数this指向继承自外层第一个普通函数this,现在看来真是不严谨(少说一个定义时候),要是面试官问我:定义和执行不在同一个普通函数中...这里跟我之前写this绑定规则不太一样(不懂可以点进去看一下),普通函数默认绑定规则是: 在非严格模式下,默认绑定this指向全局对象,严格模式下this指向undefined 如果箭头函数外层没有普通函数继承...this.array.push('全局对象下没有array,这里会报错'); // 找不到push方法 } }; obj.sum(); 上述例子使用普通函数或者ES6中方法简写来定义方法,就没有问题

    85430

    普通函数箭头函数区别

    1、this指向问题(重要) MDN描述是箭头函数不会创建自己this他只会从自己作用域链上一层继承this,这里我们可以理解为this指向外层第一个普通函数(如果没有,则指向全局对象(可通过...console.log(globalThis) // Window obj.fn() // Window obj.fn2()() // {name: 'zs', fn: ƒ, fn2: ƒ} 1、箭头函数...ReferenceError: arguments is not defined console.log(args); // [1, 2, 3] } fn(1, 2, 3) 3、不能和new一起用,会报错 也就是说箭头函数不能被用作构造函数...console.log(Fn.prototype) // undefined let f = new Fn(); // Uncaught TypeError: Fn is not a constructor 以上就是关于箭头函数和普通函数区别...,最重要就是关于this指向问题,有更多箭头函数知识大家可以看看MDN上内容,里面有很详细讲解,希望本篇文章能够帮助大家解决一些疑惑,感谢您观看。

    36510

    JavaScript|箭头函数用法

    问题描述 JavaScript ES6标准新增了比较重要一种新函数:Arrow Function(箭头函数),但大多数人都不能很好了解箭头函数用法,也不能区别箭头函数和function(),所以接下来我们就来介绍一下箭头函数...解决方案 1 箭头函数写法 () => {}//举例x => x*2 //x返回值变成x*2箭头函数定义包括一个参数列表,函数体放在最后。...this指向 箭头函数总是函数表达式;并不存在箭头函数声明。...同时箭头函数看上去是匿名函数(它们没有用于递归或者事件绑定 / 解绑定命名引用)一种简写,但实际上,箭头函数和匿名函数有个明显区别:箭头函数内部this是词法作用域,由上下文确定。...3 箭头函数与function()函数区别 通过上面对于箭头函数讲解就可以发现虽然有时候可以将function()函数变为箭头函数,但两者还是有很大区别的: a.箭头函数体内this对象,就是定义时所在对象

    73120

    箭头函数与普通函数区别详解

    箭头函数和普通函数区别 一.外形不同:箭头函数使用箭头定义,普通函数中没有 代码实例如下: // 普通函数 function func(){ // code } // 箭头函数 let func...但是构造函数不能用作构造函数。 四.箭头函数中this指向不同 在普通函数中,this总是指向调用它对象,如果用作构造函数,this指向创建对象实例。...1.箭头函数本身不创建this 也可以说箭头函数本身没有this,但是它在声明时可以捕获其所在上下文this供自己使用。...(2)使用new调用wrap()函数之后,此函数作用域中this指向创建实例化对象。 (3)箭头函数此时被声明,捕获这个this。 (4)所以打印是恩诺2,而不是恩诺1。...总结: (1).箭头函数 this 永远指向其上下文 this ,任何方法都改变不了其指向,如 call() , bind() , apply() (2).普通函数this指向调用它那个对象

    83320

    简单说 JavaScript箭头函数

    说明 箭头函数本质还是函数,我们来看看他与JavaScript中普通函数区别,先看看写法上区别。 ?...解释 写箭头函数,我们记住一个顺序就好,参数、箭头函数体、这个顺序记住就足够了,参数、箭头函数体、这三个是必须函数名可以没有,但这三项必须有,一些简写方式也是简写这三项里东西。...与 普通函数 其他区别 1、箭头函数没有自己this。...箭头函数会捕获其所在上下文 this 值,作为自己 this 值。 2、箭头函数 this 不可变。...4、箭头函数没有arguments对象。 1、箭头函数没有自己this。箭头函数会捕获其所在上下文 this 值,作为自己 this 值。

    53120

    vue2知识点:箭头函数和普通函数this指向问题

    @toc摘要记录此文章是因为本人是vue初学者,刚看完尚硅谷教学视频,到现在为止对箭头函数和普通函数this指向问题直接弄混了,所以特意查阅相关博客并记录下自己总结。...主要区别普通函数:(谁调用我,我this就指向谁)箭头函数:(箭头函数没有自己this, 它this是继承而来, 它会捕获其所在(即定义位置)上下文this值, 作为自己this值;或者说默认指向在定义它时所处对象...详细说明注意点1:不被vue所管理函数(定时器回调函数、ajax回调函数等、Promise回调函数=》JS引擎帮忙调用)那么请使用箭头函数,因为箭头函数中this指代vm或者vc。...默认情况下,没有直接调用者,this指向为window),这样this指向才是vm 或 组件实例对象。...,我回答是:不被vue所管理函数(定时器回调函数、ajax回调函数等、Promise回调函数=》JS引擎帮忙调用)那么请使用箭头函数

    11300

    IE11CSS兼容性问题

    最近测试给了我一大堆BUG,一瞅发现全是IE11。吐槽一下这个浏览器真的比较特立独行。很多默认样式跟别的浏览器不同,而且最明显一点应该是padding左右内边距往往比别的浏览器大了一倍。...但是当需要修改时候又头疼了。如果改变原有的padding值,那么在IE11生效了。别的浏览器又有问题了。...于是在网上搜了一下有没有专门针对IE11CSShack,就是只对IE11生效CSS样式,一查还真有。...样式要写在最后面防止被覆盖,当浏览器为IE11时,@media中样式会被执行一遍。   ...这个时候你只要针对专门input标签,增加一个input{outline:none};就可以将红色边框去掉了。   今天大拿直接一行代码把我之前IE11兼容性问题全解决了。不服不行。

    2.1K40

    论普通函数箭头函数区别以及箭头函数注意事项、不适用场景

    箭头函数this指向在定义时候继承自外层第一个普通函数this。 下面栗子中在一个函数中定义箭头函数,然后在另一个函数中执行箭头函数。...它们(call、aaply、bind)会默认忽略第一个参数,但是可以正常传参。 然后我又通过隐式绑定来尝试同样也失败了,new 调用会报错,这个稍后再说。...箭头函数外层没有普通函数,严格模式和非严格模式下它this都会指向window(全局对象) 唔,这个问题实际上是面试官提出来,当时我认为箭头函数规则就是:箭头函数this指向继承自外层第一个普通函数...这里跟我之前写this绑定规则不太一样(不懂可以点进去看一下),普通函数默认绑定规则是: 在非严格模式下,默认绑定this指向全局对象,严格模式下this指向undefined 如果箭头函数外层没有普通函数继承...this.array.push('全局对象下没有array,这里会报错'); // 找不到push方法 } }; obj.sum(); 上述栗子使用普通函数或者ES6中方法简写来定义方法,就没有问题

    1.6K00
    领券