大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...