手敲webpack的简易实现后，谈谈思路和解决问题的方法

  好久没写作了，代码敲多了，偶尔也要敲点文字，锻炼一下语言表达能力和文字组织能力。

  昨天手敲了一个简易版的webpack，代码逻辑不说了，网上一搜一大把，几乎都长一个样，毕竟都是从webpack源码出发去分析，然后剖解抽离出最核心的东西，因此实现起来都长差不多。

  这里展开另一个话题：解决问题的思路。

  我们想要模仿webpack实现它的自动化构建功能，

  第一步要搞清楚的是：你的目标是什么。

  这是不是很像成功学里老生常谈的话题？没错，目标很重要，没有目标的人生就像浮萍一样随波逐流，漫无目的。你不清楚你想得到什么，你不清楚你想成为什么样的人，你不清楚为此你需要付出什么。很容易就陷入了一种麻木的生活状态：间歇性踌躇满志，持续性混吃等死。

  那在动手之前，我们首先要界定的是，本次敲代码要实现的目标是什么。这很重要，目标过于艰难，触不可及的，再怎么努力也够不着，只会挫败积极性。目标太简单的，你就还逗留在你的舒适圈里，重复着过去的经验和知识，没有成长。因此我们定目标的原则是，比刚好够得着多一点，稍微超出自身力所能及之外。

  看书也一样，如果你看的书感觉很容易，满眼都是之前看过的知识和道理，这只能起到温故知新的作用，没有新的养分让你成长。而看太深奥的书，看起来很吃力想半天没参透的，证明你还没到这个段位去吸收这本书里的信息，可以先放下等以后再看。一本合适的书应该是读起来轻松又稍微有点难理解，需要动一下脑子才能继续往下看。这才是适合你这个阶段的书。

  言归正传，那我们这次仿webpack打包功能，要实现的目标是：

// sum.js
export default (a, b) => a + b

//index.js
import sum from "./sum.js";
console.log(sum(111,555))

  实现export 和 import 模块导出和引入功能。

  当然，现在只需要给script添加 type = module 的属性，也能实现同样的功能了，这是后话了（在读这篇文章时请先忽略这个)，ES5年代是不认这个标签的。

  既然目标明确了，那我们进入下一步：找方法（解决方案）。

  我们在找达到目标的方案时，可以引入一种经典的解决问题问题思路：拆解问题，把从0开始到目标这一过程，拆解成若干个小目标。

  这时候我们可以开始分析了：我们要做的是模块导入和导出功能，如果我们只是用js，是实现不了的。原生的js没办法识别 export 和 import 标签，等于说我在index.js里想使用sum.js里的代码，别说使用，连面都没见到。这时候我们自然想到了js的血亲：Nodejs，因为它有读写能力啊。

  通过分析第一步确定的技术栈是：nodejs里的fs模块的使用。

  接下来，如果我们读到了sum.js里的代码，那在nodejs里读到的只是字符串，怎么在index.js里去执行它呢，这时候我们又可以引入第二个技术栈： eval() 函数的使用。

  我们在读sum.js时，还需要实现一个功能就是把ES6的语法转为ES5的语法才能给到eval去执行，这时候我们又可以确定第三个技术栈：babel模块的使用。

  那剩下最关键的问题来了，怎么去收集依赖。这一点我刚开始没有想通的，我最先想到的是通过字符串匹配的方式，去收集依赖的文件路径，但这样显得有点笨拙和不严谨。这时候如果我们没有足够的见识支撑，也很难想到：可以通过babel/parser模块，去把字符串内容转为抽象语法树（ast），再通过babel/traverse模块，去收集抽象语法树里的依赖节点。

  那我们知道了这一步需要了解的技术栈是：babel/parser模块，抽象语法树。

  了解和搞懂以上几个技术栈后，再结合一些js基础语法和nodejs基础，就能把整个思路跑通了，写代码也是分分钟的事了。

总结：

  我们这里不讨论代码的具体实现。我想从这个webpack简易实现里抽离出来的是，当我们在项目里遇到一个问题，或者你想用代码去实现某个功能时，怎么去开始，怎么去组织思路。
  我们要去明确问题，尽量用文字描述清晰你的问题再开始，然后拆解问题，通过你现有的知识储备和经验去一步步实现小目标，最后达成大目标。
  如果在某个点上卡主了，发现这个点不在你的知识储备和认知范围内能解决的，那么恭喜你，你又找到一个知识盲点了。你问度娘也好，谷哥也好，总有其他人遇到过跟你相似的问题。学到新知识以后就能应付更多的问题了。