webpackbabel转换ES678语法
在企业开发中为了兼容一些低级版本的浏览器, 我们需要将 ES678 高级语法转换为 ES5 低级语法,否则在低级版本浏览器中我们的程序无法正确执行,默认情况下 webpack
是不会将我们的代码转换成 ES5
低级语法的, 如果需要转换我们需要使用 babel
来转换
使用 babel
官方地址:https://babeljs.io/
安装转换到 ES5 的相关包
npm install --save-dev babel-loader @babel/core @babel/preset-env
配置 babel
// 打包JS规则
{
test: /\.js$/,
// 不做处理的目录
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
在官方文档当中其实已经说明了如果你只是单纯的配置了 babel 其实什么也干不了,还需要配置一个 preset-env
:
安装 preset-env
npm install @babel/preset-env --save-dev
配置 preset-env
options: {
presets: ['@babel/preset-env']
}
然后编写一个 ES6 语法的代码进行测试即可,当然为了更好的观察效果你可以在 package.json 当中在添加一个不是 devServer 的脚本,因为可以看到编译打包之后的文件内容信息:
"dev": "npx webpack --config webpack.config.js"
测试:
presets 优化
在实际企业开发中默认情况下 babel 会将所有高于 ES5 版本的代码都转换为 ES5 代码,但是有时候可能我们需要兼容的浏览器已经实现了更高版本的代码, 那么这个时候我们就不需要转换,因为如果浏览器本身已经实现了, 我们再去转换就会增加代码的体积,就会影响到网页的性能,所以我们通过配置 presets
的方式来告诉 webpack
我们需要兼容哪些浏览器,然后 babel
就会根据我们的配置自动调整转换方案, 如果需要兼容的浏览器已经实现了, 就不转换了
官方文档地址:https://babeljs.io/docs/en/babel-preset-env
修改配置文件:
presets: [['@babel/preset-env', {
targets: {
"chrome": "58",
},
}]]
测试:
原文链接:https://www.cnblogs.com/BNTang/articles/15552935.html
本文来源 爱码网,其版权均为 原网址 所有 与本站无关,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源。
© 版权声明
文章版权归作者所有,未经允许请勿转载。