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. Kendo UI使用笔记

    1.Grid中的列字段绑定模板字段方法参数传值字符串加双引号: 上图就是个典型的例子,openSendWin方法里Id,EmergencyTitle,EmergencyDetail 三个参数,后两个参 ...

  2. css盒模型研究

    css的盒模型一直是一个重点和难点,最近由后端的学习转到前端,觉得有必要深入研究一下css的盒模型. 1.万物皆盒子 我们必须要有一个理念,在html的世界里,万物皆盒子,那就是任何一个html元素都 ...

  3. vbs的一些入门基础。。。

    VBS(VBScript的进一步简写)是基于Visual Basic的脚本语言. Microsoft Visual Basic是微软公司出品的一套可视化编程工具, 语法基于Basic. 脚本语言, 就 ...

  4. Linux内置命令

    主要Shell内置命令 Shell有很多内置在其源代码中的命令.这些命令是内置的,所以Shell不必到磁盘上搜索它们,执行速度因此加快.不同的Shell内置命令有所不同. A.2.1 bash内置命令 ...

  5. Git Pro读书笔记

    本文为Git Pro读书笔记,所有内容均来自Git Pro 1 Git基础 1.1 记录每次更新到仓库 在Git里,文件有4种状态,modified, staged, commited, 还有一种状态 ...

  6. 如何配置FTP服务器，方便操作服务器文件

    1 进入"控制面板"->"程序"->"打开或关闭Windows功能",找到"Internet信息服务"选项 ...

  7. x的x次幂的值为10，求x的近似值

    public class Main { static double eps = 1e-7; public static void main(String[] args){ double l = 2,r ...

  8. Nginx 学习笔记（七）如何解决nginx: [emerg] bind() to [::]:80 failed (98: Address already in use)

    出现:nginx: [emerg] bind() to [::]:80 failed (98: Address already in use) 错误,有以下两种情况 1.80端口被占用 2.ipv4端 ...

  9. Java实现2048小游戏【代码】

    元旦刚过,祝大家新年快乐呀! 感觉2017实在是过得太快了... 正如之前所说,这个游戏最开始的版本其实在去年5月份就写好了,其实当时就已经实现了主要功能,后来经历了几次更新,加入了Undo功能,加入 ...

  10. php 运算符and or && || 的详解

    想弄清这个问题,首先要了解这些运算符的优先级:了解后,我们才知道,逻辑运算和赋值运算的执行顺序: //and or 的优先级小于 = //&& || 的优先级大于 = //or-前面语 ...