Mark Ku's Blog
首頁 關於我
用 Powershell 寫了一個工具, 將幾百頁 Bootstrap 的舊專案批量轉換到 Tailwind css
Frontend
用 Powershell 寫了一個工具, 將幾百頁 Bootstrap 的舊專案批量轉換到 Tailwind css
Mark Ku
Mark Ku
August 28, 2023
1 min

時空背景

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

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

此次轉換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;
    }
}

像 row 因為命名可能和其他衝突,所以需要人工替換成 “flex flex-wrap”

像 btn、close、dropdown-toggle、collapse、modal-header modal-body 都得人工去改

一些預設字體大小、間距跑掉的

最後

雖然切換技術總是有挑戰性的,考慮到長期的效能和可維護性,這是值得的,如果你也正在考慮這樣的昇級,希望也能夠解決你的問題。


Tags

Mark Ku

Mark Ku

Software Developer

8年以上豐富網站開發經驗,直播系統、POS系統、電子商務、平台網站、SEO、金流串接、DevOps、Infra 出身,帶過幾次團隊,目前專注於北美及德國市場電商網站開發團隊。

Expertise

前端(React)
後端(C#)
網路管理
DevOps
溝通
領導

Social Media

facebook github website

Related Posts

Fixing Three.js Video Texture Issue on iOS 16
Fixing Three.js Video Texture Issue on iOS 16
October 27, 2023
1 min

Quick Links

關於我

Social Media