用 Powershell 寫了一個工具，將幾百頁 Bootstrap 的舊專案批量轉換到 Tailwind css

首頁關於我

用 Powershell 寫了一個工具，將幾百頁 Bootstrap 的舊專案批量轉換到 Tailwind css

Frontend

Mark Ku

August 28, 2023

1 min

時空背景

近期，我們因 Bootstrap CSS 框架太肥大，導致 Google Lighthouse 每頁平均下降 5-10 分，因此我們計劃移除 Bootstrap，因為我們只有用到Bootstrap CSS ，並未使用到元件，替換起來相較容易許多。

但因為頁面太多了，如果將每頁的網格佈局，重構成 Tailwind Grid 網格的排版方式，可能需要耗費相當多的時間，也提昇頁面改壞的風險，因此重構頁面部份，拆到下個階段執行。

為什麼要用 Tailwind

輕量化
切版快速
有豐富的selector
容易擴充
節省寫 CSS、建立 helper 的時間
以手機導向設計的css 框架

此次轉換Tailwind所用到的工具

Bootstrap to Tailwind Online Tool
CSS to Tailwind Online Tool
ChatGPT Plus
同時也參考 node_module 資料夾下 Boostrap 原始碼

首先，批量修改部份，先撰寫一個 Powershell 腳本，檔案名為 convert-boostrap-to-tailwindcss.ps1

# 設定搜尋的目錄路徑
$directoryPath = "E:\VisualStudioProject\Apps\NextJS"

# 設定需要替換的字詞對應
$replacements = @{
    'd-none' = 'hidden'
    'd-block' = 'block'
    'd-flex' = 'flex'
    'd-inline-flex' = 'inline-flex'
    'flex-column' = 'flex-col'
    'justify-content-end' = 'justify-end'
    'align-items-start' = 'items-start'
    'align-items-center' = 'items-center'
    'align-items-end' = 'items-end'
    'align-items-stretch' = 'items-stretch'
    'justify-content-center' = 'justify-center'
    'justify-content-start' = 'justify-start'
    'justify-content-between' = 'justify-between'
    'justify-content-around' = 'justify-around'
    'position-absolute' = 'absolute'
    'd-xl-none' = 'xl:hidden'
    'd-xl-block' = 'xl:block'
    'd-md-block' = 'md:block'
    'd-md-none' = 'md:hidden'
    'w-100' = 'w-full'
    'h-100' = 'h-full'
    'p-3' = 'p-4'
    'p-4' = 'p-6'
    'p-5' = 'p-12'
    'px-3' = 'px-4'
    'px-4' = 'px-6'
    'px-5' = 'px-12'
    'py-3' = 'py-4'
    'py-4' = 'py-6'
    'py-5' = 'py-12'
    'pt-3' = 'pt-4'
    'pt-4' = 'pt-6'
    'pt-5' = 'pt-12'
    'pb-3' = 'pb-4'
    'pb-4' = 'pb-6'
    'pb-5' = 'pb-12'
    'ps-3' = 'ps-4'
    'ps-4' = 'ps-6'
    'ps-5' = 'ps-12'
    'p-md-4' = 'md:p-6'
    'p-lg-4' = 'lg:p-6'
    'py-md-4' = 'md:py-6'
    'pt-lg-5' = 'md:p-12'
    'pb-md-4' = 'md:pb-6'
    'ps-lg-3' = 'lg:ps-4'
    'pe-md-5' = 'md:pe-12'
    'm-3' = 'm-4'
    'm-4' = 'm-6'
    'm-5' = 'm-12'
    'mx-3' = 'mx-4'
    'mx-4' = 'mx-6'
    'mx-5' = 'mx-12'
    'my-3' = 'my-4'
    'my-4' = 'my-6'
    'my-5' = 'my-12'
    'mt-3' = 'mt-4'
    'mt-4' = 'mt-6'
    'mt-5' = 'mt-12'
    'mb-3' = 'mb-4'
    'mb-4' = 'mb-6'
    'mb-5' = 'mb-12'
    'ms-3' = 'ms-4'
    'ms-4' = 'ms-6'
    'ms-5' = 'ms-12'
    'my-md-3' = 'md:my-4'
    'mt-md-5' = 'md:mt-12'
    'mt-lg-5' = 'md:lg-12'
    'fs-1' = 'text-6xl'
    'fs-2' = 'text-5xl'
    'fs-3' = 'text-4xl'
    'fs-4' = 'text-3xl'
    'fs-5' = 'text-2xl'
    'fs-6' = 'text-xl'
    'fw-bold' = 'font-bold'
    'fw-lighter' = 'font-[lighter]'
    'fw-light' = 'font-light'
    'fw-semibold' = 'font-semibold'
    'col-12' = 'w-full'
    'col-md-4' = 'md:w-1/3'
    'col-6' = 'w-1/2'
    'col-lg-4' = 'lg:w-1/3'
    'col-lg-2' = 'lg:w-1/6'
    'col-sm-6' = 'sm:w-1/2'
    'col-sm-4' = 'sm:w-1/3'
    'col-3' = 'w-1/4'
    'col-4' = 'w-1/3'
    'col-lg-6' = 'lg:w-1/2'
    'col-lg-3' = 'lg:w-1/4'
    'col-md-8' = 'md:w-2/3'
    'col-xl-5' = 'xl:w-5/12'    
    'col-md-6' = 'md:w-1/2'
    'col-md-10' = 'md:w-5/6'
    'col-md-12' = 'md:w-full'
    'col-lg-5' = 'lg:w-5/12'
    'col-lg-7' = 'lg:w-7/12'
    'col-lg-8' = 'lg:w-2/3'
    'col-lg-9' = 'lg:w-3/4'
    'col-sm-8' = 'sm:w-2/3'
    'col-sm-9' = 'sm:w-3/4'
    'col-sm-12' = 'sm:w-full'
    'col-1' = 'w-1/12'
    'col-2' = 'w-1/6'
    'col-5' = 'w-5/12'
    'col-7' = 'w-7/12'
    'col-8' = 'w-2/3'
    'col-9' = 'w-3/4'
    'col-11' = 'w-11/12'
    'col-md-5' = 'md:w-5/12'
    'col-md-7' = 'md:w-7/12'
    'col-xl-6' = 'xl:w-1/2'
    'col-xl-2' = 'xl:w-1/6'
    'col-sm-offset-1' = 'sm:ml-1/12'
    // 依據你們專案用到的，可以自己增加... 
}

Set-Location -Path $directoryPath

Get-ChildItem -Recurse -Filter '*.tsx' | ForEach-Object {
    $escapedFileName = $_.FullName -replace '\[(.*?)\]', '`[$1`]'
    $content = Get-Content $escapedFileName -Raw

    $replacements.GetEnumerator() | ForEach-Object {
        $content = $content -replace "(?<!\!)$($_.Key)", $_.Value
    }
    
    [System.IO.File]::WriteAllText($_.FullName, $content)
}

pause

需要手動替換的

container => ‘container mx-auto

// bootstrap 的 container 比較特別，因此需要在 global scss 額外宣告 container
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}