详解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 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
ASP Json Parser修正版
Dec 06 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 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英文字符串截取代码分享
2014/07/15 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python 回溯法模板详解
2020/02/26 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
授权委托书怎么写
2014/09/25 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
公路施工安全责任书
2015/05/08 职场文书
贷款工作证明模板
2015/06/12 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Golang实现可重入锁的示例代码
2022/05/25 Golang
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL
SQLServer常见数学函数梳理总结
2022/08/05 MySQL