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. Cat 客户端采用什么策略上报消息树

    策略分类 目前搞清楚两种 第一种(蓝色):默认服务器列表中选一个,算法核心是根据应用名的哈希值取模.也就是说同一个应用始终打到同一台服务器上,如果这台服务器挂了,另选一台服务器. 第二种(红色):应用 ...

  2. jingtai ip

    BOOTPROTO=staticONBOOT=yesIPADDR=192.168.1.109NETMASK=255.255.255.0GATEWAY=192.168.1.1 HWADDR=00:e0: ...

  3. thinkinginjava学习笔记09_内部类

    定义与创建 将一个类定义放在另一个类.方法.作用域.匿名类等地方,就是内部类:内部类只能由外部类对象创建(通过外部方法或者.new方法),内部类对象创建时必须已经有一个外部类对象,并且与之连接(在内部 ...

  4. Zabbix 单位换算

    直接举一例子,然后再举一反三: 如图: 单位B 则基数为1024(倍数) 我性能参数为KB单位,我们则把单位转换成和我们计数器 保持一致的单位即可,一致后,zabbix 后面会自己准换成自己想要的显示 ...

  5. spring boot 之fastJson的使用（二）

    昨天说了springboot的简单入门程序.今天进一步深入.今天说一下,fastJson的使用.做过springmvc的都知道fastjson.其实boot自带json可是本人用惯了fastjson, ...

  6. MySQL优化-》执行计划和常见索引

    MySql的explain执行计划 explain是一个Mysql性能显示的工具,它显示了MySQL如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句.在开发当 ...

  7. 【读书笔记与思考】《python数据分析与挖掘实战》-张良均

    [读书笔记与思考]<python数据分析与挖掘实战>-张良均 最近看一些机器学习相关书籍,主要是为了拓宽视野.在阅读这本书前最吸引我的地方是实战篇,我通读全书后给我印象最深的还是实战篇.基 ...

  8. QCanvasItem介绍-QT3

    QCanvasItem类提供一个在QCanvas上的抽象图形对象. 各种QCanvasItem子类提供立即可用的行为.这个类是一个纯粹的抽象超类,它提供了在所有具体的canvas项目类中共享的行为.Q ...

  9. 部署 k8s Cluster（上）- 每天5分钟玩转 Docker 容器技术（118）

    我们将部署三个节点的 Kubernetes Cluster. k8s-master 是 Master,k8s-node1 和 k8s-node2 是 Node. 所有节点的操作系统均为 Ubuntu ...

  10. fgets的用法

    fgets的用法:    char *fgets(char *s, int size, FILE *stream);       fgets()  reads  in  at most one les ...