介绍下自己设计的js插件开发框架

[lsa2127291]

前言

最近在写mvvm框架和模块加载器时，发现开发比较大型的插件时如果直接在js文件写代码会遇到数不清的坑，大量的代码让排错变得非常困难，不规范的格式让可读性进一步下降，最为关键的是模块混合在一个文件里，让单元测试无法进行，只有在所有模块都编写完毕才能进行调试。正因为这些问题，让我决定设计一个模块化式的插件开发框架，并集成代码格式规范及单元测试框架。

框架结构

框架整合了gulp、webpack、rollup、eslint、karma、mocha等流行的代码构建打包和测试工具。分为构建部分、测试部分和集成部分。

构建部分

构建部分采用了es6的模块化语法，可以将一个大型插件拆分为多个js模块文件，并用import和export进行导入和导出。之所以在amd、commonJs和es6模块3种模块化规范中选择es6在于它是由ecma拟定的官方模块化标准而且rollup可以把es6规范的模块完美集成到一个js文件中，而对于commonjs规范的模块则会混入一些多余的转换代码，导致最后的集成好的插件难以阅读。至于amd模块则一般不会在预编译的场景下使用。

测试部分

测试基于之前介绍的karma+mocha+chai+phatomJs这一套测试框架，而由于js以模块化的形式进行开发的，所以又在karma中集成了webpack将被测代码和测试代码一起打包成单个可执行js文件进行测试，并引入sourceMap技术让调试时可以查询当前代码所对应到打包前的代码。另外在进行功能测试之前会先进行js代码规范检查，这部分采用的是eslint检查工具，它最大的优势在可以自由定义语法规则，所以你可以基于一些成熟的规范并进行根据自己的编码习惯进行细节上的修改。

集成部分

集成使用了rollup对代码进行打包，它比webpack的强大之处在于不会额外加入模块转换代码，构建出来的js文件具有良好的可读性并可以直接将打包好的代码转换为umd格式，这样一步就完成了整个代码的集成流程。然后使用gulp构建工具，将其作为gulp中的一个任务，并在打包完成后再执行压缩任务，如此便完成了一个插件的生成。最后我们在package.json中的scripts写入gulp命令，便能只用执行npm run bulid一条命完成插件构建。

结语

这个插件开发框架对我来说基本解决了开发大型插件的难题，我还把它做成了一个cli工具，只需一条命令即可生成一个插件开发框架模板。至于cli工具如何制作，我会放到之后的博文来讲述。现在，这个框架还有一些不完善的地方，比如不支持包含css的ui框架，这些我以后会想办法解决，不过现在还算可以一用。自己觉得真挺喜欢编写这样实用或有趣的小插件的，在思考和查资料不断完善插件的同时，技术也就不知不觉的提高了。
最后分享下这个插件开发框架以帮助你们解决开发插件的遇到的困难。