欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

3分鐘精通高階前端隨手寫TS插件

 更新時間：2022年08月05日 09:53:31   作者：掃地盲僧  
這篇文章主要為大家介紹了3分鐘精通高階前端隨手寫TS插件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

隨著業(yè)務復雜度和技術(shù)深度的增加，有時我們不得不提高抽離插件的效率。盡管有很多的技術(shù)方案，但總是夾雜了很多依賴和類庫，總感覺沒那么純凈。因此，在某個如廁的瞬間，萌發(fā)了一種可以酣暢淋漓寫插件的姿勢。

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

什么是Rollup？

Rollup是一款集成式的代碼打包、應用構(gòu)建工具。扒拉扒拉文檔

為何要做腳手架？

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

隨著技術(shù)的發(fā)展，涌現(xiàn)了一些最佳實踐的構(gòu)建工具，這些構(gòu)建工具將一些項目管理和編程開發(fā)的行業(yè)最佳實踐集成到了一個“腳手架”工具中。如此，便有利于其他團隊快速構(gòu)建出高效、高質(zhì)量的工程化項目。

它能干啥？

構(gòu)建工具能做的事：

  • 處理兼容性
  • 混淆、壓縮代碼
  • Tree Shaking
  • 轉(zhuǎn)譯
  • 單元測試
  • 打包應用

起鍋-安裝

yarn add rollup -g

個人推薦使用pnpm

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

大火-配置

使用rollup打包構(gòu)建有兩種方式，直接在命令行下需要手打構(gòu)建必須的參數(shù)，當然我們是做工程，那么就得考慮如何盡可能減少團隊成員的上手成本。

創(chuàng)建目錄

|-- src                       //開發(fā)文件夾           
  |   |-- index.ts            //入口文件
|-- rollup.config.js          //rollup配置文件 
|-- index.ts                  //對外暴露統(tǒng)一入口(非必須)

配置rollup

根目錄下創(chuàng)建一個純凈且功能強大的rollup.config.js配置文件，可以優(yōu)先了解下各類插件的機制，后面會提供一個package.json，直接安裝就齊活了。

import path from 'path';
import ts from 'rollup-plugin-typescript2';
// 將json 文件轉(zhuǎn)換為ES6 模塊
import json from '@rollup/plugin-json';
// 在node_模塊中查找并綁定第三方依賴項
import resolve from '@rollup/plugin-node-resolve';
// 將CommonJS模塊轉(zhuǎn)換為ES6
import commonjs from '@rollup/plugin-commonjs';
// rollup babel插件
import babel from 'rollup-plugin-babel';
// 優(yōu)化代碼壓縮
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';
// 開發(fā)服務器
import serve from 'rollup-plugin-serve';
// 清除目錄工具
import clear from "rollup-plugin-clear";
import pkg from './package.json';
// 判斷是開發(fā)環(huán)境or生產(chǎn)環(huán)境
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(), // 這里沒傳入配置參數(shù)，會自動加載文件根目錄的 `.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, // 實時監(jiān)聽文件變化 })
    ],
  },
];

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

配置ESlint

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

通過ESlint可以盡可能地規(guī)范團隊開發(fā)的代碼風格以及通過靜態(tài)檢查提升代碼質(zhì)量。扒拉扒拉文檔 安裝eslint

pnpm add eslint -D

初始化，參數(shù)可按照心情選擇

pnpm run eslint --init

初始化完成后，在根目錄創(chuàng)建了一個ESlint的配置文件：.eslintrc.json

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

新建.eslintignore 文件來忽略不需要Eslint檢查的內(nèi)容

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

配置rollup支持ESlint，ps：上面已經(jīng)支持了

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

TS編譯配置

根目錄創(chuàng)建tsconfig.json文件，設(shè)置編譯參數(shù)

