论使用bootstrap的正确姿势

Question

首先本站有一个类似的问题：
http://segmentfault.com/q/1010000000319039

考虑到问题的时间是2013年，有点久远，所以重新发布一个问题，而且关注点也有点区别，下面是正题：

前端目前用webpack解决js的依赖、合并、打包，目前很酸爽，css是用less来写，每个组件对应一个less（如果需要的话），之后通过ExtractTextPlugin把这些less编译、合并成一个css然后加入到页面中，到目前为止so far so good

但是同时使用了bootstrap作为框架，目前是把bs的资源js css font都通过页面link的方式引入，觉得有些浪费，所以在想又没有css的依赖解决方案？比如首先把bs的less文件引入本地（npm什么的都可以），然后在我需要的组件less里面引入对应的bs less组件，进行minin，完了webpack把用到的less编译、打包，有没有这种可能性？对于bs的js模块是不是也有类似的办法？

---

邀请了两个标签的大拿，如果打扰了，请见谅:)

Answer 1

利用bootstrap-webpack，详情请参考我的这篇文章《webpack多页应用架构系列（十）：如何打造一个自定义的bootstrap》

Answer 2

你自己在后面设想的方案就是可行的，很多基于 Bootstrap 的自动化构建流程也都是这么做的。唯一需要注意的是 Bootstrap 的组件自身就存在依赖关系，所以不是简单的在你的组件里引入 Bootstrap 的文件就完事了（不管是样式还是脚本，但是脚本的依赖关系相对简单，比如说 Popover 组件一定要先引入 Tooltips 组件），而是要先理清楚 Bootstrap 自身的依赖，然后再统一引入到你的模块中去。

然而这就带来另外一个问题：自己的组件里会不停重复引用 Bootstrap 自身的依赖关系，如果 ExtractTextPlugin（我没用过）可以在抽取的时候解决 DRY 的问题那就没什么问题了。如果不能的话则可以考虑别的解决方案，前不久新鲜出炉的 CSS Modules 不知道你是否了解？可以试试看。

至于 Bootstrap 自身的依赖关系是怎样的，可以下载非 build 版的源码，不管是 less 或是 sass 版本都是按照模块化的思路去组织的，最外层的 bootstrap.less/scss 文件里列举的依赖关系的顺序，但最好不要直接用原始结构里的（比如说你用 npm 安装的，那最好不要直接用 node_modules/... 下的文件，而是在自己的项目里拷贝一份，这样你可以在里面做一些自定制，去掉不要的组件或是添加自己扩展的组件之类的。

这两年做 web 应用越来越觉得 Bootstrap 有些不合时宜了，方方面面的原因都有，不过用来做些原型还是很好用的。有一定发展水平的团队基本上都会有自己的 UI 样式库，按照自己团队开发产品的构建流程来编写，可能使用起来会更加得心应手些。我们有，你邀请的 @题叶 他们也有，是不是基于 Bootstrap 倒不一定，看需求了。

Answer 3

之前简聊在使用 Bootstrap 定制过的 UI 的时候用 Webpack 尝试过打包,
但已经过去很久了, 我记不清细节, 至少是可行的, 大概几个地方需要注意一下

• js 打包, jQuery 是一个特别的依赖, 需要手动处理引用进来

• LESS 文件用一个 LESS 的入口或者 js 的入口引用进来

• 项目包含的字体文件图片文件略多, loader 匹配时加上正则处理一下后缀

• 似乎有个 filter 语法太复杂, 里边 inline 了 SVG 图片怎么, 要特殊处理, 记不清了

• 我们代码当时定制了字体, 打包时候字体的路径就不对了, 需要手动修改变量修正字体路径

另外我们后面从 Bootstrap 迁移了, 因为 jQuery 组件和 React 兼容不好,
当然 Bootstrap 本身的体积和 UI 规范和我们团队也有不合适的地方.

Answer 4

最近找到个bootstrap-loader也算是比较顺手的扩展工具了，能自定义style及script，还能让自定义bootstrap的里变量值，如：$brand-primary、$font-family-sans-serif。使用也比较简单，弄好环境然后在入口文件引用就可以了。

# main.js
require('bootstrap-loader');