現代前端工具


Posted by chihyu on 2021-01-25

CSS 預處理器

寫成某個語法(sass、scss、less、stylus),經轉換後仍然是 CSS
因為 css 的樣式不好維護,所以有預處理器來解決 CSS 的問題

css 的問題:

  • 全域互相干擾
  • 沒有變數
  • 沒辦法組合

開始使用 sass

在 CLI 這樣操作

安裝

npm install -g sass

轉換:前面為 sass 的檔案,後面為轉換成 css 的檔案

註:另外會多一個 s.css.map 的檔案,負責把 css 檔案對應到 scss 的檔案,這樣右鍵檢查的時候,雖然是 css 檔案負責 style,但因為有對應所以瀏覽器會顯示的是 sass 檔案的對應到的位置

sass style.scss s.css

自動偵測: 當 scss 的檔案有改動的時候會自動轉換,就不用手動自己轉換

sass --watch style.scss s.css

基本操作

設定變數:顏色變數的名稱可以跟設計部門協調要如何命名

$primary-color: red

h1 {
    color: $primary-color
}

設定 mixin:把常用的 style 組合在一起

@mixin full() {
    width: 100%
    height:100%
}

.box {
    @include full() //或寫成 +full()
}

巢狀語法

// sass
.section {
    width: 100%;
    height 100%;
    padding: 20px;
    margin: 20px;

    .section_title {
        color: red;
    } 
}

// css
.section .section_title {
    color: red;
}

"&" 把相關的寫在一起

.box {
    background-color: red
    &:hover {
        background-color:yellow
    }
}

@import 寫在第一行把其他檔案引入

// 引入存放變數的檔案
@import variable.scss

%name 建立模板,@extend 引入模板

// 建立 btn 模板
%box {
    width: 100px;
    height: 100px;
    padding: 10px;
}

// 引入 btn 模板
.box {
    &_white {
        @extend %box
    }
    &_black {
        @extend %box
    }
}

// 轉換成 css
.box_white, .box_black {
    width: 100px;
    height: 100px;
    padding: 10px;
}

如果需要微調,用 mixin 帶參數進去,如果沒有要微調直接用 extend,因為 mixin 編譯出來的是分開寫, extend 會寫在一起

類似陣列、物件的寫法

  • 陣列:direction-types:center, start, end
  • 物件:(center:center, start:flex-start, end:flex-end)

@each:類似 map 的用法,把上面的物件寫法一起使用

@each $type, $value in direction-types {
    .flex_#{$type} {
        display: flex;
        justify-content: $value;
    }
}

@for:迴圈的用法

// sass
@for $i from 1 through 3 {
    .box#{$i} {
        width: 10px * $i 
    }
}

// css 
.box1 {
    width:10px;
}

.box2 {
    width: 20px;
}

.box3 {
    width: 30px;
}

sass 簡單範例實戰

  1. 設定顏色變數,方便管理顏色
    ex. $red-01:#FF5733
  2. 設定字體變數,語意更清楚
    ex. $font-size-small:14px $font-size-normal:16px
  3. 開頭 css 名稱相同的,用 "&" 集中起來

規模大的話,可以把變數都寫在一個檔案、mixin 寫在一個檔案、每個 page 自己一個 css,然後在 main.css 把所有東西都 import 進來

  1. 打包東西,把相似的都用巢狀寫在一起
  2. 設定變數
  3. 把不同頁的 css 分不同檔案寫
  4. 設定 mixin
  5. 把不同檔案 import 進來

Babel

把 JS 的新語法轉換成舊的語法

開始使用 Babel

在 CLI 這樣寫

  1. 初始化,會產生 package.json 的檔案
    npm init
    
  2. 安裝,page.json 就會產生 babel 的 depencies
    npm install --save-dev @babel/core @babel/cli
    
  3. 設定指令,添加 script 在 package.json
    // 表示輸入 build 會把 src 資料夾裡的檔案執行 babel,並把轉換過的檔案放到 lib 資料夾
    "scripts": {
     "build": "babel src -d lib"
    }
    
  4. 執行
    npm run build
    

gulp

  • 把好幾個 task 寫在 gulpfile 裡面,告訴 gulp 有哪些工具,該怎麼執行
  • 搭配 gulp 的 plugin 去管理這些 task,把 task 集中在一個地方,是一個任務管理器
  • 適合小網站開發

開始使用 gulp

  1. 安裝
    npm install --global gulp-cli
    npm init
    npm install --save-dev gulp
    
  2. 建立一個 gulpfile,把要執行的 task 寫在這裡
    function defaultTask(cb) {
    // place code for your default task here
    cb();
    }
    exports.default = defaultTask
    
    ex. gulp-babel
    1. 搜尋 gulp babel,找到文件
    2. 依照文件安裝 gulp-babel
      npm install --save-dev gulp-babel @babel/core @babel/preset-env
      
    3. 依照文件使用
      ```
      const { src, dest } = require('gulp'); // 引入 gulp 的 plugin
      const babel = require('gulp-babel'); // 引入 plugin
      function defaultTask() {
      return src('src/*.js') //抓出 src 資料夾下所有 js 的檔案
      .pipe(babel()) // 經過 babel 轉換
      .pipe(dest('dist')) // 轉換過後會放到 dist 這個資料夾裡面
      }

    exports.default = defaultTask
    ```

