3分鐘精通高階前端隨手寫TS外掛

2022-08-05 14:02:51

正文

隨著業務複雜度和技術深度的增加，有時我們不得不提高抽離外掛的效率。儘管有很多的技術方案，但總是夾雜了很多依賴和類庫，總感覺沒那麼純淨。因此，在某個如廁的瞬間，萌發了一種可以酣暢淋漓寫外掛的姿勢。

腳手架，就能應當根據個人愛好和編碼習慣來靈活設定。 下面我們就來一層一層的剖析。算了，一層一層太慢你們也沒耐心，直接剖。

什麼是Rollup？

Rollup是一款整合式的程式碼打包、應用構建工具。扒拉扒拉檔案

為何要做腳手架？

如上面囉嗦的，前端工程化是作為工程師的必要能力，工程化並非一個人就能搞定的，我們需要站在前人/巨人(Copy)的肩膀看世界。

隨著技術的發展，湧現了一些最佳實踐的構建工具，這些構建工具將一些專案管理和程式設計開發的行業最佳實踐整合到了一個“腳手架”工具中。如此，便有利於其他團隊快速構建出高效、高質量的工程化專案。

它能幹啥？

構建工具能做的事：

處理相容性
混淆、壓縮程式碼
Tree Shaking
轉譯
單元測試
打包應用

起鍋-安裝

yarn add rollup -g

個人推薦使用pnpm

// 安裝pnpm
npm install -g pnpm
// 安裝rollup
pnpm add rollup -g

大火-設定

使用rollup打包構建有兩種方式，直接在命令列下需要手打構建必須的引數，當然我們是做工程，那麼就得考慮如何儘可能減少團隊成員的上手成本。

建立目錄

|-- src                       //開發資料夾           
  |   |-- index.ts            //入口檔案
|-- rollup.config.js          //rollup組態檔 
|-- index.ts                  //對外暴露統一入口(非必須)

設定rollup

根目錄下建立一個純淨且功能強大的rollup.config.js組態檔，可以優先了解下各類外掛的機制，後面會提供一個package.json，直接安裝就齊活了。

