怎么在Webpack4中利用Babel处理ES6语法-创新互联-成都快上网建站

怎么在Webpack4中利用Babel处理ES6语法-创新互联

本篇文章为大家展示了怎么在Webpack4中利用Babel处理ES6语法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

成都创新互联公司专注于中大型企业的网站设计、做网站和网站改版、网站营销服务,追求商业策划与数据分析、创意艺术与技术开发的融合,累计客户千余家,服务满意度达97%。帮助广大客户顺利对接上互联网浪潮,准确优选出符合自己需要的互联网运用,我们将一直专注成都品牌网站建设和互联网程序开发,在前进的路上,与客户一起成长!

修改 index.js 内容,写一些 ES6 的语法:

const arr = [
  new Promise(() => {}),
  new Promise(() => {})
];

arr.map(item => {
  console.log(item);
})

ES6 很强大,但目前并不是所有的浏览器都支持,所以需要用到 Babel,让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码。

来试一下吧,先安装需要用的 Babel 包:

npm install babel-loader @babel/core -D

配置 webpack.config.js,增加一条 rulues :

 module: {
  rules: [{
   test: /\.js$/,
   exclude: /node_modules/, // 排除该目录下的所有代码
   loader: "babel-loader"
  }]
 }

babel-loader 告诉了 webpack 怎么处理 ES6 代码,但它并不会将ES6 代码翻译成向后兼容版本的代码,如果想要执行这一步,还需要安装一个模块 preset-env,它包含了所有 ES6 代码转换的规则:

npm install @babel/preset-env -D

安装完之后配置一下:

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options:{
  'presets': ['@babel/preset-env']
 }
}]

这样,运行打包命令,就可以把 ES6 语法翻译成 ES5了,看一下打包的结果:

怎么在Webpack4中利用Babel处理ES6语法

没问题,语法已经翻译成了当前所有浏览器能识别的语法,但是做到了这一点还是不够,因为那些比较新的对象和函数,比如这里的 Promisemap,在低版本的浏览器里实际还是不存在的。所以这时不仅要进行语法的转换,还要想办法把这些新的特性,补充到低版本的浏览器里。怎么做呢? babel 提供了一个工具叫 polyfill,安装:

npm install @babel/polyfill -D

然后在 index.js 的最顶部,引入这个包:

import '@babel/polyfill'

保存代码,再次进行打包查看结果,可以发现打包后的 main.js 里面,有了很多代码来帮助实现比如 Promisemap 这些新特性。看一下 main.js 文件的大小:

怎么在Webpack4中利用Babel处理ES6语法

859KB,再看一下没有使用 polyfill 之前的 main.js 大小:

怎么在Webpack4中利用Babel处理ES6语法

只有4.36KB,使用 polyfill 之后文件变大了很多,这说明了 polyfill 使用了非常多的代码来填入新特性。
但是,index.js 里只使用了 Promisemap,其它的新特性都没用,能不能把那些没用到的实现方法都剔除了呢? 可以,给 preset-env 增加一个 useBuiltIns 配置:

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options: {
  'presets': [
   ['@babel/preset-env', {
    useBuiltIns: 'usage'
   }]
  ]
 }
}]

useBuiltIns: 'usage' 的意思就是说,当使用 polyfill 往低版本浏览器填入一些不存在的特性时,不是全部都填入,而是根据业务代码使用到的特性去选择填入,比如这里使用了 Promisemap,那就只填入这两个,其它的都不用。 再次打包查看结果:

怎么在Webpack4中利用Babel处理ES6语法

可以看到,main.js 的大小只有 138KB了。

这里还可以配置一些其它的参数,比如 targets 参数:

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options: {
  'presets': [
   ['@babel/preset-env', {
    useBuiltIns: 'usage',
    targets:{
     edge: '17', // edge高于17的版本
     firefox: '60', // firefox 高于60的版本
     chrome: '67' // chrome高于67的版本
    }
   }]
  ]
 }
}]

targets 是指打包会运行在什么样的浏览器,这有三个浏览器,并注明了最低版本。在打包的过程中,babel 会去看这些浏览器对 ES6 代码的支持情况,是否有必要进行语法转换、填入一些新特性。 运行打包命令查看结果:

怎么在Webpack4中利用Babel处理ES6语法

上述内容就是怎么在Webpack4中利用Babel处理ES6语法,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:怎么在Webpack4中利用Babel处理ES6语法-创新互联
本文来源:http://kswjz.com/article/ihjpg.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流