add node/4

README.md

@@ -62,6 +62,7 @@
 1. [\[2018-09-28\] 从 1 到完美，用 node 写一个命令行工具](./node/1.md)
 2. [\[2018-11-06\] 构建工具是如何用 node 操作 html/js/css/md 文件的](./node/2.md)
 3. [\[2018-12-10\] 如何让 node 运行 es6 模块文件，及其原理](./node/3.md)
+4. [\[2019-03-29\] 如何查看一个 js, ts 文件模块的依赖树](./node/4.md)
 
 ## 杂项
 

node/4.md

@@ -0,0 +1,133 @@
+# 如何查看一个 js, ts 文件模块的依赖树
+
+最近接手一个别人的页面，代码很是凌乱与庞杂，当我在增加功能时，发现我添加的模块与原有的模块有冲突，但不知道那个原有的模块在什么位置，就得到处找。
+
+但发现这种方式太笨拙了，网上也没有找到相应的工具，索性我就自己写了一个工具。
+
+项目地址：[sdep](https://github.com/senntyou/sdep)。
+
+## 安装
+
+```
+npm install sdep -g
+```
+
+## 使用
+
+```
+sdep [options] <file>
+```
+
+## 常用命令行参数
+
+- `-q, --query <query>`: 查找某个模块的依赖链（如：`-q react`）
+- `-r, --regular`: 把 `query` 当作正则来匹配（如：`-q 'react|react-dom' -r`）
+- `-i, --ignore`: 不显示 `node_modules` 里的文件
+
+## 使用的第三方库
+
+- [commander.js](https://github.com/tj/commander.js)
+- [node-dependency-tree](https://github.com/dependents/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](https://github.com/senntyou/blogs)
+
+作者：[深予之 (@senntyou)](https://github.com/senntyou)
+
+版权声明：自由转载-非商用-非衍生-保持署名（[创意共享3.0许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）