使用@babel/preset-env的总结

最新推荐文章于 2024-08-19 10:05:59 发布
最新推荐文章于 2024-08-19 10:05:59 发布
阅读量4.3k 收藏 1
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aexwx/article/details/106751459
版权

 babel7废弃了@babel/polyfill,转而使用core-js和regenerator-runtime，如下图

但在实际使用中，我发现不用在js文件中引入下方2个包

import 'regenerator-runtime/runtime';
import 'core-js/stable';

只需在.babelrc中如下配置

 那么如下图，使用npm run bb

 打包时会自动引入对应的补丁

 最后使用npm run build打包出来的js就可以兼容对应的api了

大猫会长
关注
专栏目录
@babel/preset-env useBuiltIns 说明
anshaobiao6449的博客
08-20 6908
推荐阅读：https://blog.hhking.cn/2019/04/02/babel-v7-update/ useBuiltIns false 1 "useBuiltIns": false, 此时不对polyfill做操作。如果引入@babel/polyfill，则无视配置的浏览器兼容，引入所有的polyfill。 ...
babel源码解析之（@babel/preset-env）
vv_bug
06-30 5062
前言 还记得之前写过一篇文章:babel源码解析一,里面把babel的整个流程跑了一遍，最后还自定义了一个插件用来转换“尖头函数”，通过前面的源码解析我们知道，preset其实就是一些插件的集合，这一节我们来介绍一个babel中比较重要的preset“@babel/preset-env”，可能有些小伙伴已经用过了，没用过的话至少也应该见过，废话不多说，我们直接盘它。 开始 我们从项目创建开始，首先我们创建一个叫babel-demo的项目用来测试babel，然后执行npm初始化 npm init 然后我们
corejs is not a valid top-level option.
Yu_Jian_Qt的博客
09-01 1845
运行报错 corejs is not a valid top-level option. 解决办法：在stackoverflows上找到一个方法：运行 yarn upgrade，再次运行yarn serve。但是并没有解决我的问题。最后通过删掉node_modules文件夹，然后使用镜像cnpm install 成功解决。 ...
Babel Preset Env 使用指南
最新发布
gitblog_00536的博客
08-19 487
Babel Preset Env 使用指南 babel-preset-envPSA: this repo has been moved into babel/babel -->项目地址:https://gitcode.com/gh_mirrors/ba/babel-preset-env 项目介绍 @babel/preset-env 是一个智能的 Babel 预设，允许你使用最新的 JavaScr...
ant design pro v5
yuzheh521的博客
07-24 1921
就是删除这个文件 ./src/components/index.md，我建的项目是 simple，删了之后直接可以运行。目前已经试过删除node_modules文件夹，并重新安装依赖包，依旧报错。### 问题出现的环境背景及自己尝试过哪些方法。Ant Design Pro版本：5.2.0。
解决WebPack使用babel处理es6问题
玲曦的博客
12-01 778
这Webpack真的恶心，一路踩坑。 话不多说开始教程: 如果你的打包遇到问题，请卸载相关包 请先看这里: babel-loader和babel-core版本不对应 babel-loader 8.x对应babel-core 7.x babel-loader 7.x对应babel-core 6.x 如果安装的是babel-loader 8.x 请卸载旧的babel-core、babel-plugi...
Babel学习之基础学习
小栗子的博客
01-14 2328
Babel学习一、简介1. Babel是什么？2. 整体介绍二、presets(环境预设)常用的环境预设包三、plugins(插件) 一、简介 1. Babel是什么？ Babel是一个编译器，可以将ES6+版本新增加的语法和API转化成ES5代码，让前端开发者可以提前使用ES6+的新特性而不用考虑兼容性问题。 2. 整体介绍 Babel本身没有任何编译功能，而是通过选项：环境预设和插件，对代码进行编译的。 Babel转换分为两部分： 语法转换 可以通过配置环境预设(presets)，实现对js新语法的转
babel-preset-env-example：@ babelpreset-env示例
02-01
@ babel / preset-env示例 与通天塔7 主要文档： : @ babel / polyfill文档： : 浏览器列表： ： # .browserslistrc > 1% in FR // babel.config.js module . exports = { presets : [ [ '@babel/preset-env'...
builtins自定义_关于@babel/preset-env以及useBuiltIns配置项
weixin_35558751的博客
12-24 2020
以最新版本 7.5.0为准安装npm install --save-dev @babel/core @babel/cli @babel/preset-envnpm install --save @babel/polyfill运行时依赖安装@babel/polyfill 模块包括 core-js 和一个自定义的 regenerator runtime 模块npm install --save @ba...
babel源码解析之（@babel/plugin-transform-runtime）
vv_bug
07-02 2412
前言 前面我们用了一篇很长的文章介绍了@babel/preset-env,感兴趣的可以去看我之前的一篇文章babel源码解析之（@babel/preset-env）,今天我们要分析的是babel的一个插件，叫@babel/plugin-transform-runtime. 简介 我们看一下官网对它的描述： A plugin that enables the re-use of Babel’s injected helper code to save on codesize. 很简短的一个描述信息，翻译一
@babel/polyfill和@babel/plugin-transform-runtime区别与使用
m0_37613019的博客
08-25 1935
@babel/polyfill和@babel/plugin-transform-runtime 特别说明 本次讨论是基于webpack4 在以下版本中进行讨论 “@babel/core”: “^7.11.4” “@babel/polyfill”: “^7.10.4” “@babel/plugin-transform-runtime”: “^7.11.0” 简介 如果在开发中，使用ES6的语法，会导致一些旧版的浏览器无法运行，这时候我们就可以借助Babel这个平台来帮助我们将高版本的语法转为低版本的
Cannot find module ‘@babel/preset-env‘
qq_43634411的博客
12-02 7180
Cannot find module '@babel/preset-env' 这个报错的原因可以是安装的时候使用的命令为 cnpm install babel-preset-env 不能用这个命令安装 你可以把上面的这个 babel-preset-env 卸载了（cnpm unistall babel-preset-env -D） 重新运行下面的这个命令 cnpm install @babel/preset-env -D ...
@babel/preset-env
weixin_43758377的博客
07-13 9446
@babel/preset-env 根据指定的执行环境提供语法装换，也提供配置 polyfill。 Babel 7 已经弃用年份 preset: babel-preset-es2015, babel-preset-es2016, babel-preset-es2017, babel-preset-latest. 直接使用一个 env 搞定。 所以我们需要指定执行环境 Browserslist， Browserslist 的配置有几种方式，并按下面的优先级使用： @babel/preset-env 里的
Babel 之 @babel/preset-env
问卿何如的博客
07-28 8304
Babel 已经成为前端工程化开发的必备工具链。自 Babel 7.0 以后，Babel 进一步对工具优化和插件统一管理，全面迁移到 @babel 中。@babel/preset-env 是十分常用的一组预先设定的插件，今天就来简单聊聊这个插件 @babel/preset-env 这是一个智能预设，它允许你使用最新的 JavaScript 语法，而无需对目标环境需要哪些语法转换进行管理。 npm install @babel/core @babel/preset-env -D @babel/pr.
babel-preset-env使用指南
dengrong8117的博客
06-05 665
文章概览 babel-preset-env是非常重要且常用的一个插件预设，掌握它的用法以及实现原理非常有必要。 本文主要内容包括：babel-preset-env是什么、入门实例、如何配置以支持特定版本的 node/浏览器、实现原理等。 本文所有例子可以在 笔者的github 找到。 babel-preset-env简介 首先，介绍下历史背景，对了解和学习 babel-preset-en...
npm ERR! Error: Method Not Allowed 和 npm ERR! code ETARGET npm ERR! code EINTEGRITY 解决方法
luxideyao的专栏
02-11 5623
我们在使用前后端分离的时候，下载前端的项目，要对项目进行初始化。在初始化过程中我们会遇到如下的问题。 npm WARN package.json wangeditor@3.1.1 'repositories' (plural) Not supported. Please pick one as the 'repository' field npm ERR! Error: Method...
从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-20 769
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步????「开始优化」部分直接查看优化手段背景前段时间公司服...
使用 webpack build 命令打包遇到的问题
weixin_43135973的博客
11-21 359
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible versi
npm WARN @babel/helper-compilation-targets@7.20.0 requires a peer of @babel/core@^7.0.0 but none is
chanyeolchichi的博客
12-14 1636
*
@vue/cli-plugin-babel/preset
06-28
### 回答1： @vue/cli-plugin-babel/preset是Vue CLI 3中的一个插件，用于配置Babel预设。Babel是一个JavaScript编译器，可以将ES6+的代码转换为向后兼容的JavaScript代码，以便在更旧的浏览器中运行。预设是一组Babel插件和配置，用于转换特定类型的JavaScript代码。这个插件可以让你轻松地配置Babel预设，以便在Vue项目中使用最新的JavaScript语言特性。 ### 回答2： @vue/cli-plugin-babel/preset是一个Vue CLI插件，用于向Babel预设添加配置。在Vue项目中，Babel主要用于将ES6+的代码转换为ES5代码，以提高浏览器兼容性。@vue/cli-plugin-babel/preset提供了一组预设配置，以方便开发者进行快速编译。 @vue/cli-plugin-babel/preset集成了一些Babel插件和预设，包括babel-preset-env、babel-plugin-transform-runtime、@babel/plugin-proposal-export-namespace-from、@babel/plugin-proposal-numeric-separator等。其中，babel-preset-env是用于根据当前环境自动确定所需的babel插件和预设，并将它们集成到转译过程中。babel-plugin-transform-runtime则是用于减少代码重复，缩小代码体积的插件。 使用@vue/cli-plugin-babel/preset可以帮助开发者自动加载所需的Babel插件和预设，从而降低开发难度，并提高编译速度。同时，也可以避免开发者手动配置Babel的过程中出现的常见问题和错误。 总之，@vue/cli-plugin-babel/preset是一个方便的工具，可以帮助开发者更轻松地进行Vue项目的开发和编译，减少开发时间和代码错误率。 ### 回答3： @vue/cli-plugin-babel/preset 是 Vue CLI 的一个插件，它提供了一套默认的 Babel 预设配置，用于将 ES6+ 的 JavaScript 代码转换成浏览器可兼容的 ES5 代码。这个预设配置包括了一系列的 Babel 插件，比如 @babel/preset-env 和 @babel/plugin-transform-runtime 等。 @babel/preset-env 使用了浏览器属性的数据来决定哪些转换需要应用到代码中，从而达到最小化的转换和更快的编译速度。这个插件可以根据指定的浏览器版本范围自动选择转换插件，并可根据配置选项引入不同程度的“polyfills”来模拟特定环境。 @babel/plugin-transform-runtime 可以自动重用来自 babel-runtime 的帮助函数，以避免编译后的代码重复使用这些模块并导致体积膨胀。它还可以对一些常见功能进行转换，并提供了 ES6+ 语言标准不存在的一些功能，如 Promise、Generator 等。 使用 Vue CLI 创建的项目默认开启了 @vue/cli-plugin-babel/preset 插件，即默认使用了这套 Babel 预设配置，无需再手动安装和配置。如果需要对默认配置进行修改，则可以在项目的根目录下找到 babel.config.js 文件并进行修改，这个文件定义了 babel 编译的配置选项。 总之，@vue/cli-plugin-babel/preset 插件可以为 Vue 开发者提供便利，通过使用默认的 Babel 预设配置，可以快速地将 ES6+ 的代码转换成兼容性更好的 ES5 代码，为项目性能和稳定性提供保障。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值