【Blockly开发教程】02 配置你的blockly：初始化Blockly

在本节，你将了解如何初始化Blockly模块
另外，可以了解到分析开源代码的一种方法。

2.1 分析demo

我们先打开demo页面代码，看看是怎么初始化Blockly程序的。

2.1.1 文件路径

这里分享一下笔者是怎么找到demo入口的。写的会比较具体（啰嗦），如果是有丰富经验的朋友，可以快速浏览。

• 结论先行
  本文所述的demo页面html文件路径是：tests/playground.html。

• 开始吧
  当我们通过命令yarn start运行之后，会看到一个Blockly的demo页面。（如果还不知道怎么运行demo，可以看一看上一节的知识）

我们如何知道start命令运行了哪个html网页呢？我的方法是从命令倒推：

    "start": "npm run build && concurrently -n tsc,server \"tsc --watch --preserveWatchOutput --outDir \"build/src\" --declarationDir \"build/declarations\"\" \"http-server ./ -s -o /tests/playground.html -c-1\"",

这个命令有一个连接符“&&”，说明这个命令有两段，第一段是npm run build，顾名思义，应该是构建源码的意思，会产生构建、压缩后的js文件，在html中引用，后面再分析build脚本确认下。
start命令第二段有点长，别慌，拆分一下，大概框架如下：

concurrently -n tsc,server "...命令1" "...命令2"

这部分可以拆成3段。第一段是cli命令，第二段和第三段分别是双引号，双引号里面的又是一段命令，为什么呢？我们继续分析。

我们可以搜索一下concurrently命令，这个命令在package.json的devDependencies中有记录"concurrently": "^8.0.1"，那么它是一个nodejs类型的cli命令行工具，可以在https://www.npmjs.com/中搜索它的文档，当然也可以直接问问AI大模型（如ChatGPT、kimi等）。

如下图，大概意思是“同时运行多个命令”，也就是并行执行多个命令。

那concurrently命令后面的双引号是干什么的呢？得先看下看下-n是什么意思，根据帮助文档，大概意思就是取个自定义名字，逗号分开。

-n, --names                  List of custom names to be used in prefix
                               template.
                               Example names: "main,browser,server"    

回到上面的命令，tsc,server "...命令1" "...命令2"，那就是说tsc命令对应第一段双引号，server命令对应第二段双引号，然后这两个命令同时执行。这个命令大致就摸清楚什么意思了。

继续分析双引号里面的命令，tsc命令：

tsc --watch --preserveWatchOutput --outDir "build/src" --declarationDir "build/declarations"

tsc命令是Typescript的cli命令，用于将Typescript转译为JavaScript文件。参考上面我们分析concurrently命令的方式，可以找到devDependencies有一个typescript依靠，那么可以从npmjs网站搜索到相关文档。

附tsc说明文档：https://www.typescriptlang.org/docs/handbook/compiler-options.html#handbook-content。

这里看两个关键参数，一个是watch，另一个是dir，其中dir有两个。

设置watch参数，可以监听输入文件（ts源码）的改动，自动更新输出文件（js文件），这样就不需要程序员进行人工重新编译了。你只要在开发过程中，改过ts文件，网页就自动刷新到修改后的效果，我们可以叫热替换就是热更新。

另外，dir目录指定了tsc构建源码输出目录outDir和类型声明文件输出目录declarationDir。如下图所示。

现在我们知道tsc命令是为了构建源码了。
接下来的另外一段命令是server命令：

http-server ./ -s -o /tests/playground.html -c-1

http-server命令也是在package.json中声明的依赖，也可以在npmjs网站中搜索。这个命令非常简单易用的在本地配置了一个静态http服务，也就是说在本地部署了一个http网站，我们通过IP（127.0.0.1）、端口（8080）可以访问到这个网站。

这段命令中很明显有html文件，大概率是个demo入口文件。在-o参数后面，跟着一个html文件路径，通过查看文档，我们知道-o后跟着的是一个打开浏览器后的默认启动路径，如下图所示：

由于笔者的好奇心，笔者把端口后面的路径全部删除，发现在网站根路径下，是我们执行http-server命令所在的目录，如下图所示：

http-server官方文档也说明了这一点：

因此在start命令中，作者指定了tests/playground.html这个路径作为demo展示页面，也是为了让我们能够快速地、直接地看到Blockly的demo页面。破案了。