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

更新 發佈閱讀 5 分鐘
Introducing the new npm Dependency Selector Syntax | GitHub Changelog
raw-image

`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
留言分享你的想法!
avatar-img
Chaol Liu的沙龍
0會員
5內容數
Chaol Liu的沙龍的其他內容
2022/08/15
TransformStream is now supported cross-browser (web.dev) 現在串流轉換在 Chrome, Safari 和 Firefox 都已支援, 他們終於準備好迎接黃金時代!
Thumbnail
2022/08/15
TransformStream is now supported cross-browser (web.dev) 現在串流轉換在 Chrome, Safari 和 Firefox 都已支援, 他們終於準備好迎接黃金時代!
Thumbnail
2022/08/15
Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
2022/08/15
Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
2022/08/12
當你買一輛車或腳踏車, 你第一件事會先調整座位的位置和手把的高度到適合你的身體大小. 這就跟 git 配置是一樣的. 在這篇文章, 我會分享一些 git 的設定, 而且是我一直都在使用的.
Thumbnail
2022/08/12
當你買一輛車或腳踏車, 你第一件事會先調整座位的位置和手把的高度到適合你的身體大小. 這就跟 git 配置是一樣的. 在這篇文章, 我會分享一些 git 的設定, 而且是我一直都在使用的.
Thumbnail
看更多
你可能也想看
Thumbnail
蝦皮分潤計畫讓我在分享旅遊文章時,也能透過推薦好物累積被動收入,貼補旅行基金。這篇文章,除了介紹計畫的操作亮點與心得,也分享我最常應用的案例:「旅行必備小物 TOP5」,包含行李鎖、免洗內衣褲、分裝瓶、折疊衣架與真空壓縮袋,幫助出國打包更輕鬆。想同時記錄旅行、分享好物又創造額外收入的你,千萬別錯過!
Thumbnail
蝦皮分潤計畫讓我在分享旅遊文章時,也能透過推薦好物累積被動收入,貼補旅行基金。這篇文章,除了介紹計畫的操作亮點與心得,也分享我最常應用的案例:「旅行必備小物 TOP5」,包含行李鎖、免洗內衣褲、分裝瓶、折疊衣架與真空壓縮袋,幫助出國打包更輕鬆。想同時記錄旅行、分享好物又創造額外收入的你,千萬別錯過!
Thumbnail
想增加被動收入?加入蝦皮分潤計畫是輕鬆上手的好方法!本文提供完整教學,包含申請流程、賺取分潤技巧,以及實際使用心得分享,助你輕鬆獲得額外收入。
Thumbnail
想增加被動收入?加入蝦皮分潤計畫是輕鬆上手的好方法!本文提供完整教學,包含申請流程、賺取分潤技巧,以及實際使用心得分享,助你輕鬆獲得額外收入。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
npm 做為 node 套件版本管理工具,今天來學習如何使用 npm 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 npm version --new-version major 範例 v1.0.0 -> v2.0.0 mi
Thumbnail
npm 做為 node 套件版本管理工具,今天來學習如何使用 npm 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 npm version --new-version major 範例 v1.0.0 -> v2.0.0 mi
Thumbnail
npm 是一個套件管理工具,開發中經常需要使用第三方套件,npm 是可以用來管理很多套件的工具,這邊指的套件可能是 Library, 框架, 工具等,例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
Thumbnail
npm 是一個套件管理工具,開發中經常需要使用第三方套件,npm 是可以用來管理很多套件的工具,這邊指的套件可能是 Library, 框架, 工具等,例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
在我們使用的網站中,一個頁面會是由好幾個部份,例如按鈕、菜單、表格、卡片,這些部份可以在不同的畫面重複使用的就稱為元件(Component),今天要跟大家分享的「6個前端工程師私藏的元件庫」!
Thumbnail
在我們使用的網站中,一個頁面會是由好幾個部份,例如按鈕、菜單、表格、卡片,這些部份可以在不同的畫面重複使用的就稱為元件(Component),今天要跟大家分享的「6個前端工程師私藏的元件庫」!
Thumbnail
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON
Thumbnail
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON
Thumbnail
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
Thumbnail
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News