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.

相关推荐
随笔记10 小时前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
疾风铸境1 天前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
try again!1 天前
rollup.js 和 webpack
开发语言·javascript·webpack
依旧7051 天前
webpack打包流程
webpack
ak啊1 天前
Webpack打包过程中的核心机制-Chunk 的生成与优化
前端·webpack·源码
挖稀泥的工人1 天前
面试看这一篇webpack
前端·webpack
雾散尽时1 天前
Webpack在项目中的配置与工作原理解析
webpack
程序员黄同学2 天前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
jndingxin2 天前
OpenCV 图形API(5)API参考:数学运算用于执行图像或矩阵加法操作的函数add()
opencv·webpack·矩阵
ak啊2 天前
Webpack Loader 执行机制
前端·webpack·源码