import path from 'path';
import ts from 'rollup-plugin-typescript2';
// 將json 檔案轉換為ES6 模組
import json from '@rollup/plugin-json';
// 在node_模組中查詢並繫結第三方依賴項
import resolve from '@rollup/plugin-node-resolve';
// 將CommonJS模組轉換為ES6
import commonjs from '@rollup/plugin-commonjs';
// rollup babel外掛
import babel from 'rollup-plugin-babel';
// 優化程式碼壓縮
import { terser } from 'rollup-plugin-terser';
// 載入樣式檔案
import styles from 'rollup-plugin-styles';
// 程式碼檢查
import { eslint } from "rollup-plugin-eslint";
import dts from 'rollup-plugin-dts';
// 熱更新服務
import livereload from 'rollup-plugin-livereload';
// 開發伺服器
import serve from 'rollup-plugin-serve';
// 清除目錄工具
import clear from "rollup-plugin-clear";
import pkg from './package.json';
// 判斷是開發環境or生產環境
const NODE_ENV = process.env.NODE_ENV;
const isPro = function () {
  return NODE_ENV === 'production';
};
// 編譯支援的檔案型別
const extensions = ['.js', '.jsx', '.ts', '.tsx', '.less'];
export default [
  {
    input: path.resolve('./index.ts'),
    output: [
      {
        file: pkg.unpkg,
        format: 'umd',
        name: '外掛方法名',
        sourcemap: true,
      },
      {
        file: pkg.module,
        format: 'esm',
        sourcemap: true,
      },
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(), 
      commonjs(),
      json(),
      styles(),
      eslint(), // 這裡沒傳入設定引數，會自動載入檔案根目錄的 `.eslintrc.json` 組態檔。
      ts({
        tsconfig: path.resolve(__dirname, './tsconfig.json'),
        extensions: extensions,
      }),
      babel({
        runtimeHelpers: true,
        exclude: 'node_modules/**',
      }),
      !isPro() &&
        livereload({
          watch: ['dist', 'examples', 'src/**'],
          verbose: false,
        }),
      isPro() && terser(),
      !isPro() &&
        serve({
          headers: { "Access-Control-Allow-Origin": "*", // 本地服務允許跨域 }, 
          open: false,
          port: 9529,
          contentBase: './', // 本地服務的執行檔案根目錄
          openPage: '/examples/index.html',
        }),
    ],
  },
  {
    // 生成 .d.ts 型別宣告檔案
    input: path.resolve('./index.ts'),
    output: {
      file: pkg.types,
      format: 'es',
    },
    plugins: [
      dts(),
      clear({ targets: ["dist/src"], // 專案打包編譯生成的目錄 
      watch: true, // 實時監聽檔案變化 })
    ],
  },
];

提供自查設定列表：https://www.rollupjs.com/guide/big-list-of-options

設定ESlint

廢話介紹ESLint 是在 ES/JS程式碼中識別和報告模式匹配的工具，它的目標是保證程式碼的一致性和避免錯誤

通過ESlint可以儘可能地規範團隊開發的程式碼風格以及通過靜態檢查提升程式碼質量。扒拉扒拉檔案安裝eslint

pnpm add eslint -D

初始化，引數可按照心情選擇

pnpm run eslint --init

初始化完成後，在根目錄建立了一個ESlint的組態檔：.eslintrc.json

{ 
    "env": { 
        "browser": true, 
        "es2021": true 
    }, 
    "extends": [ 
        "standard" 
    ], 
    "parserOptions": { 
        "ecmaVersion": 12, 
        "sourceType": 
            "module" 
        }, 
    "rules": { } 
}

新建.eslintignore 檔案來忽略不需要Eslint檢查的內容

/dist/ 
/public/ 
/rollup.config.js

設定rollup支援ESlint，ps：上面已經支援了

import { eslint } from "rollup-plugin-eslint"; 
···
eslint(); 
···

TS編譯設定

根目錄建立tsconfig.json檔案，設定編譯引數

{
  "compilerOptions": {
    "target": "es6", // 編譯後的es版本
    "module": "esnext", // 前端模組化規範
    "allowJs": true, // 允許引入js檔案
    "strict": true, // 開啟嚴格模式
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "suppressImplicitAnyIndexErrors": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "declaration": true,
    "lib": ["esnext", "DOM"]
  },
  "exclude": ["node_modules/**"]
}

設定Babel

這個就很簡單了，直接提供檔案自己扒拉扒拉，就兩句話一定要去看。

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

Demo

為了能夠快速測試外掛的呼叫，又避免引入Vue、React等框架。使用最新瀏覽器支援的ESM方式載入打包後的外掛，並啟動服務快速偵錯，下面我們搞一搞。根目錄下建立examples資料夾，並新建index.html檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <script src="../dist/index.umd.js"></script>
</head>
<body>
    <h1 align="center" id="app">Hello 我是掃地盲僧!</h1>
    <p align="center" id="content"></p>
</body>
<script>
    const demo = new tsClass('Hello rollup', null, '這是一個基於rollup打包TypeScript的純淨框架')
    const h1 = document.querySelector('#app')
    const p = document.querySelector('#content')
    h1.innerHTML = demo.name
    p.innerHTML = demo.content
</script>

出鍋-跑一跑

// 執行起來試一試
pnpm run dev

ok搞定，很複雜嗎？不復雜！！

最後Package.json

可以根據自己需求隨機刪減，學會靈活使用

{
    "name": "rollup-ts-tpl",
    "version": "1.1.1",
    "description": "一個純淨版的ts外掛打包cli",
    "main": "dist/index.cjs.js",
    "module": "dist/index.esm.js",
    "unpkg": "dist/index.umd.js",
    "jsdelivr": "dist/index.umd.js",
    "types": "dist/index.d.ts",
    "scripts": {
        "dev": "cross-env ENV=dev rollup -c -w",
        "build": "cross-env ENV=production rimraf dist && rollup -c"
    },
    "author": "掃地盲僧",
    "license": "MIT",
    "devDependencies": {
        "@babel/core": "^7.12.3",
        "@babel/plugin-transform-runtime": "^7.16.4",
        "@babel/preset-env": "^7.12.1",
        "@babel/runtime": "^7.16.3",
        "@rollup/plugin-commonjs": "^16.0.0",
        "@rollup/plugin-eslint": "^8.0.1",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-node-resolve": "^10.0.0",
        "@rollup/plugin-typescript": "^6.1.0",
        "@typescript-eslint/parser": "^4.14.0",
        "@types/node": "^17.0.31",
        "cross-env": "^7.0.3",
        "babel-plugin-external-helpers": "^6.22.0",
        "babel-preset-latest": "^6.24.1",
        "eslint": "^7.18.0",
        "less": "^4.1.2",
        "rollup": "^2.33.1",
        "rollup-plugin-babel": "^4.4.0",
        "rollup-plugin-clear": "^2.0.0",
        "rollup-plugin-dts": "^3.0.2",
        "rollup-plugin-livereload": "^2.0.0",
        "rollup-plugin-serve": "^1.1.0",
        "rollup-plugin-terser": "^7.0.2",
        "rollup-plugin-typescript2": "^0.30.0",
        "tslib": "^2.3.1",
        "typescript": "^4.0.5"
    }
}