Bootstrap 按需引入

在使用 Bootstrap 的时候，为了方便，可能通常都会选择直接引入官方编译的 CSS 和 JS。直接引入官方的 CSS 和 JS 虽然方便，但是体积也比较大，如果你能用到它的所有功能也倒还好，但是大多数情况下可能用不到它的所有功能。可能你只是想用它的某个功能比如栅格系统，但是却引入了整个 Bootstrap。对于带宽比较低的服务器来说，可能会影响加载时间。

Bootstrap 有很多个组件组成，这些组件在打包之前都是分开的，官方也提供了未编译的源代码。我们可以下载源代码，只引入自己需要的组件，然后自己编译，这样就可以缩小 Bootstrap 的体积。

使用 Webpack 或者 PARCEL 都能打包 Bootstrap，因为 Webpack 用的人要多一些，所以这里就使用 Webpack 来打包。

如果你还不了解 Webpack 的话，可以看一下 Webpack 简易使用指南。

如果你准备使用 PARCEL 打包，但又不太了解 PARCEL 的话，也可以看一下前端打包工具 PARCEL 的简单使用。

搭建环境

这里默认你已经安装了 Node.js。

创建一个以英文命名的文件夹，然后进入刚创建的文件夹。

先初始化项目：

npm init -y

安装 webpack 和 webpack-cli：

npm install --save-dev webpack webpack-cli

安装完成后在 package.json 的 script 中加入下面的执行脚本：

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

上面的 JSON 中只需要 script 中的 "build": "webpack --config webpack.config.js" 。

在项目的根目录创建一个 webpack.config.js 作为 Webpack 的配置文件。

编写配置文件：

const path = require('path');

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  打包完成后输出的目录
    path: path.resolve(__dirname, 'dist'),
    //  打包完成后的 JS 文件名
    filename: 'bundle.js',
  },
};

到这里 Webpack 就已经可以打包 JS 了。

Bootstrap 的样式是使用 Sass 编写的，所以还要继续配置 Sass 环境。

安装 css-loader：

npm install --save-dev css-loader

安装 sass 和 sass-loader：

npm install --save-dev sass sass-loader

之前写的 Webpack 简易使用指南中用来编译 Sass 的是 node-sass，但是 node-sass 需要下载源码编译安装，还需要依赖 Python。在国内即便切换到淘宝的 npm 源也很难安装成功，所以这里就把 node-sass 换成了 sass。

安装 mini-css-extract-plugin 插件：

npm install --save-dev mini-css-extract-plugin

mini-css-extract-plugin 的功能是生成独立的 CSS 文件。

通过 npm 安装 Bootstrap：

npm install --save bootstrap

这里默认安装的就是 Bootstrap 4，如果你准备使用 Bootstrap 3 或更老版本的 Bootstrap 的话，这篇文章的方法可能不太适用，因为只有 Bootstrap 4 的样式是使用 Sass 编写的，Bootstrap 3 的样式是使用 Less 编写的。

Bootstrap 需要依赖 jQuery，安装 jQuery：

npm install --save jquery

Bootstrap 的部分功能还需要依赖 popper.js，安装 popper.js：

npm install --save popper.js

到这里，该安装的基本上已经安装完毕了，接下来就是编写配置文件。

最终的 Webpack 配置文件如下：

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  输出的目录 dist
    path: path.resolve(__dirname, 'dist'),
    //  输出的 JS 文件名
    filename: 'bundle.js',
  },
  plugins: [
    //  配置 ProvidePlugin 插件加载 jQuery
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    //  配置 MiniCssExtractPlugin 生成独立的 CSS 文件
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
  module: {
    rules: [
      //  处理 CSS 文件的 loader
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './dist',
            },
          },
          {
            loader: 'css-loader',
          },
        ],
      },
      //  处理 SCSS 文件的 loader
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './dist',
            },
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
};

上面的配置文件虽然看着比较多，但是也比较简单，主要就是配置处理 CSS 和 SCSS 文件的 loader 和插件。

