前端好文blogfoster-scripts： 一款简化 Node.js 项目初始化的工具

Posted 2021-04-25 FEPulse

背景

在开发的过程中，开发者们会不时的接触到一些新的工具。当他们觉得某个新的工具很有趣，并且想把这个新工具运用到自己的项目中去的时候，一般来说他们会做以下这几件事：

1. 移除旧的工具（与新工具具有同样功能）

2. 添加新的工具

3. 修改配置文件直到程序能够正常运行

当开发者觉得这个工具很好用，可以取代以前旧的工具的时候，他们就会想要把这个工具添加到所有的项目中去。

于是，问题来了。

如果有几十个甚至几百个项目，逐个项目进行安装新工具，配置新工具的过程将会消耗大量的时间！那么怎么样才能花费较少的时间而又能完成上述任务呢？

思路：降低配置的复杂度

如果新工具的配置只需要很少的配置，开发者就能够节约大量为配置工具所花费的时间。

典型的例子是 facebook 出品的 create-react-app 工具。这个工具提供了一个外部接口和不同的选项（build， start， test 等）给开发者，让开发者选择不同的webpack，ESLint 或者 Jest 的用法。这使得开发者不需要了解背后的所有工具是怎样配置好的就能够直接上手进行开发，从而极大的减少了配置新项目所需要花费的时间。

但是这种做法也存在自己的缺点，主要包括以下 3 点：

1. 开发者被剥夺了自定义工具的权利

2. 并不是所有的开发者都喜欢默认的配置

3. 每个项目都有自己独立的属性和需求，没有一个配置能适合所有项目的

在这个例子中，配置简化的代价是开发者主观能动性的减少。比如你不能够在  SASS 中定义自己的样式，配置中没有你特别喜欢的某些 babel 插件等。

那么，有没有一种方法，既能够使得开发者不需要为配置文件而烦恼，同时又能满足开发者自定义工具的需求呢？

不完美解决方法

Kent G. Dodds 设计了 paypal-scripts 来尝试解决上述问题。在用户没有自定义配置的情况下，paypal-scripts 会作为默认的配置文件进行工作，当开发者自定义了配置文件时，自定义的配置文件会优先于内部配置文件执行。从而解决了开发者不能自定义配置工具的问题。

这个解决方案最大的问题在于：当越来越多的项目都倾向于自己配置文件覆盖原始配置文件的时候，我们就又重新回到了第一个问题。同时，API 接口也会变得越来越复杂。

blogfoster-scripts 的解决方法

blogfoster-scripts 是 blogfoster 团队为了解决上述问题而开发的一个工具箱。

与 paypal-scripts 相比，它主要做了以下 2 点改进：

1. 包装了受开发者青睐的和开发者常用的一些工具。

2. 开发者只需要创建一个可执行文件包装其他工具（利用 Node API 或者在子进程中运行它们）

这样一来，当我们需要开始一个新项目的时候，只需要运行 npm install --save-dev blogfoster-tools 就可以了。

blogfoster-scripts 使得开发者可以一次性的解决多有项目中某一个问题，从而极大的提高了开发体验。

附 blogfoster-scripts 使用说明

安装：npm install --save-dev blogfoster-tools

package.json 中配置：

{

  "scripts": {

      "lint":  "blogfoster-scripts lint",

      "format":  "blogfoster-scripts format",

      "build":  "blogfoster-scripts build"

    }

}

内置子命令：

lint：根据ESlint检查语法错误

format：根据Prettier修改代码的格式

build：将JS代码准换成ES5代码，并根据Webpack和Babel定义的方法复制静态文件