1.ECMAscript 6的语法糖面临的唯一问题就是浏览器兼容的问题，使得很多程序员望而怯步。

2.babel的作用就是将es6的语法编译成es5被浏览器所识别。这样就可以任性的使用es6了。

3.gulp的使用：http://www.cnblogs.com/changyaoself/p/7856223.html。最好去看大佬的更多详情与解释。

4.上代码：

// gulpfile.js

var gulp=require("gulp");

var babel = require("gulp-babel");

var es2015 = require("babel-preset-es2015");    //es6编译es5

var webpack = require("gulp-webpack");        //   针对es6 的import 和export

var watch = require('gulp-watch');               //    实时的监听js文件，以及时的更新打包

var uglify = require('gulp-uglify');             //  文件压缩

gulp.task("js",function(){

  gulp.src("es6/*.js")

    .pipe(babel({presets:[es2015]}))

    .pipe(gulp.dest("noUse"))         //  此处noUse为垃圾文件的放置，主要是先import编译成es5会变成require，被报require is not defined ，所以通过webpack再打包才能正确执行。

    .pipe(webpack({                   // 没有import 和 export 模块化的功能就不需要这一步。

      output:{

        filename:"all.js"    // 打包后的合并文件

      },

      stats:{

        colors:true

      }

    }))

    .pipe(uglify())

    .pipe(gulp.dest("es5"));

});

gulp.task('default',function(){

	gulp.run(['js']);                             //先执行task为js的任务。

	gulp.watch('es6/*.js', ['js']);       // 监听es6 目录下的js文件，发生变化，再次执行任务。

});

　　这里不需要创建.babelrc 格式的文件。

5.看目录：gulp执行后：

6.与angular 配合使用  页面html：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body ng-app="app" ng-controller="controller">

		<div >

			<p>{{text}}</p>

		</div>

		<ul>

			<li><a ui-sref='index'>页面1</a></li>

			<li><a ui-sref='index1'>页面2</a></li>

			<li><a ui-sref='index2'>页面3</a></li>

		</ul>

		<ui-view></ui-view>

	</body>

	<script src="es5/all.js" type="text/javascript" charset="utf-8"></script>

</html>

　　7.更改import.js 文件：

import name from "./export";

import $ from "./../jquery.min.js";   //es6文件导入的方式。./是必须的，替代绝对路径。

import angualr from "./../angular.js";

import route from "./../angular-ui-router.js";

console.log($);

alert(name);

var app = angular.module('app',['ui.router']);

app.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider){   //这里angular注入必须是严格的注入模式，否则会注入失败。

	 $urlRouterProvider.when("","/index");

	 $stateProvider.state("index",{

            url:'/index',

            templateUrl:'index.html',

            resolve:{

                loadOCjs:function(){}

            }

        }).state("index1",{

            url:'/index1',

            templateUrl:'index2.html',

            resolve:{

                loadOCjs:function(){}

            }

        }).state("index2",{

            url:'/index2',

            templateUrl:'index3.html',

            resolve:{

                loadOCjs:function(){}

            }

        });

}]);

app.controller('controller',['$scope',function($scope){   // 这里可以任性应用es6的语法。

	$scope.text = name;

}]);

　　8. export.js 文件：

export default 'yao';

　　9.发现一个不完美的地方：这样严格的注入模式会不会耽误了class 的强大功能。提供一个思路去尝试：controller as 替代 的注入。

gulp + es6 + babel+ angular 搭建环境并实现简单的路由的更多相关文章

  1. Babel指南——基本环境搭建

    ECMAScript的现状 ECMAScript,本身是一个脚本语言的设计规范,基于此规范,有许多为人熟知的语言,如JavaScript.ActionScript等.而时至几年前,随着Node.js的 ...

  2. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  3. 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程

    原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...

  4. 自动化工具gulp搭建环境(详解）

    src:读取文件和文件夹       dest:生成文件(写文件)       watch:监控文件       task:定制任务         pipe:以流的方式处理文件 bower的安装和使 ...

  5. 从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发的项目

    项目简介:该项目是基于日常计算宿舍水电煤气费的需求写的,旨在从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发,使用webpack进行代码的编译.压缩和打包,并疏通 ...

  6. Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本 ...

  7. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  8. AngularJS搭建环境

    一.搭建环境 1.1 调试工具:batarang Chrome浏览器插件 主要功能:查看作用域.输出高度信息.性能监控 1.2 依赖软件:Node.js 下载:https://nodejs.org/e ...

  9. webpack+react搭建环境

    近日自己项目遇到需要用webpack搭建react环境,查了挺多 ,自己总结一下 1.下载安装最新版node.js(https://nodejs.org/en/) 2.主要看自己网络情况,可以选择安装 ...

随机推荐

  1. python的属性（property）使用

    在面向对象编程的时候,我们定义一个Person类 class Person: def __init__(self): self.age = 22 这样写法能够方便的访问属性age, p = Perso ...

  2. RabbitMQ 1-入门学习

    环境: 软件环境MacOS ,Homebrew包管理工具 IDE: Eclipse 项目:Maven项目 1.安装RabbitMQ Server: 方式一:通过homebrew :终端执行:brew ...

  3. python 中一些关键字的区别

    一.raw_input 和input input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的 1.当输入为纯数字时 input返回的是数值类型, ...

  4. python如何进行内存管理

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 语言的内存管理是语言设计的一个重要方面.它是决定语言性能的重要因素.无论是C语言的 ...

  5. 5 秒创建 k8s 集群 - 每天5分钟玩转 Docker 容器技术（115）

    据说 Google 的数据中心里运行着超过 20 亿个容器,而且 Google 十年前就开始使用容器技术. 最初,Google 开发了一个叫 Borg 的系统(现在命令为 Omega)来调度如此庞大数 ...

  6. Git详解之三：Git分支

    Git 分支 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作.在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的 ...

  7. asp.net mvc ajax提交模型到控制器

    http://blog.csdn.net/loongsking/article/details/53224473 function btn_submit() {        var data = n ...

  8. Python 实现接口类的两种方式+邮件提醒+动态导入模块+反射（参考Django中间件源码）

    实现接口类的两种方式 方式一 from abc import ABCMeta from abc import abstractmethod class BaseMessage(metaclass=AB ...

  9. primer漏配问题解决

    在对之前的ITS数据(454数据)做split时,发现有一些reads没有被匹配上,但是barcode能够完全匹配,虽然之后的primer在中间漏了一个碱基,导致后面的碱基全部误匹配,从而导致这条re ...

  10. ABP 框架从源码学习——abp框架启动核心类AbpBootstrapper（2）

    在AbpBootstrapper中的两个至关重要的属性:IIocManager 和 IAbpModuleManager  public class AbpBootstrapper : IDisposa ...