babel安装

  • 安装前你需要安装node.jsnpm以及gulp三个包。

然后执行以下命令

$ npm init
  • 然后在安装 babel和babel-core两个包
$ npm install --save-dev gulp-babel babel-preset-env
npm install babel-cor --save-dev

建立文件夹

  • 新建一个名为gulpfile.js的文件夹,然后引入包
const gulp = require('gulp');
const babel = require('gulp-babel'); gulp.task('default', () =>
gulp.src('es6/*.js')
.pipe(babel({
presets: ['env']
}))
.pipe(gulp.dest('dist'))
);
gulp.task('babel',() => {
gulp.watch('es6/*.js',['default'])
});
  • 新建一个名为src 的文件夹,然后写点js.
{
let a = 3;
let arr = [1,2,3]; }
console.log(a);
console.log(arr);

运行任务

$ gulp

$ gulp babel

这样就大功告成了!

babel初学教程的更多相关文章

  1. window搭建webpack,react,babel傻瓜教程

    首先现在的webpack教程已经很多了,写这篇的原因是因为自己在从小白开始的搭建过程中,并没有找到比较好的教程,花费了很多的时间,so 有了这篇博客,方便小白同学学习. node环境在这里不在赘述,p ...

  2. (一)Redis初学教程之安装篇

    1.下载windows下Redis服务安装程序(有32位的和64位的,识操作系统安装) 下载地址:https://github.com/dmajkic/redis/downloads 2.安装教程(详 ...

  3. Babel 安装教程

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持.下面是一个例子. // 转码前 inpu ...

  4. 《转》Babel 入门教程

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  5. Babel 入门教程

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持.下面是一个例子. // 转码前 inpu ...

  6. TensorFlow初学教程(完整版)

    1:你想要学习TensorFlow,首先你得安装Tensorflow,在你学习的时候你最好懂以下的知识:    a:怎么用python编程:     b:了解一些关于数组的知识:     c:最理想的 ...

  7. (一)Memcached初学教程之安装服务篇(Windows下)

    1.下载Memcached的Windows服务安装程序(备注:memcached官网:http://memcached.org/ ,没有提供windows下的安装包,只有UNIX下的安装包,我们这里用 ...

  8. CodeIgniter框架入门教程——第一课 Hello World!

    本文转载自:http://www.softeng.cn/?p=45 今天开始,我将在这里连载由我自己编写的<CodeIgniter框架入门教程>,首先,这篇教程的读着应该是有PHP基础的编 ...

  9. webpack,react,babel

    window搭建webpack,react,babel傻瓜教程   首先现在的webpack教程已经很多了,写这篇的原因是因为自己在从小白开始的搭建过程中,并没有找到比较好的教程,花费了很多的时间,s ...

随机推荐

  1. Python OCR提取普通数字图形验证中的数字

    截取图形验证码: # -*- coding: UTF-8 -*- ''' Created on 2016年7月4日 @author: xuxianglin ''' import os import t ...

  2. Android中的Handler介绍

    一.Handler的定义: 主要接受子线程发送的数据, 并用此数据配合主线程更新UI. 解释: 当应用程序启动时,Android首先会开启一个主线程 (也就是UI线程) , 主线程为管理界面中的UI控 ...

  3. [C++] Const Summary (mind map)

    Const Summary

  4. hdu 4068 I-number

    #include<stdio.h> #include<string.h> ]; int al; int mysum() //求各位和 { ; al=strlen(a); ; i ...

  5. IIS相关知识和经验的碎片化记录

    1.IIS(Internet Information Services)网站本机可以访问,局域网其他机器无法访问 导致这个问题之一是防火墙规则,解决办法如下: [开始]打开[控制面板],选择[WIND ...

  6. 1700 Crossing River

    题目链接: http://poj.org/problem?id=1700 1. 当1个人时: 直接过河 t[0]. 2. 当2个人时: 时间为较慢的那个 t[1]. 3. 当3个人时: 时间为 t[0 ...

  7. 并查集 - 1611 The Suspects

    题目地址: http://poj.org/problem?id=1611 分析: - 数据结构 - parent[x] 表示 x 元素的父节点位置. - rank[x] 记录x的子链的长度, 以便在合 ...

  8. Java多线程设计模式(四)

    目录(?)[-] Future Pattern Two-Phase Termination Pattern Thread-Specific Storage Pattern Active Object ...

  9. gulp-usemin 插件使用

    关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

  10. memcached整理の编译

    memcached是一个自由&开放源码, 高性能,分布式的内存对象缓存系统. nosql相对于传统关系型数据库的"行与列",NoSQL 的鲜明特点为k-v 存储(memca ...