3分鐘精通高階前端隨手寫TS插件
正文
隨著業(yè)務(wù)復(fù)雜度和技術(shù)深度的增加，有時(shí)我們不得不提高抽離插件的效率。盡管有很多的技術(shù)方案，但總是夾雜了很多依賴和類庫，總感覺沒那么純凈。因此，在某個(gè)如廁的瞬間，萌發(fā)了一種可以酣暢淋漓寫插件的姿勢。
腳手架，就能應(yīng)當(dāng)根據(jù)個(gè)人愛好和編碼習(xí)慣來靈活配置。 下面我們就來一層一層的剖析。算了，一層一層太慢你們也沒耐心，直接剖。
什么是Rollup？
Rollup是一款集成式的代碼打包、應(yīng)用構(gòu)建工具。扒拉扒拉文檔
為何要做腳手架？
如上面啰嗦的，前端工程化是作為工程師的必要能力，工程化并非一個(gè)人就能搞定的，我們需要站在前人/巨人(Copy)的肩膀看世界。
隨著技術(shù)的發(fā)展，涌現(xiàn)了一些最佳實(shí)踐的構(gòu)建工具，這些構(gòu)建工具將一些項(xiàng)目管理和編程開發(fā)的行業(yè)最佳實(shí)踐集成到了一個(gè)“腳手架”工具中。如此，便有利于其他團(tuán)隊(duì)快速構(gòu)建出高效、高質(zhì)量的工程化項(xiàng)目。
它能干啥？
構(gòu)建工具能做的事：
- 處理兼容性
- 混淆、壓縮代碼
- Tree Shaking
- 轉(zhuǎn)譯
- 單元測試
- 打包應(yīng)用
起鍋-安裝
yarn add rollup -g
個(gè)人推薦使用pnpm
// 安裝pnpm npm install -g pnpm // 安裝rollup pnpm add rollup -g
大火-配置
使用rollup打包構(gòu)建有兩種方式，直接在命令行下需要手打構(gòu)建必須的參數(shù)，當(dāng)然我們是做工程，那么就得考慮如何盡可能減少團(tuán)隊(duì)成員的上手成本。
創(chuàng)建目錄
|-- src //開發(fā)文件夾 | |-- index.ts //入口文件 |-- rollup.config.js //rollup配置文件 |-- index.ts //對外暴露統(tǒng)一入口(非必須)
配置rollup
根目錄下創(chuàng)建一個(gè)純凈且功能強(qiáng)大的rollup.config.js配置文件，可以優(yōu)先了解下各類插件的機(jī)制，后面會提供一個(gè)package.json，直接安裝就齊活了。
import path from 'path';
import ts from 'rollup-plugin-typescript2';
// 將json 文件轉(zhuǎn)換為ES6 模塊
import json from '@rollup/plugin-json';
// 在node_模塊中查找并綁定第三方依賴項(xiàng)
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';
// 熱更新服務(wù)
import livereload from 'rollup-plugin-livereload';
// 開發(fā)服務(wù)器
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": "*", // 本地服務(wù)允許跨域 },
open: false,
port: 9529,
contentBase: './', // 本地服務(wù)的運(yùn)行文件根目錄
openPage: '/examples/index.html',
}),
],
},
{
// 生成 .d.ts 類型聲明文件
input: path.resolve('./index.ts'),
output: {
file: pkg.types,
format: 'es',
},
plugins: [
dts(),
clear({ targets: ["dist/src"], // 項(xiàng)目打包編譯生成的目錄
watch: true, // 實(shí)時(shí)監(jiān)聽文件變化 })
],
},
];
提供自查配置列表：https://www.rollupjs.com/guide/big-list-of-options
配置ESlint
廢話介紹ESLint 是在 ES/JS代碼中識別和報(bào)告模式匹配的工具，它的目標(biāo)是保證代碼的一致性和避免錯(cuò)誤
通過ESlint可以盡可能地規(guī)范團(tuán)隊(duì)開發(fā)的代碼風(fēng)格以及通過靜態(tài)檢查提升代碼質(zhì)量。扒拉扒拉文檔 安裝eslint
pnpm add eslint -D
初始化，參數(shù)可按照心情選擇
pnpm run eslint --init
初始化完成后，在根目錄創(chuàng)建了一個(gè)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, // 開啟嚴(yán)格模式
"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
這個(gè)就很簡單了，直接提供文檔自己扒拉扒拉，就兩句話一定要去看。
// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}
Demo
為了能夠快速測試插件的調(diào)用，又避免引入Vue、React等框架。使用最新瀏覽器支持的ESM方式加載打包后的插件，并啟動服務(wù)快速調(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, '這是一個(gè)基于rollup打包TypeScript的純凈框架')
const h1 = document.querySelector('#app')
const p = document.querySelector('#content')
h1.innerHTML = demo.name
p.innerHTML = demo.content
</script>
出鍋-跑一跑
// 運(yùn)行起來試一試 pnpm run dev
ok搞定，很復(fù)雜嗎？不復(fù)雜??！
最后Package.json
可以根據(jù)自己需求隨機(jī)刪減，學(xué)會靈活使用
{
"name": "rollup-ts-tpl",
"version": "1.1.1",
"description": "一個(gè)純凈版的ts插件打包c(diǎn)li",
"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è)過程，這有助于我們在編碼、架構(gòu)設(shè)計(jì)上能夠更加合理，或者說更“自然”。
以上就是3分鐘精通高階前端隨手寫TS插件的詳細(xì)內(nèi)容，更多關(guān)于前端手寫TS插件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了autojs繪畫實(shí)現(xiàn)六邊形示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
ECMAScript?6數(shù)組的擴(kuò)展實(shí)例詳解
這篇文章主要為大家介紹了ECMAScript?6數(shù)組的擴(kuò)展實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了js 標(biāo)簽語法使用，在 JavaScript 中提供了標(biāo)簽語句，用于標(biāo)記指定的代碼塊，便于跳轉(zhuǎn)到指定的位置。本文來記錄一下標(biāo)簽語句的使用方法,需要的朋友可以參考一下2021-10-10
這篇文章主要為大家介紹了JS?class語法糖的深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本篇文章主要介紹了詳解微信小程序入門五: wxml文件引用、模版、生命周期，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家介紹了TypeScript棧的壓入與彈出序列校驗(yàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了js前端圖片加載異常兜底方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了微信小程序 icon組件詳細(xì)及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了編程式安裝依賴install-pkg源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了微信小程序 UI與容器組件總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-02-02