首页
学习
活动
专区
工具
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 当然箭头函数与普通函数的区别还有很多,小编总结的也不是很齐全,有想法的,请各位看官大大多多交流指正

    55830

    箭头函数中的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。所以我们就能准确得到Lucifer的name值啦。

    2.2K20

    箭头函数与普通函数的区别

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

    72820

    普通函数和箭头函数的区别

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

    86130

    JavaScript|箭头函数的用法

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

    73920

    普通函数和箭头函数的区别

    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上的内容,里面有很详细的讲解,希望本篇文章能够帮助大家解决一些疑惑,感谢您的观看。

    37310

    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引擎帮忙调用)那么请使用箭头函数。

    20800

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

    箭头函数和普通函数的区别 一.外形不同:箭头函数使用箭头定义,普通函数中没有 代码实例如下: // 普通函数 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指向调用它的那个对象

    89620

    简单说 JavaScript的箭头函数

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

    54220
    领券