其他 Task:

  • gulp-sass
  • series:把多個任務包起來 (compileCSS, compileJS),會有先後順序
  • parallel:多個任務同時跑
  • gulp-uglify:縮小 js 檔案 (去掉空白、換行)
  • gulp-clean-css:縮小 css 檔案
  • gulp-rename:經過 uglify 的檔案改名成 .min.js
  1. 寫完之後測試
    gulp
    

Webpack

為甚麼需要 Webpack

想要把東西給別人用,但因為執行環境不同,例如 node.js vs 瀏覽器的 js,使用的語法不完全相通,所以需要 webpack 把東西包裝過才能讓別人用

  • 是一個 module bundler
  • 把資源包在一起,經過轉換後,讓你可以在瀏覽器上面使用
  • 這跟 gulp 是不一樣的東西

開始使用 Webpack

  1. 初始化,產生 package.json
    npm init -y // -y 可以跳過一些設定
    
  2. 安裝(在官方網站:documentation -> guide -> getting started)
    npm install webpack webpack-cli --save-dev
    
  3. 建立一個 src 的資料夾,把要經過轉換的的檔案放到 src 裡面
  4. 啟用 webpack
    webpack 的預設設定會去找 src 裡 index.js,作為程式的入口點進行打包,打包完之後的東西會放在 dist 的資料夾裡
    npx webpack // npx 會找這個資料夾底下的 webpack
    
  5. 把 index.html 裡引入的 js 檔案改成 dist/main.js
    // 原本引入的 js
    <script src="src/index.js"></script>
    // webpack 後改變成經轉換的 js
    <script src="dist/main.js"></script>
    
  6. 新增檔案 webpack.config.js 設定檔改寫
    const path = require('path');
    module.exports = {
    mode:'development' // 預設是 production,用 development 的模式是開發模式,打包出來的東西比較好看懂
    entry: './src/index.js', //程式入口點
    output: {
     filename: 'main.js', // 輸出的檔案名稱
     path: path.resolve(__dirname, 'dist'), // 輸出的檔案路徑
    },
    };
    

補充:
可以在 package.json 裡 script 的地方加上 "build":"webpack",當要執行時輸入 build,就會執行 webpack

npm run build

loader:載入 loader,讓 webpack 知道要怎麼去解析該檔案

ex. css-loader:載入進來後,webpack 就知道要怎麼去解析 .css 的檔案

  1. 安裝:
    npm install --save-dev style-loader
    npm install --save-dev css-loader
    
  2. 在 index.js 加上 import css
    import css from './style.css'
    
  3. 在 webpack.config.js 加上 rules
    module: {
    rules: [
     {
       test: /\.css$/i, // 對 .css 的檔案套用 loader
       use: ['style-loader', 'css-loader'], 要套用的 loader
     },
    ],
    },
    
  4. 在 src 建立 style.css 的檔案,把 css 寫進去
  5. 執行 npm run build

原理:

  • 把 css 檔案裡的東西當作字串包起來,透過 js 動態的放到 header 的 style 裡面

webpack-dev-server

可以偵測更改過的檔案,然後自動把更改過的檔案 complie

  1. 安裝
    npm install --save-dev webpack-dev-server
    
  2. 在 webpack.config.js 加上 devServer
    devServer: {
     contentBase: './dist',
    },
    
  3. 在 package.json 新增指令,寫在 scripts 裡
    "start": "webpack-dev-server --open",
    
  4. 執行
    npm run start
    
  5. 當檔案改過之後,就會自動更改,不用再 build 一次

source-map

把原本的程式碼跟打包過後的程式碼有一個對應關係

  1. 在 webpack.config.json 加上 source-map
    devtoool:'inline-source-map'
    

[筆記] webpack 新手教學之淺談模組化與 snowpack

Node.js require/module.exports 用法

採用 CommonJS 標準:

  • ruquire('模組名稱/自訂的檔案'):引入模組,可以引入內建的模組,或是引入自己寫的模組
  • module.exports:把自訂檔案中自己寫的 function export 出去,此時 require 就會把自訂檔案裡的 function 引入

自訂模組:

// 存在 utils.js 的檔案裡
function double(n) {
    return n * 2
}

module.exports = double

引入模組:

// 在 main.js 的檔案引入
var double = require('utils.js')
console.log(double(5)) // 10

[筆記] 簡易 Regular Expression 入門指南

Regular Expression 正規表達式

  • / 字串放這裡 /:找尋是否包含裡面的字串
  • /[字串放這裡]/:找尋是否包含字串中的任一個字(只要有一個符合就符合)
    • /[0-9]//\d/:是否包含數字
    • /[a-z]/:是否包含小寫字母
    • /[A-Z]/:是否包含大寫字母
    • /[a-zA-Z0-9]//\w/:是否包含數字或字母
  • /./:任意字元
  • /^/:開頭
  • /$/:結尾
  • /{}/:重複的部分
  • / /i:ignore,忽略大小寫
  • / /g:global,全都要
  • /+/:一個以上
  • /()/:比對後 () 內的東西

ex. 找尋手機號碼
條件:

  1. 10 位數
  2. 09 開頭
  3. 每個字元都都是數字

寫成這樣:

/^09\d\d\d\d\d\d\d\d$/
/^09\d{8}$/

#Web #gulp #babel #SASS #css #Webpack #Snowpack #Regular Expression







Related Posts

React-[建立開發環境篇]-安裝vite & 將vite專案打包並部署

React-[建立開發環境篇]-安裝vite & 將vite專案打包並部署

為狀態機各個狀態加上名稱吧

為狀態機各個狀態加上名稱吧

How does Event Loop work?

How does Event Loop work?


Comments