介紹最新的 npm Dependency Selector Syntax(相依套件的選擇器語法)

閱讀時間約 4 分鐘
Introducing the new npm Dependency Selector Syntax | GitHub Changelog
Engineering-Security.png (1200×630) (github.blog)
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON Array 或 NodeList. 我們相信這個能力就是這個套件管理生態裡缺少的一角; 有了他的介紹, 我們希望可以將開發者的潛力解鎖, 捫心自問關於套件的 dependencies, 之間的關係和相關的 metadata.
大部分的 JavaScript 開發者, Dependency Selector Syntax 看起來熟悉, 因為他確實是採用 CSS 的形式. 我們取用了現存的, 已知的語言, 以及他的 operators 讓不同的套件資訊廣泛存取.

範例使用方式

如果我要列出所有的 dependencies(與 `npm list --all` 類似), 我可以執行:
npm query "*"

如果我要找出專案內每個 `react` 和 `lodash` 的版本, 我可以執行:
npm query "#react, #lodash"

如果我要找出所有 `react` 版本, 但並非定義在 peer dependency, 我可以執行:
npm query "#react:not(.peer)"

如果我要找出所有專案內的 dependencies, 且使用 `MIT` 授權, 我會將查詢改成:
npm query "[license=MIT]"

如果我要找出所有專案內 git dependencies, 我可以執行:
npm query ":type(git)"

如果我要找出有哪些 transitive dependencies 使用了 `postinstall` script, 我可以執行:
npm query ":attr(scripts, [postinstall]):not(:root > *)"

程式使用方式

我們知道大部分在這個生態系的開發者也會想要自己運用這個新語法, 所以我們把他建立在 CLI 的程式大腦中. 在底層, 我們將新的 `.querySelectorAll()` 方法加入到現存的 `Node` Class, 在 `@npmcli/arborist` 函式庫中使用. 工具開發者們現在也可以載入並查詢他們的 dependencies, 如同我們這樣.
// index.js
const Arborist = require('@npmcli/arborist') 
const arb = new Arborist({})
arb.loadActual((tree) => {
   // query all workspaces
  const results = await tree.querySelectorAll('.workspace')
  console.log(results)
})
你可以在我們的文件上學到更多關於語法與用途: https://docs.npmjs.org/cli/v8/using-npm/dependency-selectors

下一步是甚麼?

未來我們計畫根據 registry metadata 加入新的 pseudo states 和 selectors, 應該會將另一些關於 auditing 的能力解鎖(舉例包括 `:outdated`, `:deprecated`, `:vulnerable`, `:cve()` 和 `:cwe()` ). 如同在原本的 RFC proposal 中所註記的, 我們也會考慮支援 `query` flag 或是從 `stdin` 讀取現存的指令.
avatar-img
0會員
5內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究 使用方式:與其他工具類似,通過命令行使用,但具有自己的一些特定命令和功能。 適合情境:目前在市場上使用較少,主要在一些追求性能和速度優化的專案中或者對於新技
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
在 TypeScript 中,套件是模組化代碼的集合,可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架,如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
React Hooks 是 React 16.8 中引入的一組新的 API,允許你在函數組件中使用狀態和其他 React 特性,而不需要寫類組件。 狀態管理: useState 鉤子允許在函數組件中添加狀態。 副作用管理: useEffect 鉤子允許處理副作用,如數據獲取、訂閱和手動 DO
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
※ 查找 DOM 元素有兩種途徑: 直接選出一個節點 (select):要在樹狀結構裡查找資料,至少要先選出第一個元素。 從一個特定節點,查找到週邊的節點 :選出一個元素後,就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素,這種行為稱為「遍歷 (traverse)」。 ※ 選出特定 D
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究 使用方式:與其他工具類似,通過命令行使用,但具有自己的一些特定命令和功能。 適合情境:目前在市場上使用較少,主要在一些追求性能和速度優化的專案中或者對於新技
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
在 TypeScript 中,套件是模組化代碼的集合,可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架,如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
React Hooks 是 React 16.8 中引入的一組新的 API,允許你在函數組件中使用狀態和其他 React 特性,而不需要寫類組件。 狀態管理: useState 鉤子允許在函數組件中添加狀態。 副作用管理: useEffect 鉤子允許處理副作用,如數據獲取、訂閱和手動 DO
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
※ 查找 DOM 元素有兩種途徑: 直接選出一個節點 (select):要在樹狀結構裡查找資料,至少要先選出第一個元素。 從一個特定節點,查找到週邊的節點 :選出一個元素後,就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素,這種行為稱為「遍歷 (traverse)」。 ※ 選出特定 D
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。