Bable的快速入门

╰+哭是因爲堅強的太久メ 2023-01-10 14:57 96阅读 0赞

# Bable的使用 #

### 文章目录 ###

*  Bable的使用
 *   *  1. 概念
     *  2. 安装
     *  3. 使用

## 1. 概念 ##

Bable是一个转换器，可以将ES6代码转换成ES5代码，因为浏览器对ES5代码支持性较好

## 2. 安装 ##

(1) 执行指令`npm install --global babel-cli`即可安装

(2) 执行指令`bable --version`查看是否安装成功  
![在这里插入图片描述][20210125130455544.png]

## 3. 使用 ##

(1) 创建两个文件夹及01.js文件，编写ES6格式的代码  
![在这里插入图片描述][20210125130508567.png]

let input = [1, 2, 3]
    input = input.map(item => item + 1)

(2) 在根目录文件夹下创建.bablerc文件 (不可加前缀)

{ 
        "presets": ["es2015"],
        "plugins": []
    }

(3) 使用指令`npm install --save-dev babel-preset-es2015`安装es2015转码器

(4) 转码方式一：转码指定文件

i. 使用指令babel 被转码的ES6文件路径 -o 转码后的ES5文件路径  
![在这里插入图片描述][20210125130526302.png]

ii. 在上述的dist空文件夹下自动创建001.js文件  
![在这里插入图片描述][202101251305365.png]

"use strict"; 
    
    var input = [1, 2, 3];
    input = input.map(function (item) { 
      return item + 1;
    });

(5) 转码方式二：转码整个目录

i. 使用指令`babel 被转码的目录 -d 转码后的目录`  
![在这里插入图片描述][2021012513055010.png]

ii. 在上述的dist空文件夹下自动创建同名的01.js文件，内容与001.js相同

[20210125130455544.png]: /images/20221119/18fcb07bdea14c298f131586c889be47.png
[20210125130508567.png]: https://img-blog.csdnimg.cn/20210125130508567.png
[20210125130526302.png]: https://img-blog.csdnimg.cn/20210125130526302.png
[202101251305365.png]: https://img-blog.csdnimg.cn/202101251305365.png
[2021012513055010.png]: https://img-blog.csdnimg.cn/2021012513055010.png

发表评论取消回复

表情：

评论列表（有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

相关 Docker 的快速入门

前言 > Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的[Linux][]或Windows操作

不念不忘少年蓝@/ 2024年04月06日 10:31/ 0 赞/ 88 阅读

相关 MyBatisPlus快速入门（二）MyBatisPlus快速入门体验

一、初始化数据库（基于 HeidiSQL） 1.1 创建数据库 1.2创建数据表 1.3 初始化数据二、初始化项目

蔚落/ 2023年10月10日 20:46/ 0 赞/ 74 阅读

相关 JavaWeb的快速入门

今天给大家推荐几套含金量特别高的Javaweb的教学视频，无论你是初学者，自学者，还是有数年编程经验的大神，此套教程都将是你不可或缺的学习宝典。 [ JavaWeb教程

痛定思痛。/ 2023年10月07日 16:06/ 0 赞/ 46 阅读

相关 Bable的快速入门

Bable的使用文章目录 Bable的使用 1. 概念 2. 安装 3. 使用 1. 概念 Bable是一个

╰+哭是因爲堅強的太久メ/ 2023年01月10日 14:57/ 0 赞/ 97 阅读

相关 Fragment的快速入门

现在在开发项目的时候都是经常用到Fragment，但是有些人会用，不知道Fragment相比Activity占有哪些优势？接下来我就为大家解开这个迷惑，希望对大家有所帮助。

喜欢ヅ旅行/ 2022年08月27日 01:26/ 0 赞/ 152 阅读

相关 Django快速入门（入门）

> 学习笔记，快速搭建一个可以跑的Django环境 0. 启动虚拟环境 xxx@xxx:~/py_script/pro-env$ ls bin inc

本是古典何须时尚/ 2022年06月06日 14:39/ 0 赞/ 410 阅读

相关 Bable的使用

一、bable简介 babel是一个工具链，用于将ES6+语法转换为当前版本浏览器等环境兼容的javascript代码。babel目前已经支持了最新版本的javascri

迈不过友情╰/ 2022年04月23日 13:52/ 0 赞/ 102 阅读

相关 WPF快速入门系列(8)——MVVM快速入门

一、引言　　在前面介绍了WPF一些核心的内容，其中包括WPF布局、依赖属性、路由事件、绑定、命令、资源样式和模板。然而，在WPF还衍生出了一种很好的编程框架，即WVVM

本是古典何须时尚/ 2022年03月28日 15:56/ 0 赞/ 813 阅读

相关 WPF快速入门系列(8)——MVVM快速入门

[WPF快速入门系列(8)——MVVM快速入门][WPF_8_MVVM] 一、引言　　在前面介绍了WPF一些核心的内容，其中包括WPF布局、依赖属性、路由事

古城微笑少年丶/ 2021年09月30日 10:58/ 0 赞/ 898 阅读

相关 goroutine的快速入门

一需求编写一个程序，完成如下功能。 1 在主线程(可以理解成进程)中，开启一个 goroutine, 该协程每隔 1 秒输出 "hello,world"。 2 在

痛定思痛。/ 2021年07月24日 17:47/ 0 赞/ 359 阅读