babel安装

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

然后执行以下命令

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

建立文件夹

  • 新建一个名为gulpfile.js的文件夹,然后引入包
  1. const gulp = require('gulp');
  2. const babel = require('gulp-babel');
  3. gulp.task('default', () =>
  4. gulp.src('es6/*.js')
  5. .pipe(babel({
  6. presets: ['env']
  7. }))
  8. .pipe(gulp.dest('dist'))
  9. );
  10. gulp.task('babel',() => {
  11. gulp.watch('es6/*.js',['default'])
  12. });
  • 新建一个名为src 的文件夹,然后写点js.
  1. {
  2. let a = 3;
  3. let arr = [1,2,3];
  4. }
  5. console.log(a);
  6. 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. 用 GDB 调试程序

    Linux 包含了一个叫 gdb 的 GNU 调试程序. gdb 是一个用来调试 C 和 C++ 程序的强力调试器. 它使你能在程序运行时观察程序的内部结构和内存的使用情况. 以下是 gdb 所提供的 ...

  2. IIS7日志中时间与系统时间不一致的原因

    最近在分析web日志,发现IIS7日志中时间与系统时间不一致,即本该上班时间才产生的产并发访问日志,全部发生在凌晨至上班前. 本以为是系统时间设置错误,检查后一切正常.后查询资料,原来是这个原因: 日 ...

  3. EZOJ #224

    传送门 分析 首先我们发现要让答案最小,或运算一定是没有用的 我们还可以发现a^b = a&(~b) 所以异或运算也没有用 于是我们只考虑否和与 我们还会得到一个性质就是没增加一个数一定会让答 ...

  4. 洛谷 P1103 书本整理(动规)

    洛谷 P1103 书本整理 题目描述 Frank是一个非常喜爱整洁的人.他有一大堆书和一个书架,想要把书放在书架上.书架可以放下所有的书,所以Frank首先将书按高度顺序排列在书架上.但是Frank发 ...

  5. sql分组获取第一条记录(sql+oracle)

    sql版本 select * from (select t.CloseDate,t.ExpiryDate,t.DataTypeLookupID,ROW_NUMBER() over(partition ...

  6. ant+proguard签名打包 .jar

    ant+proguard签名打包 .jar 摘自: https://blog.csdn.net/a_ycmbc/article/details/53432812 2016年12月02日 14:52:3 ...

  7. [operator]jenkins+gitlab/Webhook自动构建发布

    开发同事在提交代码到gitlab后,需要使用jenkins对代码进行构建,每次都需要手动操作会很繁琐,如果工程很大,那么也会浪费时间,gitlab的webhook功能,可以在代码提交后自动调用jenk ...

  8. Windows 配置 nginx php 多版本切换

    1. 下载 nginx   nginx.org 2. 下载 php  windows.php.net   选择 nts 版本,解压后,将php.ini.development 重命名为  php.in ...

  9. vim最实用命令和快捷键

    参考文章,点这里 查找 1.命令模式下,按'/',然后输入要查找的字符,Enter./和?的区别是,一个向前(下)找,一个向后(上). 2.使用n命令来继续刚才的查找命令,如果我们想要停止这一查找,可 ...

  10. css3的那些高级选择器二

    在上个星期我介绍了css3的属性选择器,伪类选择器和结构伪类选择器,今天楼主继续把其它的css3选择器说完. 在css3中,共有11中UI状态伪类选择器,分别是E:hover,E:active,E:f ...