手艺栈概述
ES2015(ES6)
大名ES2015，望文生义是 ECMAScript 在2015年6月正式宣布的一套范例。奶名ES6，意为ECMAScript第六次变动。（JavaScript 是 ECMAScript 范例的一种完成）。现在已逐步替换ES5，成为JS主流的开辟范例，新增许多语法糖，大大提高开辟效力。
webpack
一款模块化的构建东西，对ES6的构建越发友爱，不细致引见了。
angular
一款MV*框架，本次用的是angular的1.6.4版本，即angular1.x版本中的最高版，也能够看做是2的过渡版吧。
eslint
ESLint是一个QA东西，用来防止初级毛病和一致代码的作风。尤其是多人开辟的情境下，范例代码，一致作风是非常重要的。即使每一个人担任本身的模块，在现实实行的时刻也不免有交集。eslint简朴的讲，就是让本身少出错，也让队友更轻易的看懂你的代码。
本项目，挑选的是ESlint的引荐设置，唯一注重的是全局变量中把angular的关键词加上。由于用到了es7的async等东西，除了webpack里babel的设置要到位，eslint内里也要设置相干剖析，即：
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module"
},
"globals": {
"angular": true// angular关键词
},
"parser": "babel-eslint", // 剖析es7
"rules": {
"no-console": 0,
"quotes": [
"error",
"single"
]
}
};eslint是很天真的，能够本身按需设置，本项目都是用的官方引荐设置。
项目构造
commonComponents
大众组件目次，放一些二次封装的table等等’片段式’的html。
components
页面组件目次，由于是单页面运用，这内里安排的也就是各个页面了，把每一个页面封装成’大’组件，内里由各自的html和’小’组件拼接而成。
config
路由，URL等等可设置的治理目次。
css
项目的公用款式目次。详细到组件的款式，会在各个组件内里详细写。比方login组件。
image
图片目次。一切图片一致在这里治理。
server
效劳目次。对项目的一些公用效劳举行封装，比方二次封装http效劳。这个目次，还能够细分，比方将angular的provider，service，value等等再举行分别。
项目进口
app.js
import 'babel-polyfill';
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import components from './components';
import services from './server'
import commonComponents from './commonComponents';
import appRouter from './config/app.router';
import './css/main.less';
import style from './app.less';
let appComponent = {
restrict: 'E',
template: require('./app.html'),
controller: function () {
this.class = style;
},
controllerAs: 'app'
};
export default angular.module('sass', [uiRouter, components, services, commonComponents])
.config(appRouter)
.component('app', appComponent)
.name;除了引入angular，还引入了ui-router，由于原生的路由，不支持视图的嵌套。
components, services, commonComponents是各自组建效劳的汇总，前面已引见。
写一个页面组件
下面以上岸页面为例。一个组件页面由4个文件构成，分别是index.js(此页面组件的出口，也是其他逻辑，款式的进口)
import loginCtrl from './login'
import tem from './login.html';
export default angular.module('login', [])
.component('login', {
template: tem,
controller: loginCtrl
})
.name;login.js(页面的营业逻辑在这里)
import url from '../../config/system.js';
class loginCtrl {
static $inject = ['http'];
constructor(http) {
[this.http, this.name] = [http, `login`];
this.str = `str${this.name}`;
}
login() {
this.http.get({userName: 'link', userPassword: '123456'}, url.login, (data) => {
console.info("success!")
});
}
}
export default loginCtrl;这个类重要完成的营业就是发送一个上岸http要求，这里的http是二次封装的一个效劳，与注入原生依靠无异，有两种注入体式格局，一种是上边的在class中挪用静态要领。即static $inject = [‘http’];
另一种是loginCtrl.$inject = [‘http’];(class不存在变量提拔，确保写在class定义以后)
login.less(跟次上岸页面相干的款式，不贴代码了)。
如许就写好了一个页面组件，由index.js输出出去，输出到哪里呢？
一致治理页面组件
在方才components目次下写好的login页面组件目次的同级，竖立一个index.js，作用是用来一致治理组件页面。即：
import login from './login';
import register from './register';
export default angular.module('components', [
login,
register
]).name;然后再将这个页面输出到最最先的app.js。即，app.js中引入的components。其他同理，将效劳，过滤器等等都一致以相干文件治理汇总起来，再由进口文件引入。
类似于一种树形的构造：
以上，就简朴的构建好了一个webpack+es6+angular1.x的项目。
