gulp + es6 + babel+ angular 搭建环境并实现简单的路由

最新推荐文章于 2024-06-10 21:57:03 发布

weixin_30414155

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量173

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/changyaoself/p/7873991.html

版权

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 替代的注入。

转载于:https://www.cnblogs.com/changyaoself/p/7873991.html

weixin_30414155

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gulp + es6 + babel+ angular 搭建环境并实现简单的路由

1.ECMAscript 6的语法糖面临的唯一问题就是浏览器兼容的问题，使得很多程序员望而怯步。2.babel的作用就是将es6的语法编译成es5被浏览器所识别。这样就可以任性的使用es6了。3.gulp的使用：http://www.cnblogs.com/changyaoself/p/7856223.html。最好去看大佬的更多详情与解释。4.上代码：// gulpfile....
复制链接

扫一扫