如何檢視乙個 js, ts 檔案模組的依賴樹

2021-09-14 04:08:32 字數 3743 閱讀 4196

最近接手乙個別人的頁面,**很是凌亂與龐雜,當我在增加功能時,發現我新增的模組與原有的模組有衝突,但不知道那個原有的模組在什麼位置,就得到處找。

但發現這種方式太笨拙了,網上也沒有找到相應的工具,索性我就自己寫了乙個工具。

npm install sdep -g
sdep [options]
檢視乙個檔案的依賴結構
sdep example/index.js
example/index.js

├ example/css/css.css

├ example/css/scss.scss

├ example/css/less.less

├ example/jsx.jsx

| ├ node_modules/react/index.js

| | ├ node_modules/react/cjs/react.production.min.js

| | | └ node_modules/object-assign/index.js

| | └ node_modules/react/cjs/react.development.js

| | ├ node_modules/object-assign/index.js

| | └ node_modules/prop-types/checkproptypes.js

| | └ node_modules/prop-types/lib/reactproptypessecret.js

| ├ node_modules/react-dom/index.js

| | ├ node_modules/react-dom/cjs/react-dom.production.min.js

| | | ├ node_modules/react/index.js

| | | | ├ node_modules/react/cjs/react.production.min.js

| | | | | └ node_modules/object-assign/index.js

| | | | └ node_modules/react/cjs/react.development.js

| | | | ├ node_modules/object-assign/index.js

| | | | └ node_modules/prop-types/checkproptypes.js

| | | | └ node_modules/prop-types/lib/reactproptypessecret.js

| | | ├ node_modules/object-assign/index.js

| | | └ node_modules/scheduler/index.js

| | | ├ node_modules/scheduler/cjs/scheduler.production.min.js

| | | └ node_modules/scheduler/cjs/scheduler.development.js

| | └ node_modules/react-dom/cjs/react-dom.development.js

| | ├ node_modules/react/index.js

| | | ├ node_modules/react/cjs/react.production.min.js

| | | | └ node_modules/object-assign/index.js

| | | └ node_modules/react/cjs/react.development.js

| | | ├ node_modules/object-assign/index.js

| | | └ node_modules/prop-types/checkproptypes.js

| | | └ node_modules/prop-types/lib/reactproptypessecret.js

| | ├ node_modules/object-assign/index.js

| | ├ node_modules/prop-types/checkproptypes.js

| | | └ node_modules/prop-types/lib/reactproptypessecret.js

| | ├ node_modules/scheduler/index.js

| | | ├ node_modules/scheduler/cjs/scheduler.production.min.js

| | | └ node_modules/scheduler/cjs/scheduler.development.js

| | └ node_modules/scheduler/tracing.js

| | ├ node_modules/scheduler/cjs/scheduler-tracing.production.min.js

| | └ node_modules/scheduler/cjs/scheduler-tracing.development.js

| └ example/wel.jsx

| └ node_modules/react/index.js

| ├ node_modules/react/cjs/react.production.min.js

| | └ node_modules/object-assign/index.js

| └ node_modules/react/cjs/react.development.js

| ├ node_modules/object-assign/index.js

| └ node_modules/prop-types/checkproptypes.js

| └ node_modules/prop-types/lib/reactproptypessecret.js

└ example/async/index.js

└ example/async/index.css

檢視乙個檔案包含react的依賴鏈
sdep example/index.js -q react
example/index.js

└ example/jsx.jsx

└ node_modules/react/index.js

example/index.js

└ example/jsx.jsx

└ node_modules/react-dom/index.js

example/index.js

└ example/jsx.jsx

└ example/wel.jsx

└ node_modules/react/index.js

檢視乙個檔案包含lessscss的依賴鏈
sdep example/index.js -q 'less|scss' -r
example/index.js

└ example/css/scss.scss

example/index.js

└ example/css/less.less

更多部落格,檢視

如何建立乙個 Lua 模組

翻譯自 how to create a lua module lua程式語言中的乙個模組 module 是乙個包含函式和變數的 片段 它是乙個使用者庫.它是把你的 切分為多個檔案的一種有力方法.乙個模組用lua關鍵字require來載入.模組被編碼到乙個以.lua作為副檔名的檔案中,並且這個檔案必須...

如何建立乙個模組 如何起步建立乙個童裝品牌?

自從有了童裝創業的想法,腦海中蹦出無數想法。從0到1建立乙個品牌,首先要問清楚自身,理想中這將是乙個怎樣的品牌?展示出來是怎樣的形象?希望消費者對品牌產生怎樣的感受?最終實現品牌的什麼目標?這些問題,並不是一開始就能確定答案,也不會是一成不變。我們應該從建立品牌,到運營 維護品牌,都對這些問題保持思...

乙個模組如何處理異常

乙個模組如何處理異常?最理想,最好的用模組是沒有異常,保證操作如預想的結果一致。當操作無法成功完時,必然會產生錯誤,或異常。乙個是返回錯誤碼,乙個是丟擲異常。錯誤一般是立即處理,不然就是忽略錯誤。一般不會儲存錯誤,然後統一處理。異常的優點是可以處理,也可以繼續丟擲,由更上層進行統一處理。可以丟擲異常...