如果你觉得 Webpack 的配置文件比较麻烦的话，也可以考虑使用 PARCEL 来打包，PARCEL 不需要配置文件，甚至还能自动帮你安装用到的模块。

关于 PARCEL 的使用可以看前端打包工具 PARCEL 的简单使用，其中就包含了 Sass 打包。

打包

Bootstrap 的一些组件需要引入 SCSS 和对应的 JS 才能使用，这里先写 SCSS。

可以创建一个 main.scss 作为样式的入口文件，然后在 main.scss 中引入其它的样式文件。

下面是必须要引入的 Bootstrap SCSS：

@import 'bootstrap/scss/_functions';
@import 'bootstrap/scss/_variables';
@import 'bootstrap/scss/_mixins';

上面三个 SCSS 是必须要引入的，否则无法编译成功。

其它的就可以按需引入了，比如我需要按钮和按钮组，代码如下：

@import 'bootstrap/scss/_functions';
@import 'bootstrap/scss/_variables';
@import 'bootstrap/scss/_mixins';

@import 'bootstrap/scss/_buttons';  //  按钮
@import 'bootstrap/scss/_button-group';  //  按钮组

按钮和按钮组也不需要 JS。

如果我只想使用 Bootstrap 的栅格系统，我可以只引入栅格相关的样式，如下：

@import 'bootstrap/scss/_functions';
@import 'bootstrap/scss/_variables';
@import 'bootstrap/scss/_mixins';

@import 'bootstrap/scss/_grid';  //  引入栅格
@import 'bootstrap/scss/_reboot';  //  引入样式重置

其中 _reboot.scss 是样式重置，可以清除一些浏览器默认的 margin 和 padding 。如果不引入 _reboot.scss 的话，浏览器默认的 margin 和 padding 可能会导致栅格自动换行。

引入完成后开始打包。上面设置的入口文件是 main.js，还需要创建一个 main.js，然后在 main.js 中引入 main.scss，如下：

import './main.scss';

上面配置的打包命令是 build，可以输入：

npm run build

打包。

打包后的 CSS 只包含基本的样式重置和栅格系统，文件体积也只有 13KB.

上面使用的组件都是不包含 JS 的，下面就引入一个包含 JS 的组件。

main.scss：

@import 'bootstrap/scss/_functions';
@import 'bootstrap/scss/_variables';
@import 'bootstrap/scss/_mixins';

@import 'bootstrap/scss/_dropdown';  //  引入 Dropdown 组件
@import 'bootstrap/scss/_buttons';  //  引入按钮

main.js：

import 'bootstrap/js/dist/dropdown';  //  引入 Dropdown 组件 的 JS
import './main.scss';  //  引入样式

上面引入了 Dropdown 组件，Dropdown 是一个类似于下拉菜单的组件，需要配合按钮使用。

打包后生成的 CSS 和 JS 文件都比较小。

目前 Bootstrap 还是需要依赖 jQuery，所以打包的时候还是需要包含 jQuery。不过如果你使用的 Bootstrap 组件不需要依赖 JS 的话，也就不需要 jQuery 了。

组件位置和名称说明

使用 npm 安装的 Bootstrap 就在 node_modules/bootstrap 中，其中 SCSS 样式在 node_modules/bootstrap/scss 中。SCSS 文件的文件名都是和官网的组件名差不多的，可以对照着官网的组件名称引入 SCSS 文件。引入 SCSS 文件可以不需要加 scss 后缀。

如果你的编辑器无法提示文件名的话，可以打开 node_modules/bootstrap/scss 对照着手动输入，使用 Webpack 打包，引入文件的时候可以省略 node_modules ，直接从 bootstrap 开始。

Bootstrap 的 JS 组件就在 node_modules/bootstrap/js/dist 目录中，JS 文件名也是和官网的组件名差不多，可以打开官网，对照着引入。

以上就是 Webpack 按需引入 Bootstrap 的配置说明和简单演示，如果您看了这篇文章后有什么疑问或问题都可以在评论区留言，如果我知道的话会尽量解答。

本文地址：https://www.misterma.com/archives/870/

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。

搭建环境

打包

组件位置和名称说明

发表评论

表情类型

目录