详解webpack+es6+angular1.x项目构建


Posted in Javascript onMay 02, 2017

技术栈概述

ES2015(ES6)

大名ES2015,顾名思义是 ECMAScript 在2015年6月正式发布的一套标准。小名ES6,意为ECMAScript第六次变更。(JavaScript 是 ECMAScript 规范的一种实现)。如今已慢慢替代ES5,成为JS主流的开发规范,新增很多语法糖,大大提高开发效率。

webpack

详解webpack+es6+angular1.x项目构建

一款模块化的构建工具,对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是很灵活的,可以自己按需配置,本项目都是用的官方推荐配置。

项目结构

详解webpack+es6+angular1.x项目构建

commonComponents

公共组件目录,放一些二次封装的table等等'片段式'的html。

components

页面组件目录,因为是单页面应用,这里面放置的也就是各个页面了,把每个页面封装成'大'组件,里面由各自的html和'小'组件拼接而成。

config

路由,URL等等可配置的管理目录。

css

项目的公用样式目录。具体到组件的样式,会在各个组件里面具体写。比如login组件。

详解webpack+es6+angular1.x项目构建

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项目构建

以上,就简单的构建好了一个webpack+es6+angular1.x的项目。

项目地址参考:https://github.com/jiwenjiang/angularSeed

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array对象方法参考
Oct 03 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
js输出列表实现代码
Sep 12 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
jQuery Tree Multiselect使用详解
May 02 #jQuery
bootstrap的常用组件和栅格式布局详解
May 02 #Javascript
Vuejs实现带样式的单文件组件新方法
May 02 #Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 #Javascript
老生常谈js-react组件生命周期
May 02 #Javascript
js 用于检测类数组对象的函数方法
May 02 #Javascript
使用Bootstrap打造特色进度条效果
May 02 #Javascript
You might like
swfupload 多文件上传实现代码
2008/08/27 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php目录拷贝实现方法
2015/07/10 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
js评分组件使用详解
2017/06/06 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
python3中编码获取网页的实例方法
2020/11/16 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
《手指教学》反思
2014/02/14 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
小学生安全保证书
2015/05/09 职场文书
会议主持词结束语
2015/07/03 职场文书
纪律委员竞选稿
2015/11/19 职场文书