美文网首页
ES6 环境搭建

ES6 环境搭建

作者: 程咸菜 | 来源:发表于2017-01-15 13:39 被阅读0次

由于 ES6 的语法并没有完全被浏览器所兼容,所以可以利用一些工具把 ES6 转化成 ES5 的语法,这样可以达到测试功能的的作用。主要用到的工具有

gulp + babel

这里我的电脑是 ThinkPad X230 win7 用 GIT 输入命令行,不知道 git 的同学可以看看廖雪峰大神的博客。

gulp

怎么用 gulp gulp官方文档

  1. 全局安装 gulp:
    $ npm install --global gulp

  2. 作为项目的开发依赖(devDependencies)安装:
    $ npm install --save-dev gulp

  3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

    var gulp = require('gulp');
    gulp.task('default', function() {
    // 将你的默认的任务代码放这里
    });

上面的默认代码我们写了一个控制台的打印 hello world
下面的代码就是 gulpfile.js 的内容

var gulp = require('gulp');
gulp.task('hello', function() {
  console.log('hello world')
});      

然后运行命令
gulp hello
得到下图

babel 的使用

babel 的官网是 babeljs。这里使用的是 gulp-babel 在命令行中执行
cnpm install --save-dev gulp-babel babel-preset-es2015
这时候在 gulpfile.js 中写入如下代码
var gulp = require('gulp');
var babel = require('gulp-babel');

/*gulp.task('hello', function() {
  console.log('hello world')
});*/


gulp.task('babelTask', function() {
  gulp.src('es6Test.js')//这是要转化的目标文件
      .pipe(babel({
          presets: ['es2015']
      }))
      .pipe(gulp.dest('dist'))//把转化完的文件生成到 disk 文件夹下

});     

新建目标文件 es6Test.js 内容随便写了一个 ES6 的语法
let a = 10;
console.log(a);      

保存以上的文件,然后执行命令 gulp babelTask



环境算是搭建完成了,感谢千峰教育杜老师的直播教学。

相关文章

  • es6环境搭建

    es6环境搭建

  • ES6环境的搭建

    1、ES6环境的搭建 搭建环境的原因:低版本的浏览器不支持ES6语法,可以利用工具将es6编译成es5 用Babe...

  • create-react-app 搭建不同环境

    环境搭建 ES6环境(只能使用ES6语法、默认不支持TS,使用redux、react-redux) create-...

  • ES6的开发环境搭建

    在搭建es6开发环境之前,先简单介绍一下es6。 ECMAScript 6.0(以下简称 ES6)是 JavaSc...

  • ReactNative踩坑填坑(一)

    RN环境的搭建和IDE的选择 一、mac下环境的搭建 二、WebStorm 下面导入模块的es6的结构语法在Chr...

  • React

    (1)React环境搭建的过程 安装地址示例 (2)React 基础 (2.1) es6语法 (2.2) JSX ...

  • React Native 学习记录(一)初识React Nati

    关于React Native的介绍,省略…… 关于环境的搭建,省略…… ………… 进入正题(ES6语法) Reac...

  • ES6 环境搭建

    由于 ES6 的语法并没有完全被浏览器所兼容,所以可以利用一些工具把 ES6 转化成 ES5 的语法,这样可以达到...

  • ES6开发环境的搭建

    ES6开发环境的搭建 首先,为什么ES6需要一个开发环境,而不是像ES5那样直接在浏览器打开就可以?原因就是到目前...

  • ES6

    ES6的开发环境搭建 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就...

网友评论

      本文标题:ES6 环境搭建

      本文链接:https://www.haomeiwen.com/subject/xtwybttx.html