码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 使用Babel将ES6代码转为ES5代码,从而在现有环境执行。


    前言

    在线转码 https://babeljs.io/repl/#
    https://es6console.com/

    1.快速入门

    (1)ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
    (2)Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
    (3)这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。

    文件目录如下
    在这里插入图片描述

    2.安装使用

    安装命令行转码工具
    Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:

    npm install -g babel-cli
    #查看是否安装成功
    babel --version
    
    • 1
    • 2
    • 3

    在这里插入图片描述

    3、初始化项目

    npm init -y
    
    
    • 1
    • 2

    在这里插入图片描述

    4、创建文件 src/test1.js,写入es6语法代码(需要转换的文件)

    //es6语法
    let name = "this is java!"
    const title = "张三";
    let arr = [1,2,3,4,5,6];
    let newarr = arr.map(a=>a*2);
    console.log(name);
    console.log(title);
    console.log(newarr);
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    5、创建、配置 .babelrc

    Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件

    {
        "presets": ["es2015"],
        "plugins": []
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5

    6、安装转码器,在项目中安装

    npm install --save-dev babel-preset-es2015
    
    
    • 1
    • 2

    7、开始转码

    执行完之后我们执行babel src -d dist,这个的意思是将src所有的文件都编译成ES2015格式放入dist目录之下。

    babel src -d dist
    
    • 1

    在这里插入图片描述

  • 相关阅读:
    日常整理:为什么我们重写equals的时候也要重写hashcode
    大语言模型之十五-预训练和监督微调中文LLama-2
    外贸独立站该怎样推广?
    比特币势在解决法币阻碍进步的问题
    软件测试Triangle练习题
    kotlin的null
    爬虫基础-requests库的使用
    淘宝/天猫优惠券查询接口 API 返回值说明
    【JavaScript内置对象】Date对象,从零开始
    agileBPM 广州宏天BPM功能对比
  • 原文地址:https://blog.csdn.net/weixin_44797182/article/details/127622359
  • 最新文章
  • 沪漂五周年了:我越来越迷茫了
    Agentic Skill Routing 实战:别再把所有 Skill 塞进 AI Agent 上下文
    MySQL-Seconds_behind_master的精度误差
    [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
    AI的至暗历史:从万众期待到被政府撤资,AI的两次死亡徘徊
    Agent OS :五种驯服不确定性的范式
    PortSwigger SQL注入LAB11
    数据库即时编译JIT
    [Begin]AI Learn Data Day 0
    深度学习进阶(二十七)现代 LLM 的核心架构设计其二:SwiGLU
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号