阅读源码是前端开发者提高技能的重要途径，但是很多小白不知道如何阅读源码，或者觉得源码太难太复杂，不敢尝试。本文旨在帮助小白入门阅读源码，以webpack源码为例，介绍了阅读源码的一些方法和技巧，希望能够激发你对源码的兴趣和信心。
读源码的三种方法
源码分为两类：
- 未被打包格式化的代码
- 已被打包格式化的代码
针对这两种类别的源码我们有三种方法进行阅读
- 把代码直接npm 下载下来，在编辑器中阅读，调试（针对未被格式化的代码）
- 把代码直接npm 下载下来，在谷歌调试工具中阅读调试（针对未被格式化的代码）
- 去源码的仓库把代码克隆下来，然后通过npm link 的方式链接到对应的项目中，然后使用之前两种方式进行调试（针对已经被打包的代码）
读未被格式化的源码
以读webpack源码为例子
新建一个文件夹,创建index.js文件夹 然后执行如下命令
npm init -y //创建package.json文件
yarn add webpack webpack-cli ///下载依赖
./node-modules/.bin/webpack-cli //运行入口文件（打包文件，运行完成即打包成功）
然后我们就得到了dist文件夹，里面有打包后的文件，证明项目配置完成
我们在这个项目中找到
node_modules/webpack-cli/bin/cli.js
这个文件夹，即它的源码文件，可以在这个文件中写debugger或者console.log()等语句进行调试
在谷歌浏览器中调试代码
如果想在谷歌浏览器中调试对应代码，运行以下命令即可
node --inspect-brk ./node-modules/.bin/webpack-cli //报错，因为不能运行命令行文件
node --inspect-brk ./node-modules/webpack-cli/bin/cli.js //成功，命令行命令也是执行的这个文件
--inspect-brk 是表示在谷歌浏览器中打开并默认不执行，然后在谷歌浏览器中打开调试窗口点击node图标即可进行调试
读已经被格式化的源码
很多源码我们打开对应文件时会发现已经被格式化了，这时我们就需要用到npm link了
npm link用于在全局文件夹和本地项目之间创建符号链接，以便可以在不重新构建的情况下迭代地开发和测试您自己的包。
命令行代码如下
git clone 源码地址 . ///加. 可以覆盖当前目录
//下面以webpack-cli为例子， 你可以把webpack-cli换成你想阅读的项目名称
cd packages/webpack-cli //跳转到对应目录
yarn link //在当前目录运行yarn link
/////////不同项目运行yarn link 的目录是不一样的
//然后到你自己的项目
yarn link webpack-cli //之后的这个依赖就是一个链接，就到之前那个目录上找
yarn unlink //如果要取消连接,运行这个代码
之后重复 读未被打格式化的源码 即可
