问题
公司使用泛微的Ecology 9作为OA系统，OA提供了代码块功能，能让我们在页面中嵌入自定义的HTML、CSS和JavaScript代码，实现自定义功能。
目前看到同事的开发模式：在后台管理中打开代码块编辑界面，编写代码（主要是JS代码和CSS代码），保存，然后刷新页面查看效果。如果需要修改，就再打开编辑界面，编写，保存，刷新。如此往复。
这种模式显然非常繁琐，除了要编写代码，还要在后台管理中做很多步骤。通常代码要改很多次才能写好，因此这种模式的效率非常低。
我决定做一个开发框架，命名为oa-codeblock项目，简化整个开发流程，提高效率。
思路
- 代码块中不直接写JS和CSS代码，而是只引用JS脚本文件
<script src="...">，CSS代码包含在脚本文件中，也就是说，最终一个脚本文件就对应一块功能，其中同时封装了行为和样式。 - 开发时，引用的脚本文件在本地，可直接修改其中的代码，然后刷新页面查看效果即可，不必重复保存代码块，也就是说，开发流程被简化为“编写→刷新”2步即可。
- 部署时，将脚本文件上传到服务器，然后将引用的脚本文件地址改为服务器即可。
实现
基于Node.js来实现开发框架，使用NPM管理依赖。
项目目录结构：
package.json：NPM配置文件。index.js：框架核心代码，执行构建。template.js：用于构建脚本文件的模板。src/：源文件目录，存放业务代码。流程布局/：存放用于流程布局代码块的业务代码。功能名称/：存放指定功能的业务代码。script.js：业务代码的JS部分。style.css：业务代码的CSS部分。
建模布局/：存放用于建模布局代码块的业务代码。- ...
建模查询/：存放用于建模查询代码块的业务代码。- ...
dist/：构建输出目录，Git忽略。
脚本文件模板template.js：用于构建脚本文件成品的模板，其中写好了在documentready时才执行JS代码，以及将CSS代码应用到<head>中，并留有占位符，以便将具体的JS和CSS代码替换进来。
框架核心代码index.js：
- 构建过程：遍历
src/目录，如果发现某个目录中有script.js，则说明该目录要构建成一个脚本文件，并输出到dist/目录，src/A/B/C/script.js将输出到dist/A/B/C.js。构建时，从script.js读取JS代码，从style.css读取CSS代码，替换template.js中的占位符，然后输出。 - 持续构建：支持命令行参数指定一次性构建或持续构建。持续构建时，监听扫描到的
script.js和style.css的变化，并在有变化时重新构建对应的脚本文件。这样，“编写”和“刷新”之间就无需手动的“构建”步骤。
实践表明，本开发框架显著提高了开发效率。