webpack+es6+angular1.x項目構建

KoreyLee 發布于2019-08-20 16:12 / 395人閱讀

摘要：技術棧概述大名，顧名思義是在年月正式發布的一套標準。小名，意為第六次變更。本項目，選擇的是的推薦配置，唯一注意的是全局變量中把的關鍵詞加上。項目結構公共組件目錄，放一些二次封裝的等等片段式的。項目的公用樣式目錄。

技術棧概述 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;

 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定義之后)

統一管理頁面組件

在剛剛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的項目。

項目地址參考：https://github.com/jiwenjiang...

云服務器 GPU云服務器如何構建java項目 ES6 es6-系列 ES6入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82791.html

webpack 教程資源收集

學習的過程中收藏了這些優秀教程和的項目，希望對你有幫助。 github地址, 有不錯的就更新官方文檔中文指南初級教程 webpack-howto 作者：Pete Hunt Webpack 入門指迷作者：題葉　 webpack-demos 作者：ruanyf 一小時包教會 —— webpack 入門指南作者：VaJoy Larn　　 webpack 入門及實踐作者：...

Backache 2019-08-21 14:05 評論0 收藏0
angular1.x和angular2+并行，angular1.x 升級 angular2+方案

摘要：可以在不必打斷其它業務的前提下，升級應用程序，因為這項工作可以多人協作完成，在一段時間內逐漸鋪開，下面就方案展開說明主要依賴提供模塊。在混合式應用中，我們同時運行了兩個版本的。這意味著我們至少需要和各提供一個模塊。 angular1.x 升級 angular2+ 方案我給大家提供的是angular1.x和angular5并行，增量式升級方案，這樣大家可以循序漸進升級自己的應用，不想看...

Olivia 2019-08-26 11:36 評論0 收藏0
Webpack + Angular的組件化實踐

摘要：最近寫復旦二手平臺的時候開始嘗試用一直推崇了很久的組件化。經過一番抉擇之后選擇了的組合。所以在這里分享一下具體的實踐流程。自己有自己獨特的依賴注入以及模塊聲明方式，看起來似乎和是水火不容的，但事實上他們完全可以融合。最近寫復旦二手平臺的時候開始嘗試用一直推崇了很久的組件化。經過一番抉擇之后選擇了 webpack + angular 的組合。所以在這里分享一下具體的實踐流程。 Web...

neuSnail 2019-08-21 10:44 評論0 收藏0
一個前端菜鳥的成長歷程

摘要：張鑫旭老師的文章寫的很棒，解決了我的許多困惑。所以，基礎知識的牢固就顯得尤為重要是個不怎么聽話的孩子，總是會搞出一些奇奇怪怪的事情來張鑫旭老師十年磨一劍，鉆研的魔法，可見其中技術細節有多復雜。 ??從實習算起，到現在工作了也有一年半的時間了，在這期間，深深感受到了前端領域的飛速發展，在這里記錄一下自己的成長歷程，算是對知識的一個梳理，也希望幫助到剛入行的同學們。說來慚愧，大學里并沒有涉...

lieeps 2019-08-29 15:37 評論0 收藏0
一個前端菜鳥的成長歷程

摘要：張鑫旭老師的文章寫的很棒，解決了我的許多困惑。所以，基礎知識的牢固就顯得尤為重要是個不怎么聽話的孩子，總是會搞出一些奇奇怪怪的事情來張鑫旭老師十年磨一劍，鉆研的魔法，可見其中技術細節有多復雜。 ??從實習算起，到現在工作了也有一年半的時間了，在這期間，深深感受到了前端領域的飛速發展，在這里記錄一下自己的成長歷程，算是對知識的一個梳理，也希望幫助到剛入行的同學們。說來慚愧，大學里并沒有涉...

SHERlocked93 2019-08-26 11:59 評論0 收藏0