使用Laravel Mix（Webpack）设置Bootstrap 5工作流程

王子飞的个人博客 / 1 / 1 / 创建于 4年前 / 更新于 4年前

Bootstrap版本5 Alpha已发布。您可以通过多种方式开始Bootstrap网站开发。

最简单的方法是通过CDN导入库文件。但这并不能为您提供自定义和使用Bootstrap 5实用程序API的全部优势。

还有一个选项可以使用WebPack来设置Bootstrap工作流，但是对于我的用例来说，设置配置太复杂了，因此我决定使用Laravel Mix，它基本上是一个围绕Web-pack构建的不错的小包装，并且可以完成大多数工作无缝。

这是我如何使用Laravel Mix（Simple WebPack wrapper）设置Bootstrap 5的简单工作流程的步骤

1.创建项目

为要创建的项目创建一个空白目录，我将目录命名为my-bootstrap-project。

2.初始化NPM项目

我们将使用NPM进行软件包管理。确保在系统中安装了NodeJ和NPM。浏览您新创建的目录，然后运行以下命令。

npm init -y

这将在您的项目目录中创建一个package.json文件。

如果要提供定制项目版本或描述，请跳过npm init命令的-y后缀。

3.安装Bootstrap

接下来，我们将Bootstrap库作为节点依赖项安装在项目中。

npm install bootstrap@next @popperjs/core --save-dev

注意：Bootstrap v5删除了jQuery依赖。如果您不使用Bootstrap的JavaScript，而仅使用其样式，则不必安装 Popper.js。

4.安装Laravel Mix作为节点依赖项

现在，让我们通过运行以下命令将Laravel Mix安装为节点依赖项

npm install laravel-mix --save-dev

一旦安装了Laravel-Mix，下一步就是通过运行以下命令将其配置文件从node_modules目录复制到项目根目录

cp node_modules/laravel-mix/setup/webpack.mix.js ./

现在，您应该在项目目录中看到一个名为webpack.mix.js的文件。这是Laravel Mix的配置文件。

默认情况下，文件应包含如下所示的mix命令。

mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');

这表示要编译名为app.js的JS文件和名为app.scss的scss文件，并将编译后的版本放在dist目录中。

5.导入Bootstrap JS和SCSS

创建一个名为src的新目录，并在其中创建两个空白文件，分别为app.js和app.scss

通过在app.js文件中包含以下行来导入Bootstrap的Javascript

import 'bootstrap';

app.scss通过以下代码将Bootstrap scss库导入

@import "~bootstrap/scss/bootstrap";

6.将编译脚本添加到package.json
Laravel-Mix为您提供了不同的快捷方式来运行可以编译JS和SCSS的脚本。

将以下脚本添加到package.json文件中

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

NPM Run开发
要在HTML页面中使用Bootstrap，我们需要JS和SCSS文件的编译版本。

运行以下命令，触发Laravel-Mix编译JS和SCSS。

npm run dev

注意：首次运行此命令时，laravel-mix将下载成功编译JS和CSS所需的其他依赖项。

再次运行它，您应该看到JS和CSS文件已编译。

现在，您的项目的dist目录中应该有两个其他文件，分别是app.js和app.css

注意：要压缩和最小化JS和CSS，请运行npm代替prod。

8.在HTML中包含Bootstrap样式和脚本

让我们测试一下我们的工作流程，在项目根目录中创建一个新页面index.html。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="dist/app.css" rel="stylesheet">
</head>
<body class="py-5">

    <div class="container">
        <!-- Simple Bootstrap Alert-->
        <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
        </div>

        <!-- Simple Bootstrap Modal-->
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                ...
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            </div>
        </div>
    </div>
    <script src="dist/app.js" type="text/javascript"></script>
</body>
</html>