webpack多頁應用架構系列（十）：如何打造一個自定義的bootstrap

時間 2019-11-05

標籤 webpack 多頁應用架構系列如何打造一個自定義 bootstrap 欄目系統架構简体版

原文原文鏈接

本文首發於 Array_Huang的技術博客—— 實用至上，非經做者贊成，請勿轉載。
原文地址： http://www.javashuo.com/article/p-sjzbzmkk-hc.html
若是您對本系列文章感興趣，歡迎關注訂閱這裏： https://segmentfault.com/blog/array_huang

前言

通常咱們用bootstrap吶，都是用的從官網或github下載下來build好了的版本，千人一臉吶多沒意思。固然，官網也給咱們提供了自定義的工具，以下圖所示，但每次要改些什麼就要從新在官網上打包一份，並且仍是個國外的網站，甭提有多煩躁了。javascript

那麼，有沒有辦法讓咱們隨時隨地都能根據業務的須要來自定義bootstrap呢？答案天然是確定的，webpack有啥幹不了的呀（大誤）[手動滑稽]css

sass/less的兩套方案

bootstrap主要由兩部分組成：樣式和jQuery插件。這裏要說的是樣式，bootstrap有less的方案，也有sass的方案，所以，也存在兩個loader分別對應這兩套方案：less <=> bootstrap-webpack 和 sass <=> bootstrap-loader 。前端

我我的慣用的是less，所以本文以bootstrap-webpack爲例來介紹如何打造一個自定義的bootstrap。java

開工了！

先引入全局的jQuery

衆所周知，bootstrap這貨指明是要全局的jQuery的，甭覺得如今用webpack打包的就有什麼突破了。引入全局jQuery的方法請看我以前的這篇文章《webpack多頁應用架構系列（四）：老式jQuery插件還不能丟，怎麼兼容？》（ProvidePlugin + expose-loader），個人腳手架項目Array-Huang/webpack-seed也是使用的這套方案。webpack

如何加載bootstrap配置？

bootstrap-webpack提供一個默認選配下的bootstrap，不過默認的我要你何用（摔git

好，言歸正題，咱們首先須要新建兩個配置文件bootstrap.config.js和bootstrap.config.less，並將這倆文件放在同一級目錄下（像我就把業務代碼裏用到的config所有丟到同一個目錄裏了哈哈哈）。github

由於每一個頁面都須要，也只須要引用一次，所以咱們能夠找個每一個頁面都會加載的公共模塊(用Array-Huang/webpack-seed來舉例就是src/public-resource/logic/common.page.js，我每一個頁面都會加載這個js模塊)來加載bootstrap：web

require('!!bootstrap-webpack!bootstrapConfig'); // bootstrapConfig是我在webpack配置文件中設好的alias，不設的話這裏就填實際的路徑就行了

上文已經說到，bootstrap-webpack其實就是一個webpack的loader，因此這裏是用loader的語法。須要注意的是，若是你在webpack配置文件中針對js文件設置了loader（好比說babel），那麼在加載bootstrap-webpack的時候請在最前面加個!!，表示這個require語句忽略webpack配置文件中全部loader的配置，還有其它的用法，看本身須要哈：bootstrap

adding ! to a request will disable configured preLoaders
adding !! to a request will disable all loaders specified in the configuration
adding -! to a request will disable configured preLoaders and loaders but not the postLoaders

如何配置bootstrap？

上文提到有兩個配置文件，bootstrap.config.js和bootstrap.config.less，顯然，它們的做用是不同的。segmentfault

`bootstrap.config.js`

bootstrap.config.js的做用就是配置須要加載哪些組件的樣式和哪些jQuery插件，可配置的內容跟官網是一致的，官方給出這樣的例子：

module.exports = {
  scripts: {
    // add every bootstrap script you need
    'transition': true
  },
  styles: {
    // add every bootstrap style you need
    "mixins": true,

    "normalize": true,
    "print": true,

    "scaffolding": true,
    "type": true,
  }
};

當時我是一會兒懵逼了，就這麼幾個？完整的例子/文檔在哪裏？後來終於被我找到默認的配置了，直接拿過來在上面改改就能用了：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  styleLoader: ExtractTextPlugin.extract('css?minimize&-autoprefixer!postcss!less'),
  scripts: {
    transition: true,
    alert: true,
    button: true,
    carousel: true,
    collapse: true,
    dropdown: true,
    modal: true,
    tooltip: true,
    popover: true,
    scrollspy: true,
    tab: true,
    affix: true,
  },
  styles: {
    mixins: true,

    normalize: true,
    print: true,

    scaffolding: true,
    type: true,
    code: true,
    grid: true,
    tables: true,
    forms: true,
    buttons: true,

    'component-animations': true,
    glyphicons: false,
    dropdowns: true,
    'button-groups': true,
    'input-groups': true,
    navs: true,
    navbar: true,
    breadcrumbs: true,
    pagination: true,
    pager: true,
    labels: true,
    badges: true,
    jumbotron: true,
    thumbnails: true,
    alerts: true,
    'progress-bars': true,
    media: true,
    'list-group': true,
    panels: true,
    wells: true,
    close: true,

    modals: true,
    tooltip: true,
    popovers: true,
    carousel: true,

    utilities: true,
    'responsive-utilities': true,
  },
};

這裏的scripts項就是jQuery插件了，而styles項則是樣式，能夠分別對照着bootstrap英文版文檔來查看。

須要解釋的是styleLoader項，這表示用什麼loader來加載bootstrap的樣式，至關於webpack配置文件中針對.less文件的loader配置項吧，這裏我也是直接從webpack配置文件裏抄過來的。

另外，因爲我使用了iconfont做爲圖標的解決方案，所以就去掉了glyphicons；若是你要使用glyphicons的話，請務必在webpack配置中設置好針對各種字體文件的loader配置，不然但是會報錯的哦。

`bootstrap.config.less`

bootstrap.config.less配置的是less變量，bootstarp官網上也有相同的配置，這裏就很少作解釋了，直接放個官方例子：

@font-size-base: 24px;
@btn-default-color: #444;
@btn-default-bg: #eee;

須要注意的是，我一開始只用了bootstrap.config.js而沒建bootstrap.config.less，結果發現報錯了，還來建了個空的bootstrap.config.less就編譯成功了，所以，不管你有沒有配置less變量的須要，都請新建一個bootstrap.config.less。

總結

至此，一個可自定義的bootstrap就出爐了，你想怎麼折騰都行了，什麼不用的插件不用的樣式，通通給它去掉，把體積減到最小，哈哈哈。

後話

此方案有個缺點：此方案至關於每次編譯項目時都把整個bootstrap編譯一遍，而bootstrap是一個龐大的庫，每次編譯都會耗費很多的時間，若是隻是編譯一次也就算了，每次都要耗這時間那可真噁心呢。因此，我打算折騰一下看能不能有所改進，在這裏先記錄下原始的方案，後面若是真能改進會繼續寫文的了哈。

示例代碼

諸位看本系列文章，搭配我在Github上的腳手架項目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）。

附系列文章目錄（同步更新）

本文首發於 Array_Huang的技術博客—— 實用至上，非經做者贊成，請勿轉載。
原文地址： http://www.javashuo.com/article/p-sjzbzmkk-hc.html
若是您對本系列文章感興趣，歡迎關注訂閱這裏： https://segmentfault.com/blog/array_huang