使用Laravel Mix(Webpack)设置Bootstrap 5工作流程

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进行软件包管理。确保在系统中安装了NodeJNPM。浏览您新创建的目录,然后运行以下命令。

npm init -y

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

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

3.安装Bootstrap

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

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

注意:Bootstrap v5删除了jQuery依赖。如果您不使用BootstrapJavaScript,而仅使用其样式,则不必安装 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.jsapp.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"
},
  1. NPM Run开发
    要在HTML页面中使用Bootstrap,我们需要JS和SCSS文件的编译版本。

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

npm run dev

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

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

现在,您的项目的dist目录中应该有两个其他文件,分别是app.jsapp.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>

我在HTML页面中包含了Bootstrap CSS和JS库,并且还包含了一条简单的警报消息和一个Bootstrap Modal,以测试样式和JS部件是否都正常工作。

这就是使用Laravel-Mix设置Bootstrap工作流程的全部内容。

翻译自:Setting up Bootstrap 5 Workflow using Laravel Mix (Webpack)

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 1
mowangjuanzi

大佬。你这篇文章过时了。

首先 laravel-mix 更新到 v6 之后,编译的程序已经变了,具体可以参考 github.com/JeffreyWay/laravel-mix/...

第二是 bootstrap 5 bete 1 更新之后,modal 示例代码如下:getbootstrap.com/docs/5.0/componen...

属性值 data-bs-toggle, data-bs-target

1周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!