Vue3 企業級優雅實戰 - 組件庫框架 - 2 初始化 workspace-root

来源:https://www.cnblogs.com/youyacoder/archive/2022/11/10/16877100.html
-Advertisement-
Play Games

上文已經搭建了 pnpm + monorepo 的基礎環境,本文對 workspace-root 進行初始化配置,包括:通用配置文件、公共依賴、ESLint。 1 通用配置文件 在項目 根目錄 下添加下麵的配置文件。 添加 .editorconfig 編輯器格式配置文件 [*.{js,cjs,ts, ...


上文已經搭建了 pnpm + monorepo 的基礎環境,本文對 workspace-root 進行初始化配置,包括:通用配置文件、公共依賴、ESLint。

1 通用配置文件

在項目 根目錄 下添加下麵的配置文件。

  1. 添加 .editorconfig 編輯器格式配置文件
[*.{js,cjs,ts,jsx,tsx,vue,html,css,scss,md}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
  1. 添加 .gitignore git 忽略文件
logs
*.log*
node_modules
dist
lib
dist-ssr
*.local

.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

說明

在有些文章中還會創建一個 .npmrc 文件,配置 shamefully-hoisttrue,該操作的目的是進行依賴提升,但 pnpm 不建議這麼做,所以咱不配置它:

image-20221104160527964

2 安裝公共依賴

在根目錄下按照的依賴,在子模塊裡面都可以使用,所以為了避免在不同的模塊中安裝相同的依賴,相同的依賴咱們都提取到根項目中。

pnpm install vue -w
pnpm install @types/node sass typescript vite vue-tsc @vitejs/plugin-vue @vitejs/plugin-vue-jsx -D -w

由於咱們項目配置了 monorepo,在根目錄(workspace-root)下安裝依賴需要指定 -w,否則安裝失敗。

3 ESLint 配置

咱們所有模塊都需要 ESLint 校驗,所以可以在根目錄下配置 ESLint

ESLint 配置過程與之前寫的「創建 vite + vue3 工程」步驟基本一致,在 monorepo 中稍有差異,這裡再重覆一遍。

  1. 安裝依賴開發依賴:
pnpm install eslint -D -w
  1. 初始化 ESLint 配置
npx eslint --init

執行上述命令後,控制臺中會有如下步驟:

1)需要安裝 @eslint/create-config,問是否繼續: 當然需要繼續,直接回車;
2)使用 ESLint 來幹嘛:我選最後一個 To check syntax, find problems, and enforce code style(檢查語法、尋找問題、強制代碼風格)
3)使用哪種模塊化的方式:肯定選 JavaScript modules (import/export) (幾乎我參與的 vue 項目都是 ESModule)
4)項目使用什麼框架:Vue.js
5)項目是否使用 TypeScript:Yes
6)項目運行在什麼環境:Browser
7)如何定義項目的代碼風格:Use a popular style guide 使用流行的風格
8)在流行的風格中選擇其中一種:Standard
9)ESLint 配置文件的格式:JavaScript
10)根據上面選擇的,提示需要安裝一大堆依賴,是否安裝?Yes
11)選擇使用什麼包管理工具安裝:pnpm

選擇 pnpm 回車後,項目根目錄下會生成 .eslintrc.cjs 文件,但控制台會報 ERR_PNPM_ADDING_TO_ROOT 的錯誤,如下圖:

image-20221104163126384

這是因為自動安裝依賴沒有攜帶 -w,所以需要將紅框中的依賴複製出來,重新安裝:

pnpm install [email protected] @typescript-eslint/[email protected] [email protected] [email protected]^2.25.2 [email protected]^15.0.0 [email protected]^6.0.0 @typescript-eslint/[email protected] -D -w
  1. 安裝 vite-plugin-eslint 插件:
pnpm install vite-plugin-eslint -D -w

由於不同的 package,vite 的配置不同,所以該插件在後面開發各個模塊時才去配置。

  1. 修改 ESLint 配置文件 .eslintrc.cjs
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    'vue/multi-word-component-names': 'off'
  }
}
  1. 添加 ESLint 忽略文件,忽略打包生成的目錄 distlib。在項目根目錄下創建 .eslintignore,內容如下:
lib/
dist/
  1. 在 IDE 中配置 ESLint。我使用 WebStorm,配置如下圖:
image-20221104171250802

本文完成 workspace-root 的初始化配置,下一步將進行組件庫的開發環境搭建。

感謝你閱讀本文,如果本文給了你一點點幫助或者啟發,還請三連支持一下,點贊、關註、收藏,程式員優雅哥會持續與大家分享更多乾貨


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 背景 監控、優化、診斷 cpu, io消耗監控https://github.com/powa-team/pg_stat_kcache where條件過濾性統計https://github.com/powa-team/pg_qualstats cgroup , /proc 系統級指標統計https:/ ...
  • dispatch_sync執行了兩件事:把代碼塊放入指定線程的任務隊列中、堵塞當前線程直到代碼塊執行結束,如果出現了堵塞的線程和代碼塊所在的線程為同一線程的話,這個時候代碼無法在此線程執行繼續下去,即造成了死鎖。 - (void)viewDidLoad { [super viewDidLoad]; ...
  • 隨著元宇宙的興起,3D虛擬現實廣泛引用,讓數字化信息和現實世界融合,目前大家的目光主要聚焦於視覺交互層面,為了在虛擬環境中更好的再現真實世界的三維空間體驗,引入聽覺層面必不可少,空間音頻孕育而生。 空間音頻是一種音頻體驗,會讓用戶更容易體驗到聲音的立體感和深度,將環繞聲更準確地定位在合適的方位,讓用 ...
  • 好家伙, 本篇內容為《JS高級程式設計》第三章學習筆記 1.數據類型 ECMAScript有6種簡單數據類型(稱為原始類型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符號)是ECMAScript6新增的。還有一種複雜數據類型 ...
  • Ant Design Pro V5 訪問signalR : connection.start 沒反應, network顯示待處理, 原來是代理沒設置好,需要配置成支持websocket,配置如下圖所示。 ...
  • vue vue簡介 Vue (發音為 /vjuː/,類似 view) 是一款用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript 構建,並提供了一套聲明式的、組件化的編程模型,幫助你高效地開發用戶界面。無論是簡單還是複雜的界面,Vue 都可以勝任。 ...
  • 一.TS介紹 1.1 簡介 ts是2012年由微軟開發,在js的基礎上添加了類型支持 1.2 優劣勢 優勢 :任何位置都有代碼提示,增加效率;類型系統重構更容易;使用最新的ECMAscript語法 劣勢:和有些庫的結合併不是很完美;學習需要成本需要理解介面、泛型、類型等知識 1.3 與js區別 首先 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 0 目標 使用 uniapp + TypeScript 為基礎棧進行小程式開發 uniapp 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發佈到iOS、Android、H5、以及各種小程式(微信/支付寶/百度/ ...
一周排行
    -Advertisement-
    Play Games
  • 1.部署歷史 猿友們好,作為初來實習的我,已經遭受社會的“毒打”,所以請容許我在下麵環節適當吐槽,3Q! 傳統部署 ​ 回顧以往在伺服器部署webapi項目(非獨立發佈),dotnet環境、守護進程兩個逃都逃不掉,正常情況下還得來個nginx代理。不僅僅這仨,可能牽扯到yum或npm。node等都要 ...
  • 隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,前一篇文章,已經簡單介紹瞭如何搭建開發框架,和登錄功能實現,本篇... ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...