使用Laravel Mix（Webpack）設定Bootstrap 5工作流程

王子飛發表於2021-01-12
LaravelWebboot

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"
},
  1. 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>

我在HTML頁面中包含了Bootstrap CSS和JS庫，並且還包含了一條簡單的警報訊息和一個Bootstrap Modal，以測試樣式和JS部件是否都正常工作。

這就是使用Laravel-Mix設定Bootstrap工作流程的全部內容。

翻譯自：Setting up Bootstrap 5 Workflow using Laravel Mix (Webpack)

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章