万恶的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上运行了

我们再看看打包转换成的es5长啥样：

es6转es5到此结束。

Webpack——ES6转ES5相关推荐

webpack es6转es5
首先下载babel-loader npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 要在最外部输入指令不然会报错 ...
es5直接引入html文件,ES6+转ES5（webpack+babel、指定多个js文件、自动注入）
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 一.新建项目,目录如下二.执 ...
webpack打包ES6降级ES5
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性. 安装babel实现ES6到ES5 npm instal ...
webpack实现es6转换为es5
Webpack实现es6转换为es5 安装插件 npm install --save-dev babel-loader @babel/core @babel/preset-env 配置在webpac ...
webpack 处理es6转es5需要使用babel-loader
webpack 处理es6转es5需要使用babel-loader 1.假设你已经熟悉webpack基本环境的搭建 npm init -y 2,创建webpack.confg.js文件 3.安装bab ...
gulp之ES6转ES5
导读默认的gulp打包编译,是不支持es6语法,所以我们需要引入babel进行转换编译步骤 1.安装es6转es5所需要的所有npm依赖包 //babel 依赖的包但是看babel官方说并没有依 ...
babel ES6 转换 ES5 实现原理
babel ES6 转换 ES5 实现原理前言 babel 各种包介绍转换过程案例前言前面写过一篇简单的 AST 抽象语法树的文章简述 AST 抽象语法树.今天来看一下在 babel 中是 ...
vue es6转es5 保证浏览器兼容性
vue cli es6转es5 保证浏览器兼容性安装在根目录下创建.babelrc文件 IE报vuex requires a Promise polyfill in this browser问题解 ...
记录一次es6转es5的填坑历程
背景随着前端的技术的不断发展,JavaScript也在不断地版本迭代,但是浏览器厂商如果不支持新版的js,那么对于前端同学来说是一场灾难,最近小飞就遇到了这样的一个问题,好好的Vue项目在低版本安卓 ...

Webpack——ES6转ES5

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

随便来个ES6代码

Can’t find @babel/core 问题

Webpack——ES6转ES5相关推荐

最新文章

热门文章