webpack如何将es6转成es5的模块

本文小编为大家详细介绍“webpack如何将es6转成es5的模块”，内容详细，步骤清晰，细节处理妥当，希望这篇“webpack如何将es6转成es5的模块”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。配置方法：1、用导入的方法把ES6代码放到打包的js代码文件中；2、利用npm工具安装babel-loader工具，语法“npm install -D babel-loader @babel/core @babel/preset-env”；3、创建babel工具的配置文件“.babelrc”并设定转码规则；4、在webpack.config.js文件中配置打包规则即可。本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
万恶的IE遗臭万年仍然需要填坑ie标准对html/css甚至js的规范简直相差甚远，所以，一般要解决的兼容问题很大一部分是为了解决ie的不兼容，虽然目前流行的ES6语法及规范将IE的考虑抛弃掉，默认放弃对IE的治疗，但是IE的兼容仍然是个问题！即使IE的使用率已经不到1%的市场占比。我们使用着舒服的ES6规范但是为IE又很头疼怎么办呢？Webpack开发了非常厉害的打包转换功能：转ES5！就写个let声明和遍历：


console.log("webpack1");
letdate=["hello","world","this","is","es6","code"];

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

这是在Chrome浏览器里的结果这是在火狐浏览器的结果：这是ie11浏览器的结果：
完全不出意料哈！我们来转一转。这里我们先做一个修改，用导入的办法把ES6代码挪到打包的js代码文件中：
原index.js:


console.log("webpack1");
letfun=()=>{
letdate=["hello","world","this","is","es6","code"];
date.forEach(item=>console.log(item));
}
//fun()//结果依然刚才一样
exportdefaultfun;//es6导出函数，es6模块化知识

以前安装打包需要的插件或者说是工具包：


npminstallbabel-corebabel-loaderbabel-prese免费云主机域名t-es2015--save-dev
#因为是开发测试环境，就加了dev，各自根据需要更改保存参数

没错，因为版本兼容问题，最新的8.x版本babel-loader读取babel-core发生了改变，因此我们要安装对应匹配的版本：


#webpack4.x|babel-loader8.x|babel7.x最新版本
npminstall-Dbabel-loader@babel/core@babel/preset-env
#webpack4.x|babel-loader7.x|babel6.x版本
npminstall-Dbabel-loader@7babel-corebabel-preset-envwebpack

我这里使用的是7.x版本：创建babel工具的配置文件：.babelrc，设定转码规则


{
"presets":[
"es2015"
],
"plugins":[]
}

webpack.config.js配置打包规则：


module:{
rules:[{
test:/.js$/,
use:'babel-loader',
exclude:/node_modules/
}]
}

webpack执行，生成test.html浏览器的效果：ChromeIE代码成功在IE上运行了我们再看看打包转换成的es5长啥样读到这里，这篇“webpack如何将es6转成es5的模块”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: C语言如何利用软件代替Mutex互斥锁

这篇文章主要介绍“C语言如何利用软件代替Mutex互斥锁”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“C语言如何利用软件代替Mutex互斥锁”文章能帮助大家解决问题。在 Linux 系统中，当多个线程并行执行时，如果需…