babel基本转码方法

已于 2023-01-05 09:36:34 修改
阅读量511 收藏
点赞数
分类专栏： Babel 文章标签： 前端 javascript html
于 2021-02-25 10:13:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Menqq/article/details/114059264
版权

  1. 建立好文件夹
    在这里插入图片描述

  2. npm init -y生成json文件
    在这里插入图片描述

  3. 希望执行一个命令就直接转码，script中写translate
    要转码的 index.js文件 相对于package.json有/day210224/src
    要输出的文件 -o是output缩写 转码到的文件地址 day210224/dist/main.js
    在这里插入图片描述

  4. 想要使用babel包前下载@babel/cil,主要作用是提供命令，及babel的核心包@babel/core
    在这里插入图片描述

  5. 接下来直接npm run translate 直接就可以转码了

在这里插入图片描述

  1. 向src/index.js 中写要转译的代码并执行npm run translate dist/main.js中转译成功
    在这里插入图片描述

  2. 想要转码那些需去官网找到指定转码的插架进行转码，例如箭头函数转码：
    在这里插入图片描述

  3. 箭头函数转码
    在这里插入图片描述

这种转码方式使用过于不方便，babel提供了更加便捷的方式，可以将大部分ES6代码转码为ES5：
在这里插入图片描述

在这里插入图片描述

常用转码插件可看：https://blog.csdn.net/Menqq/article/details/114036943?spm=1001.2014.3001.5502

门门men
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
babel基本使用详解
01-21
什么是babel? babel是一个强大的多用途js编译器 点击进入官网 安装babel npm install -g babel-cli npm install --save-dev babel-cli babel配置文件 通过.babelrc来表示 { presets : [ ], plugins : [ ] } ...
如何使用Babel转码器进行转码
m0_58802854的博客
01-11 375
如何使用Babel转码器进行转码
babel转码器的使用
weixin_54345825的博客
09-16 756
babel转码器的使用
ES6新特性中的bable转码
m0_63144319的博客
04-24 106
安装babel在项目根目录下(即ES6新特性中的cmd终端输入命令来安装相关组件，不能移动删除复制粘贴操作)
Babel转码器详解
qq_45643079的博客
12-06 561
Babel
Babel转码器
weixin_42057187的博客
05-12 293
Babel转码器
ES6通过babel转码使用webpack使用import关键字
08-31
主要介绍了es6通过babel转码还需要使用webpack才可以使用import关键字吗的相关资料,需要的朋友可以参考下
Webpack4 使用Babel处理ES6语法的方法示例
12-01
修改 index.js 内容，写一些 ES6 的语法： const arr = [ new Promise(() => {}), new Promise(() => {}) ]; arr.map(item => { ...npm install babel-loader @babel/core -D 配置 webpack.config
详解设置Webstorm 利用babel将ES6自动转码成ES5
08-28
主要介绍了详解设置Webstorm 利用babel将ES6自动转码成ES5，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【ES】【JS】Babel转码器
weixin_51664510的博客
07-20 148
是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。
babel教程
caiqian97的博客
03-23 1188
Babel是什么？
Babel转换器配置
ALin_Think的博客
04-05 450
Babel转换器 一、简介 Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。 这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。 二、安装 安装命令行转码工具 Babel提供babel-cli工具，用于命令行转码。它的安装命令如下： npm install --global babel-cli #查看是否安装成功 babel ...
深入理解babel原理
weixin_47450807的博客
02-04 1806
在现在开发者基本使用ES6+语法，但是任然存在部分浏览器不能完全支持ES6+语法，此时我们需要利用babel来进行转化，将ES6+语法转化成ES5语法，来实现浏览器兼容的功能。 babel是实现代码的转化，而不是对代码进行打包。 下面将从babel原理方法对其进行解析。 一、babel运行的三个阶段 babel我们可以把他理解为一个编译器，也就是实现代码转换的功能，其转换过程分为三个阶段。 1、解析： 将js代码转换成AST（抽象语法树） 2、转化： 根据抽象语法树进行变换操作 3、生成： 将转换后的抽象语
理解Babel是如何工作的
薛定谔的猫-前端领域
05-03 655
Babel 是用于编写下一代 JavaScript 的transpiler (转译器）。Babel 是以将 ES5+ 代码转译成可在任何浏览器中运行的向后兼容的 JavaScript 版本而闻名。因此，学习如何使用 Babel 以编程方式修改 JavaScript 代码是有必要的。 转译器概念和流程 转译器也称为源到源编译器。它们是读取以一种编程语言编写的源代码并以另一种语言生成等效代码的工具。转译器使 TypeScript 和 CoffeeScript 等语言得以存在，这是 JavaScript...
项目中配置Babel转码器的详细教程
a695993410的博客
06-02 1190
简单说一下Babel吧Babel是一个ES6转码器，可以将ES6代码转为ES5代码此篇教程是在学习阮老师的《ES6标准入门》时，不是特别懂npm的学习总结比较适合没有用过npm的同学吧。在阮老师的教程上具体补充，通过以下几个步骤，即可在项目中直接安装Babel转码器，一行命令即可进行ES6转码第一步：创建package.jsonpackage.json 文件是一个描述文件，主要有以下3个作用：1....
使用Babel转码
flyingpig2016的博客
05-25 1945
使用Babel转码Babel转码器就是将 ES6 代码转为 ES5 代码 // 转码前 input.map(item => item + 1);// 转码后 input.map(function (item) { return item + 1; });1.怎样使用Babel转码? 全局作用域的情况 步骤一：先在项目的根目录里创建好.babelrc文件，(这里记住，一定要手动创建一个
Babel转码器（ES6）
Sunday97的博客
01-30 512
一、Babel介绍 Babel(babeljs.io/)是一个广为使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。也就意味着可以用ES6的方式编写程序，从而不用担心现有环境是否支持。如下例子： //转码前 input.map(item => item + 1); //转码后 input.map(function (item)...
Babel 转码器( ES6 代码转为 ES5 代码 )
she8362315的博客
04-01 453
下面的命令在项目目录中，安装 Babel。 $ npm install --save-dev @babel/core 配置文件.babelrc Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。 该文件用来设置转码规则和插件，基本格式如下。 { "presets": [], "plugins": [] } presets字段设...
【ES6】Babel转码器及常用Babel工具
TalonZhang的博客
12-15 585
Babel 转码器 Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。 // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1...
vite babel
最新发布
11-11
而Babel是一个广泛使用的JavaScript编译器，它可以将ES6+的代码转换为向后兼容的JavaScript代码。在使用vite构建应用程序时，我们可以使用Babel来转换我们的代码以确保它可以在所有浏览器上运行。以下是使用vite和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值