舊多頁應用項目的重構

一些感嘆

利用最近本身寫的一個針對多頁應用而寫的腳手架，對本身第一個寫的項目進行重構。哈哈，那個時候剛入門前端，還不知道有webpack這種東西，寫的是那種最最古老的Bootstrap + jquery項目，那時還不懂什麼是打包... 通過半年來的學習，成長到如今，回頭看看本身第一次的項目，還真是慘不忍睹啊~ 好吧，不囉嗦了，開始吧。

看看項目目錄結構

先看看之前這個項目長什麼樣子....

css ————
      | —— introduction.css
      | —— index.css
      | —— owl.carousel.min.css
js  ————
      | —— initIntro.js
      | —— initScroller.js
      | —— index.js
      | —— iscroll-probe.js
      | —— owl.carousel.min.js
img ————
      .........
index.html
introduction.html

一共就只有2個頁面，一個主頁index和一個詳情介紹頁introduction。 看着這個目錄結構此刻的心情(/ω＼)

1. 首先第三方庫的css和js文件應該集中放在一個lib文件夾下。把業務相關的東西和無關的東西分開
2. 頁面和其相關的css和js應該都集中在一個文件夾中，把頁面看做一個模塊。在後期的維護纔會更加方便，起碼你不用在一衆多的js文件中尋找你所要的。

開始

目錄的改進

• 先在這裏下載這個腳手架。npm install安裝全部依賴後-
• 執行npm run create index introduction 建立2個目錄，把舊項目的文件拷到對應文件夾，並按照上述內容，把第三方庫都放在一個lib文件夾下。並把images文件夾存放在src/static下。
• 通過一番重命名後，感受本身那時文件的名字取的確實是有點那啥.... 不過這也顯得本身有所成長吧。

• 如今的目錄結構

  static           //    靜態資源的存放
  | ———— imgs
  
  src 
  | ———— views
  |        | ———— index
  |        |        | ———— index.html
  |        |        | ———— index.css
  |        |        | ———— index.js
  |        |        | ———— initScroller.js
  |        | ———— introduction
  |                 | ———— index.html
  |                 | ———— index.css
  |                 | ———— index.js
  | ———— lib
          | ———— owl.carousel.min.css
          | ———— owl.carousel.min.js
          | ———— iscroll-probe.js

js、css的引入

• 舊項目大部分都是使用<script>標籤引入腳本，用<link>引入樣式。同時這個舊項目也有用到bootcss的cdn。這裏仍是比較推薦使用cdn的，畢竟能夠減小打包後文件的大小。cdn引入相信你們都會，就不說了。
• 使用import去引入相關的js和css文件，腳手架已集成了各類loader。
• 對於一些不支持CommonJS的第三方庫，要麼你去改造它，要麼只好直接用<script>引入吧（儘管很不肯意）
• 目錄結構的更改，全部的路徑引用確定都已經出錯了。這些就自行去修復吧。
• 這個例子裏，咱們不用cdn 咱們經過npm安裝JQuery和Bootstrap，可是v3版本不支持模塊化，那麼咱們趁此機會入坑v4-beta吧

入坑JQuery和Bootstrap v4

Bootstrap-v4 官方文檔

npm install jquery
npm install popper.js
npm install bootstrap@4.0.0-beta

官方文檔中有用到webpack.ProvidePlugin,使用它就能夠自動加載模塊，不須要手動的在每一個js文件前import或require引入
並且還須要用到export-loader（ε=(´ο｀*)))唉 好麻煩吶）,官方文檔要求，若是咱們要按需引入組件的時候就須要藉助export-loader去幫咱們在組件的js代碼中去添加module.exports = ...這樣才能實現按需引入。

npm install export-loader -D

而後在咱們的webpack.dev.conf.js和webpack.prod.conf.js中的Plugin:[]中添加下面的代碼

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default'],
  // In case you imported plugins individually, you must also require them here:
  Util: "exports-loader?Util!bootstrap/js/dist/util",
  Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
})

這裏就會發現dev和prod有重複的部分了。而且咱們之後每引入一個組件就必須在這裏添加相似的一行代碼
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"，因此就頗有必要去寫一些函數去處理這些狀況。

首先在build中建立bootstrap-components.js文件，主要用於批量生成bootstrap組件的配置。
注意: 以後添加組件的時候只須要在這裏添加便可！！

let components = [
  'Util',
  'Dropdown',
];

module.exports = (function (){
  let o = {};
  for(let name of components) {
    o[name] = `exports-loader?${name}!bootstrap/js/dist/${name.toLowerCase()}`
  }
  return o;
})();

以後在utils.js中增長這些代碼，用於生成providerPlugin的配置。

var webpack = require('webpack')
var components = require('./bootstrap-components')

exports.genProviderPlugin = function () {
  return new webpack.ProvidePlugin(Object.assign({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
  }, components));
}

最後只須要分別在webpack.dev.conf.js和webpack.prod.conf.js中的plugins: []中添加
utils.genProviderPlugin()便可。

至此，便完成了bootstrap-v4.0的配置，可是v4和v3之間存在很大的差異，有許多的樣式須要去更改~

結束

這篇文章主要是以本身的第一個爛項目做爲例子，經過項目目錄結構， 頁面模塊化，更新框架這三個方面進行了一波重構，讓老舊項目也能夠享受現代Web的開發模式。