webpack es6转es5_nodejs支持es6吗

webpack es6转es5_nodejs支持es6吗万恶的IE遗臭万年仍然需要填坑ie标准对html/css甚至js的规范简直相差甚远,所以,一般要解决的兼容问题很大一部分是为了解决ie的不兼容,虽然目前流行的ES6语法及规范将IE的考虑抛弃掉,默认放弃对IE的治疗,但是IE的兼容仍然是个问题!即使IE的使用率已经不到1%的市场占比。我们使用着舒服的ES6规范但是为IE又很头疼怎么办呢?Webpack开发了非常厉害的打包转换功能:转ES5!…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

万恶的IE遗臭万年仍然需要填坑

  • ie标准对html/css甚至js的规范简直相差甚远,所以,一般要解决的兼容问题很大一部分是为了解决ie的不兼容,虽然目前流行的ES6语法及规范将IE的考虑抛弃掉,默认放弃对IE的治疗,但是IE的兼容仍然是个问题!即使IE的使用率已经不到1%的市场占比。
  • 我们使用着舒服的ES6规范但是为IE又很头疼怎么办呢?Webpack开发了非常厉害的打包转换功能:转ES5!

随便来个ES6代码

  • 就写个let声明和遍历:
console.log("webpack 1");
let date = ["hello", "world", "this", "is", "es6", "code"];

((theDate) => { 
   
    theDate.forEach(item => console.log(item));
})(date)

在这里插入图片描述

这是在Chrome浏览器里的结果

在这里插入图片描述

这是在火狐浏览器的结果:

在这里插入图片描述

这是ie11浏览器的结果:
在这里插入图片描述

完全不出意料哈!我们来转一转。

  • 这里我们先做一个修改,用导入的办法把ES6代码挪到打包的js代码文件中:
    原index.js:
console.log("webpack 1");
let fun = () => { 
   
    let date = ["hello", "world", "this", "is", "es6", "code"];
    date.forEach(item => console.log(item));
}
//fun() //结果依然刚才一样
export default fun;//es6导出函数,es6模块化知识

Can’t find @babel/core 问题

  • 以前安装打包需要的插件或者说是工具包:
npm install babel-core babel-loader babel-preset-es2015 --save-dev
#因为是开发测试环境,就加了dev,各自根据需要更改保存参数
  • 没错,因为版本兼容问题,最新的8.x版本babel-loader读取babel-core发生了改变,因此我们要安装对应匹配的版本:
#webpack 4.x | babel-loader 8.x | babel 7.x 最新版本
npm install -D babel-loader @babel/core @babel/preset-env
#webpack 4.x | babel-loader 7.x | babel 6.x 版本
npm install -D babel-loader@7 babel-core babel-preset-env webpack
  • 我这里使用的是7.x版本:

在这里插入图片描述

  • 创建babel工具的配置文件:.babelrc
{ 
   
    "presets": [
        "es2015"
    ], 
    "plugins": []
}

在这里插入图片描述

  • 配置打包规则:
module: { 
   
    rules: [{ 
   
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
    }]
}

在这里插入图片描述

  • webpack执行,生成test.html

在这里插入图片描述

  • 浏览器的效果:
    Chrome
    在这里插入图片描述

IE
在这里插入图片描述

代码成功在IE上运行了

  • 我们再看看打包转换成的es5长啥样:
    在这里插入图片描述

es6转es5到此结束。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189721.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 初步认识ADRC(自抗扰控制)与应用

    初步认识ADRC(自抗扰控制)与应用这是一个目录ADRC的基本原理一、参考资料推荐二、为什么PID好,以及,为什么PID不够好1.为什么PID好——基于模型的现代控制理论不实用2.为什么PID不够好——PID的缺点三、ADRC给出的方案——如何保留PID的优点,同时弥补PID的缺点1.误差的取法——安排过渡过程2.由误差提取误差微分的方法——跟踪微分器3.加权和的策略不一定最好——非线性反馈4.积分反馈的副作用——扩张状态观测器ADRC的公式以及参数整定一、跟踪微分器(TD)二、非线性反馈函数三、扩张状态观测器(ESO)ADRC应用到

  • xshell连接虚拟机使用的是什么连接模式_vmware无法连接到虚拟机

    xshell连接虚拟机使用的是什么连接模式_vmware无法连接到虚拟机文章目录配置虚拟机网络Xshell连接理想的步骤意外后的步骤Connectionfailed出现弹框错误安装openssh-server错误配置虚拟机网络如果在本地可以ping通虚拟机的ip,就可以通过xshell连接了。Xshell连接理想的步骤点击【文件】->【新建】打开新建会话属性弹框,输入虚拟机的主机ip。切换选项卡【用户身份验证】。输入用户名,密码需要…

  • JAVA(集合类)——使用For循环遍历ArrayList[通俗易懂]

    JAVA(集合类)——使用For循环遍历ArrayList[通俗易懂]文章目录实例描述实现过程实例描述JAVA中提供了各种数据集合类,这些类主要用于保存复杂结构的数据,其中ArrayList集合可以看作动态数组。它突破了普通数组固定长度的限制,可以随时向数组中添加和移除元素,这将使数组更加灵活。本实例通过ArrayList集合类实现了向程序动态添加与删除用户名的功能,其中所有数据都保存在ArrayList集合的实例对象中。实现过程1)在主方法中获取用…

  • Android常用控件

    Android常用控件TextView显示文本<TextViewandroid:id="@+id/text_view"android:layout_width="match_pa

  • 树莓派连接WiFi(最稳定的方法)[通俗易懂]

    树莓派连接WiFi(最稳定的方法)[通俗易懂]1概述树莓派是一个只有信用卡大小的卡片式电脑,基于ARM架构,采用Linux作为其操作系统;它默认是通过有线接口连接互联网,对于如此小巧的设备,有线连接非常不方便,下面我们介绍下如何让树莓派通过无线网卡连接网络。网上大多数文章介绍的是编辑  /etc/network/interfaces  文件,修改成如下的形式:ifacewlan0inetdhcpwpa-

  • oracle 优化GROUP BY[通俗易懂]

    提高GROUPBY语句的效率,可以通过将不需要的记录在GROUPBY之前过滤掉.下面两个查询返回相同结果但第二个明显就快了许多.低效:SELECTJOB,AVG(SAL)FROMEMPGROUPJOBHAVINGJOB=‘PRESIDENT’ORJOB=‘MANAGER’高效:SELECTJOB…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号