Webpack5 系列(四):Babel 的配置


theme: jzman

highlight: atelier-cave-light

一、前言

上一篇讲到如何配置一个基本的开发环境。 本篇将介绍对于项目中 JS 文件的处理。

二、babel-loader

index.js ```js // 箭头函数 const add = (a, b) => a + b;

// Promise 对象 const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(add(1, 2)); }, 1000); });

const promise2 = new Promise((resolve, reject) => { setTimeout(() => { resolve(add(3, 4)); }, 1000); });

const promise3 = new Promise((resolve, reject) => { setTimeout(() => { resolve(add(5, 6)); }, 1000); });

Promise.all([promise1, promise2, promise3]).then(values => { console.log(values); // [3, 7, 11] });

// 实例方法:Array.prototype.includes() const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // true

const root = document.getElementById('root'); root.innerHTML = add(1, 3); ```

有一些版本的浏览器对于JS新的语法(例如 ES6+)的支持不好,这时就需要将新的语法转换成 ES5 标准的语法,让浏览器正常识别它们,保证程序的稳定运行。

为了实现这种转换,我们该怎么办呢?用 Babel,它会把新语法转换为旧语法。

1. 依赖安装

安装:

shell npm install -D babel-loader @babel/core @babel/preset-env

2. Loader 配置

webpack.config.js

js module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }

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

三、Babel 的配置

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 的版本。

2. 最佳的 babel 配置

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

json { "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 版本更新后,很多内容已经发生变化,官方文档也是晦涩难读,而中文网上的文章很多都已经过时,好在我看到了一位大佬的文章,这才让我对 @babel/preset-env 和 @babel/plugin-transform-runtime 有了基本的认识。文章 link 放在文末,请自行阅读。

  1. @babel/preset-env just transforms code with syntax, if we don’t config useBuiltIns.
  2. @babel/transform-runtime can provide re-use helpers, but don’t polyfill by default.
  3. Most situation best config: use @babel/preset-env transforms syntax. use @babel/transform-runtime avoid duplicate code, and config corejs: 3 to polyfill.

参考:https://www.zzuu666.com/articles/9

添加我的微信:enjoyMrcat,共同成长,卷卷群里等你 。

以上,感谢您的阅读~

你可能感兴趣的:(Webpack5,系列,javascript,前端,webpack,开发语言,ecmascript)