三分钟上手Bable

Bable的使用

1. 概念

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

2. 安装

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

(2) 执行指令bable --version查看是否安装成功
在这里插入图片描述

3. 使用

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

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文件路径
在这里插入图片描述

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

"use strict"; 

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

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

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

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页