{
  "compilerOptions": {
    "target": "es6", // 編譯后的es版本
    "module": "esnext", // 前端模塊化規(guī)范
    "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

為了能夠快速測試插件的調(diào)用，又避免引入Vue、React等框架。使用最新瀏覽器支持的ESM方式加載打包后的插件，并啟動服務快速調(diào)試，下面我們搞一搞。 根目錄下創(chuàng)建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

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

{
    "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"
    }
}

總結(jié)

Rollup打包工具的基本使用就差不多了，通過嘗試可以發(fā)現(xiàn)，Rollup的配置等是非常簡單的，改變了開發(fā)者的工作形式，以及提升了工作（編碼）效率

這里我就不貼倉庫了，無腦copy倒不如自己按照文檔寫一遍，又能加深記憶也可快速掌握原理。3分鐘讓你使用大佬們慣用的姿勢。

“自然者，物見其然，不知所以然；同焉皆得，不知所以得”。 作為前端工程師，我們不僅是要會用，還要明白構(gòu)建的整個過程，這有助于我們在編碼、架構(gòu)設(shè)計上能夠更加合理，或者說更“自然”。

以上就是3分鐘精通高階前端隨手寫TS插件的詳細內(nèi)容，更多關(guān)于前端手寫TS插件的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • uniapp五分鐘實現(xiàn)刷抖音小程序教程示例

    uniapp五分鐘實現(xiàn)刷抖音小程序教程示例

    這篇文章主要為大家介紹了uniapp五分鐘實現(xiàn)刷抖音小程序教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-03-03
  • app場景下uniapp的掃碼記錄

    app場景下uniapp的掃碼記錄

    這篇文章主要為大家介紹了app場景下uniapp的掃碼記錄實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-07-07
  • 微信小程序 action-sheet詳解及實例代碼

    微信小程序 action-sheet詳解及實例代碼

    這篇文章主要介紹了微信小程序 action-sheet詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下
    2016-11-11
  • TS 類型收窄教程示例詳解

    TS 類型收窄教程示例詳解

    這篇文章主要為大家介紹了TS 類型收窄教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • 微信小程序 UI布局常用技巧整理總結(jié)

    微信小程序 UI布局常用技巧整理總結(jié)

    這篇文章主要介紹了微信小程序 UI布局常用技巧整理總結(jié)的相關(guān)資料,現(xiàn)在不論是APP 還是各種軟件，UI布局還是非常重要的，用戶體驗第一位啊，這里就整理下微信小程序的UI布局，需要的朋友可以參考下
    2016-12-12
  • 微信小程序 天氣預報開發(fā)實例代碼源碼

    微信小程序 天氣預報開發(fā)實例代碼源碼

    這篇文章主要介紹了微信小程序 天氣預報開發(fā)實例代碼源碼的相關(guān)資料,這里含有源碼，需要的朋友可以參考下
    2017-01-01
  • 微信小程序之滾動視圖容器的實現(xiàn)方法

    微信小程序之滾動視圖容器的實現(xiàn)方法

    這篇文章主要介紹了微信小程序之滾動視圖容器的實現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家掌握這部分內(nèi)容，需要的朋友可以參考下
    2017-09-09
  • 微信小程序 vidao實現(xiàn)視頻播放和彈幕的功能

    微信小程序 vidao實現(xiàn)視頻播放和彈幕的功能

    這篇文章主要介紹了微信小程序 vidao實現(xiàn)視頻播放和彈幕的功能的相關(guān)資料,這里提供實現(xiàn)代碼及實現(xiàn)效果圖，需要的朋友可以參考下
    2016-11-11
  • 本地搭建微信小程序服務器的實現(xiàn)方法

    本地搭建微信小程序服務器的實現(xiàn)方法

    這篇文章主要介紹了本地搭建微信小程序服務器的實現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家輕松的搭建自己的微信小程序的服務器，需要的朋友可以參考下
    2017-10-10
  • 微信小程序 checkbox組件詳解及簡單實例

    微信小程序 checkbox組件詳解及簡單實例

    這篇文章主要介紹了微信小程序 checkbox組件詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下
    2017-01-01

最新評論