让我们开始用es6来写代码--gulp构建es6

想构建一个前端自动化环境，来处理image，css，js（es6，jsx）的处理和保存刷新，让jser专注写代码

我当初选择gulp，但是接触到了es6和react后又在gulp加入了gulp-babel, babel-preset-es2015和gulp-react。一路很多坑，这里总结一下。

A):首先是gulp来处理es6
先装nodejs，之后通过npm装gulp, gulp-babel, babel-preset-es2015, gulp-webpack（ADM模块调用时会用到）

npm install -g gulp
npm init
npm install --save-dev gulp gulp-babel babel-preset-es2015 gulp-webpack

B):然后写gulpfile.js
var gulp=require(“gulp”),
babel = require(“gulp-babel”),
es2015 = require(“babel-preset-es2015”),
webpack = require(“gulp-webpack”);

gulp.task("default",function(){
  gulp.src("./js/es6/*.es6")
    .pipe(babel({presets:[es2015]}))
    .pipe(gulp.dest("./js"))//es6转js必须在webpack之前，否则webpack找不到要包装的js会报错
    .pipe(webpack({//babel编译import会转成require，webpack再包装以下代码让代码里支持require
      output:{
        filename:"all.js",
      },
      stats:{
        colors:true
      }
    }))
    .pipe(gulp.dest("./js"));//包装好的js目录

});

到这里构建工具就完成了待下面的es6编写完成执行gulp即可。

C):写es6喽
animal.es6

class Animal{
    constructor(){
        console.log("==constructor animal==");
    }
    sayHello(){
        console.log("==sayHello animal==");
    }
}

export default Animal;//这个必须，否则require到的模块将会是空Object，webpack里导出模块其实是(module.exports = Animal)

dog.es6

import Animal from "./animal"//导入模块，其实是var Animal = require("./animal");与export想对应出现
class Dog extends Animal{
  constructor(){
    super();//执行一次父类的构造，否则会报错
    console.log("==constructor dog==");
  }
}

var dog = new Dog();
dog.sayHello();

index.html

<script src="all.js"></script>

在chrome的console下会看到输出结果

总结：gulp+webpack+es6，这里我们只用到了webpack的AMD的一个功能，gulp和webpack都有压缩合并的功能，有兴趣的看下面的网站进一步学习：
gulp学习:http://www.gulpjs.com.cn/docs/getting-started/
webpack学习：http://webpack.github.io/docs/
webpack配置：http://www.tuicool.com/articles/uQfmqie
babel学习：http://babeljs.io/docs/setup/

之后会在此基础上介绍让React的jsx用上es6。。。。。尽请期待。。。。。

秒客网

让我们开始用es6来写代码--gulp构建es6

相关文章