webpack多頁應(yīng)用架構(gòu)系列（十）：如何打造一個自定義的bootstrap

jindong 發(fā)布于2019-08-20 11:24 / 612人閱讀

摘要：我個人慣用的是，因此本文以為例來介紹如何打造一個自定義的。引入全局的方法請看我之前的這篇文章多頁應(yīng)用架構(gòu)系列四老式插件還不能丟，怎么兼容，我的腳手架項(xiàng)目也是使用的這套方案。

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007043716
如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

前言

一般我們用bootstrap吶，都是用的從官網(wǎng)或github下載下來build好了的版本，千人一臉吶多沒意思。當(dāng)然，官網(wǎng)也給我們提供了自定義的工具，如下圖所示，但每次要改些什么就要重新在官網(wǎng)上打包一份，而且還是個國外的網(wǎng)站，甭提有多煩躁了。

那么，有沒有辦法讓我們隨時隨地都能根據(jù)業(yè)務(wù)的需要來自定義bootstrap呢？答案自然是肯定的，webpack有啥干不了的呀（大誤）[手動滑稽]

sass/less的兩套方案

bootstrap主要由兩部分組成：樣式和jQuery插件。這里要說的是樣式，bootstrap有l(wèi)ess的方案，也有sass的方案，因此，也存在兩個loader分別對應(yīng)這兩套方案：less <=> bootstrap-webpack 和 sass <=> bootstrap-loader 。

我個人慣用的是less，因此本文以bootstrap-webpack為例來介紹如何打造一個自定義的bootstrap。

開工了！ 先引入全局的jQuery

眾所周知，bootstrap這貨指明是要全局的jQuery的，甭以為現(xiàn)在用webpack打包的就有什么突破了。引入全局jQuery的方法請看我之前的這篇文章《webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？》（ProvidePlugin + expose-loader），我的腳手架項(xiàng)目Array-Huang/webpack-seed也是使用的這套方案。

如何加載bootstrap配置？

bootstrap-webpack提供一個默認(rèn)選配下的bootstrap，不過默認(rèn)的我要你何用（摔

好，言歸正題，我們首先需要新建兩個配置文件bootstrap.config.js和bootstrap.config.less，并將這倆文件放在同一級目錄下（像我就把業(yè)務(wù)代碼里用到的config全部丟到同一個目錄里了哈哈哈）。

因?yàn)槊總€頁面都需要，也只需要引用一次，因此我們可以找個每個頁面都會加載的公共模塊(用Array-Huang/webpack-seed來舉例就是src/public-resource/logic/common.page.js，我每個頁面都會加載這個js模塊)來加載bootstrap：

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

上文已經(jīng)說到，bootstrap-webpack其實(shí)就是一個webpack的loader，所以這里是用loader的語法。需要注意的是，如果你在webpack配置文件中針對js文件設(shè)置了loader（比如說babel），那么在加載bootstrap-webpack的時候請?jiān)谧钋懊婕觽€!!，表示這個require語句忽略webpack配置文件中所有l(wèi)oader的配置，還有其它的用法，看自己需要哈：

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，顯然，它們的作用是不一樣的。

bootstrap.config.js

bootstrap.config.js的作用就是配置需要加載哪些組件的樣式和哪些jQuery插件，可配置的內(nèi)容跟官網(wǎng)是一致的，官方給出這樣的例子：

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,
  }
};

當(dāng)時我是一下子懵逼了，就這么幾個？完整的例子/文檔在哪里？后來終于被我找到默認(rèn)的配置了，直接拿過來在上面改改就能用了：

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項(xiàng)就是jQuery插件了，而styles項(xiàng)則是樣式，可以分別對照著bootstrap英文版文檔來查看。

需要解釋的是styleLoader項(xiàng)，這表示用什么loader來加載bootstrap的樣式，相當(dāng)于webpack配置文件中針對.less文件的loader配置項(xiàng)吧，這里我也是直接從webpack配置文件里抄過來的。

另外，由于我使用了iconfont作為圖標(biāo)的解決方案，因此就去掉了glyphicons；如果你要使用glyphicons的話，請務(wù)必在webpack配置中設(shè)置好針對各類字體文件的loader配置，否則可是會報錯的哦。

bootstrap.config.less

bootstrap.config.less配置的是less變量，bootstarp官網(wǎng)上也有相同的配置，這里就不多做解釋了，直接放個官方例子：

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

需要注意的是，我一開始只用了bootstrap.config.js而沒建bootstrap.config.less，結(jié)果發(fā)現(xiàn)報錯了，還來建了個空的bootstrap.config.less就編譯成功了，因此，無論你有沒有配置less變量的需要，都請新建一個bootstrap.config.less。

總結(jié)

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

后話

此方案有個缺點(diǎn)：此方案相當(dāng)于每次編譯項(xiàng)目時都把整個bootstrap編譯一遍，而bootstrap是一個龐大的庫，每次編譯都會耗費(fèi)不少的時間，如果只是編譯一次也就算了，每次都要耗這時間那可真惡心呢。所以，我打算折騰一下看能不能有所改進(jìn)，在這里先記錄下原始的方案，后面如果真能改進(jìn)會繼續(xù)寫文的了哈。

示例代碼

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

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

webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)：https://segmentfault.com/a/1190000006843916

webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？：https://segmentfault.com/a/1190000006871991

webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁應(yīng)用架構(gòu)系列（十）：如何打造一個自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁&頁面模板:https://segmentfault.com/a/1190000007126268

webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個簡單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施

webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

webpack多頁應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007043716
如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang