扶着你玩转webpack4——js的处理

本文介绍如何使用babel-loader和babel-preset-env将ES6+语法转换为浏览器兼容的代码。通过配置webpack和.babelrc文件实现转码,同时讨论了如何处理API转码的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ES6+的转码


如果想使用ES6+ 语法,那可以使用 babel-loaderbabel-preset-env

如果想进一步了解关于 babel 的信息,请看这两篇文章。

梦里babel知多少(一)
梦里babel知多少(二)

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader' // 可以在这里进行关于babel的配置项,不过通常建议新建一个.babelrc文件进行配置
      }
    ]
  }
}

.bablerc

{
  "presets": [
    ["env", {
      "modules": false, // 关闭babel的模块化,使用webpack的模块化,方便我们使用tree-shaking,Scope Hositing等特性
      "targets": {
        "browsers": [">1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

需要注意的是,这里仅仅是对 ES6+ 的语法进行转码,并没有对API进行转码,即:promise arrow function 可以被转码,但 Array.find 等。 (这里其实并不是针对所有这些API,而是静态方法,看这里)

那我们还需要对这些API进行转码,所以可以使用 babel-polyfill 在项目中直接引用即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值