摘要:如何查看一個文件模塊的依賴樹最近接手一個別人的頁面,代碼很是凌亂與龐雜,當我在增加功能時,發現我添加的模塊與原有的模塊有沖突,但不知道那個原有的模塊在什么位置,就得到處找。
如何查看一個 js, ts 文件模塊的依賴樹
最近接手一個別人的頁面,代碼很是凌亂與龐雜,當我在增加功能時,發現我添加的模塊與原有的模塊有沖突,但不知道那個原有的模塊在什么位置,就得到處找。
但發現這種方式太笨拙了,網上也沒有找到相應的工具,索性我就自己寫了一個工具。
項目地址:sdep。
安裝npm install sdep -g使用
sdep [options]常用命令行參數
-q, --query
-r, --regular: 把 query 當作正則來匹配(如:-q "react|react-dom" -r)
-i, --ignore: 不顯示 node_modules 里的文件
使用的第三方庫commander.js
node-dependency-tree
例子 查看一個文件的依賴結構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查看一個文件包含 less 或 scss 的依賴鏈
sdep example/index.js -q "less|scss" -r
example/index.js └ example/css/scss.scss example/index.js └ example/css/less.less后續
更多博客,查看 https://github.com/senntyou/blogs
作者:深予之 (@senntyou)
版權聲明:自由轉載-非商用-非衍生-保持署名(創意共享3.0許可證)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103114.html
摘要:在寫大型項目的時候一不小心就會踩到直接循環依賴的坑里面所謂直接循環依賴是指在模塊工廠函數中對其它依賴于自己的模塊的成員有直接調用的情況比如假設有兩個模塊和其中的內容如下的內容如下下面這一行導致了直接循環依賴這時執行會報的錯誤這是因為模塊的工 在寫大型項目的時候, 一不小心就會踩到直接循環依賴的坑里面, 所謂直接循環依賴, 是指在模塊工廠函數中, 對其它依賴于自己的模塊的成員有直接調用的...
摘要:框架加冕時代年橫空出世的前端框架的模塊機制的模塊機制相比老王老李的解決方案上增強了模塊的約束性,和幫助開發者劃分模塊外,最重要的是解決了模塊的運行時管理問題模塊的初始化順序問題和依賴的模塊自動初始化問題。 前端框架工程化之路 人類的發展動力源于一個懶字,就如現在的大前端正是史前那群懶而聰明的切圖仔進了軟件工程的施工現場,懷揣著更少代碼、更少溝通、更少錯誤、更少維護的夢想奔襲而來。從框架...
摘要:框架加冕時代年橫空出世的前端框架的模塊機制的模塊機制相比老王老李的解決方案上增強了模塊的約束性,和幫助開發者劃分模塊外,最重要的是解決了模塊的運行時管理問題模塊的初始化順序問題和依賴的模塊自動初始化問題。 前端框架工程化之路 人類的發展動力源于一個懶字,就如現在的大前端正是史前那群懶而聰明的切圖仔進了軟件工程的施工現場,懷揣著更少代碼、更少溝通、更少錯誤、更少維護的夢想奔襲而來。從框架...
閱讀 3021·2023-04-25 18:00
閱讀 2222·2021-11-23 10:07
閱讀 4060·2021-11-22 09:34
閱讀 1249·2021-10-08 10:05
閱讀 1572·2019-08-30 15:55
閱讀 3435·2019-08-30 11:21
閱讀 3339·2019-08-29 13:01
閱讀 1378·2019-08-26 18:26