Webpack5 系列:Babel 的配置

1.前言

本篇将介绍对于项目中 JS 文件的处理。

2.babel-loader

2-1.依赖安装

shell 复制代码
npm install -D babel-loader @babel/core @babel/preset-env

2-2.Loader 配置

webpack.config.js

s 复制代码
module: {
  rules: [
    {
      test: /\.?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

对于 babel 的配置,我们一般放在 babel.config.json 中,在根目录中新建 babel.config.json。

3.Babel 的配置

3-1.一般情况下的babel配置

babel.config.json

json 复制代码
{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 按需引入 corejs 中的模块 
      "corejs": 3, // 核心 js 版本
      "targets": "> 0.25%, not dead" // 浏览器支持范围
    }]
  ]
}

还需要下载的依赖:

shell 复制代码
npm i core-js@3 --save

注意: 必须要配置 useBuiltIns,如果不配置,babel 将不会处理 Promise、Map、Set、Symbol 等全局对象;corejs 也要同时配置,2 的版本可以处理全局对象,但实例方法并不处理,所以这里用 3 的版本。

3-2.最佳的 babel 配置

如果在写一个库时,最好添加上插件 ------ babel/plugin-transform-runtime,配置如下:

js 复制代码
{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ],
  "plugins": [
    // 不污染全局,在运行时加载
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

还需要下载的依赖:

shell 复制代码
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs3

@babel/preset-env just transforms code with syntax, if we don't config useBuiltIns.

@babel/transform-runtime can provide re-use helpers, but don't polyfill by default.

Most situation best config: use @babel/preset-env transforms syntax. use @babel/transform-runtime avoid duplicate code, and config corejs: 3 to polyfill.

相关推荐
南望无一21 小时前
webpack性能优化和构建优化
前端·webpack
dwqqw2 天前
opencv图像库编程
前端·webpack·node.js
昔冰_G2 天前
解锁webpack:对html、css、js及图片资源的抽离打包处理
前端·javascript·css·webpack·npm·html·打包
明远湖之鱼3 天前
手把手带你实现一个自己的简易版 Webpack
前端·webpack·源码
jserTang3 天前
前端构建工具漫谈:Webpack、Vite、Turbopack 与 Rspack 的终极对决
前端·webpack·vite
萌萌哒草头将军4 天前
尤雨溪 VoidZero 公司推出新一代ts文件打包工具 tsdown 🚀🚀🚀
vue.js·webpack·typescript
执梦起航5 天前
webpack理解与使用
前端·webpack·node.js
二川bro5 天前
webpack 中 chunks详解
前端·webpack·node.js
果酱小米粥6 天前
关于使用webpack构建的vue项目,如何使用windicss
前端·webpack·node.js
尘寰ya9 天前
前端面试-工程化(webpack、vite)
前端·面试·webpack