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