type
status
date
slug
summary
tags
category
icon
password
一、前言
上一篇讲到如何配置一个基本的开发环境。
本篇将介绍对于项目中 JS 文件的处理。
二、babel-loader
index.js
有一些版本的浏览器对于JS新的语法(例如 ES6+)的支持不好，这时就需要将新的语法转换成 ES5 标准的语法，让浏览器正常识别它们，保证程序的稳定运行。
为了实现这种转换，我们该怎么办呢？用 Babel，它会把新语法转换为旧语法。
1. 依赖安装
安装：
2. Loader 配置
webpack.config.js
对于 babel 的配置，我们一般放在 babel.config.json 中，在根目录中新建 babel.config.json。
三、Babel 的配置
1. 一般情况下的 babel 配置
babel.config.json
还需要下载的依赖：
注意： 必须要配置 useBuiltIns，如果不配置，babel 将不会处理 Promise、Map、Set、Symbol 等全局对象；corejs 也要同时配置，2 的版本可以处理全局对象，但实例方法并不处理，所以这里用 3 的版本。
2. 最佳的 babel 配置
如果在写一个库时，最好添加上插件 —— babel/plugin-transform-runtime，配置如下：
还需要下载的依赖：
四、最后的备注
Babel 版本更新后，很多内容已经发生变化，官方文档也是晦涩难读，而中文网上的文章很多都已经过时，好在我看到了一位大佬的文章，这才让我对 @babel/preset-env 和 @babel/plugin-transform-runtime 有了基本的认识。文章 link 放在文末，请自行阅读。
- @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.
以上，如有谬误，还请斧正，希望这篇文章对你有所帮助，感谢您的阅读～
- 作者:Eric 见嘉
- 链接:https://tangly1024.com/article/webpack5-babel
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章