Webpack5 系列(四):Babel 的配置2

简介: Webpack5 系列(四):Babel 的配置2

2. 最佳的 babel 配置

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

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

还需要下载的依赖:

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.

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

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

以上,感谢您的阅读~

目录
相关文章
|
6天前
|
前端开发 JavaScript Shell
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
该文章系统地总结了Webpack从基础配置到高级配置的16个关键知识点,包括Loader与Plugin的工作机制、源代码映射(Source Map)的使用、模块划分策略、性能优化技巧等内容,并提供了实际配置示例帮助理解和应用。
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
|
9天前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
25 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
8天前
|
缓存 资源调度 JavaScript
万字总结webpack实战案例配置
该文章总结了Webpack在实际项目中的配置案例,包括如何配置多页面应用、使用高级插件、优化构建速度及减少输出文件大小等方面的实战经验。
|
23天前
|
前端开发
umi webpack配置图片资源转base64
umi webpack配置图片资源转base64
|
2月前
|
前端开发 JavaScript 开发者
Angular与Webpack协同优化:打造生产级别的打包配置——详解从基础设置到高级代码拆分和插件使用
【8月更文挑战第31天】在现代前端开发中,优化应用性能和加载时间至关重要,尤其是对于使用Angular框架的项目。本文通过代码示例详细展示了如何配置Webpack,以实现生产级别的打包优化。从基础配置到生产环境设置、代码拆分,再到使用加载器与插件,每个步骤都旨在提升应用效率,确保快速加载和稳定运行。通过这些配置,开发者能更好地控制资源打包,充分发挥Webpack的强大功能。
38 0
|
2月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
3月前
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
52 6
|
3月前
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
43 1
|
4月前
|
缓存 JavaScript
webpack配置中的3种hash值
webpack配置中的3种hash值
|
3月前
|
前端开发 JavaScript
webpack 和 babel 实用教程【前端必备】
webpack 和 babel 实用教程【前端必备】
29 0
下一篇
无影云桌面