详解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 相关文章推荐
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
浅谈JS的原型和继承
May 08 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
vue实现短信验证码输入框
Apr 17 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
用PHP制作静态网站的模板框架
2006/10/09 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python中列表的含义及用法
2020/05/26 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
演讲稿开场白
2014/01/13 职场文书
禁止酒驾标语
2014/06/25 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
工作证明格式及范本
2014/09/12 职场文书
大班上学期个人总结
2015/02/13 职场文书
培训师岗位职责
2015/02/14 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
解除处分决定书
2015/06/25 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python