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. Java 硬件同步机制 Swap 指令模拟 + 记录型信号量模拟

    学校实验存档//.. 以经典的生产者消费者问题作为背景. 进程同步方式接口: package method; /** * P表示通过,V表示释放 */ public interface Method ...

  2. Mysql5.7.20 On Windows安装指导

    安装环境 Windows版本:Windows10 64bit MySQL版本: MySQL5.7.20 配置过程 1.下载MySQL Community Server (下载链接) 根据自己操作系统需 ...

  3. centos 7 部署 汉化版 gitlab

    =============================================== 2017/11/12_第6次修改                       ccb_warlock 更 ...

  4. 防盗链与token运用

    为什么要防盗链? 例如手机/PC应用,如果有人知道你的api地址,和应用格式,那么他人就可以利用这个接口进行盗链:盗取/盗用里面的数据. 防盗链特性: 1.因为是非开放性的,所以所有的接口都是封闭的, ...

  5. Effective Java 第三版——13. 谨慎地重写 clone 方法

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  6. Q：javax.comm 2.0 windows下Eclipse的配置

    @转自http://blog.csdn.net/zhuanghe_xing/article/details/7523744处 要在Windows下,对计算机的串口或并口等进行编程,可以选择使用Java ...

  7. WPF-控件(1)

    小记:最近公司使用WPF开发一款新的产品,从零基础开始学习WPF,在看书的过程中,有些内容需要规整到一起,最终选择了博客园,希望对自己所掌握的知识有所规整. --------------------- ...

  8. SQLServer 索引总结

    测试案例: SET STATISTICS IO ON SET STATISTICS TIME ON SET STATISTICS PROFILE ON SELECT  count(A.CarrierT ...

  9. MSSQLSERVER并行度

    Microsoft SQL Server最大并行度(MAXDOP) 配置选项控制并行计划用于执行查询的处理器的数目.此选项确定用于执行工作并行查询计划运算符的计算和线程资源.根据是否 SQL Serv ...

  10. A session had already been started – ignoring session_start() 怎么办？

    php警告提示A session had already been started – ignoring session_start() 解决方案 访问log日志发现有个这样的警告 主要是在TP框架中 ...