特性

使用Labrador框架可以使微信开发者工具支持加载海量NPM包

支持ES6/7标准代码，使用async/await能够有效避免回调地狱

组件重用，对微信小程序框架进行了二次封装，实现了组件重用和嵌套

自动化测试，非常容易编写单元测试脚本，不经任何额外配置即可自动化测试

使用Editor Config及ESLint标准化代码风格，方便团队协作

安装

首先您的系统中安装Node.js和npm v3下载Node.js，然后运行下面的命令将全局安装Labrador命令行工具。

npminstall-glabrador-cli初始化项目

mkdirdemo#新建目录cddemo#跳转目录npminit#初始化npm包labradorinit#初始化labrador项目项目目录结构

demo#项目根目录├──.labrador#Labrador项目配置文件├──.babelrc#babel配置文件├──.editorconfig#EditorConfig├──.eslintignore#ESLint忽略配置├──.eslintrc#ESLint语法检查配置├──package.json├──dist/#目标目录├──node_modules/└──src/#源码目录├──app.js├──app.json├──app.less├──components/#通用组件目录├──pages/#页面目录└──utils/

注意dist目录中的所有文件是由labrador命令编译生成，请勿直接修改

配置开发工具

项目初始化后使用WebStorm或Sublime等你习惯的IDE打开项目根目录。然后打开微信web开发者工具新建项目，本地开发目录选择dist目标目录。

开发流程

在WebStorm或Sublime等IDE中编辑src目录下的源码，然后在项目根目录中运行labrador build命令构建项目，然后在微信web开发者工具的调试界面中点击左侧菜单的重启按钮即可查看效果。

我们在开发中，微信web开发者工具仅仅用来做调试和预览，不要在微信web开发者工具的编辑界面修改代码。

微信web开发者工具会偶尔出错，表现为点击重启按钮没有反应，调试控制台输出大量的无法require文件的错误，编辑界面中代码文件不显示。这是因为labrador build命令会更新整个dist目录，而微信web开发者工具在监测代码改变时会出现异常，遇到这种情况只需要关掉微信web开发者工具再启动即可。

我们还可以使用labrador watch命令来监控src目录下的代码，当发生改变后自动构建，不用每一次编辑代码后手动运行labrador build。

所以最佳的姿势是：

在项目中运行labrador watch

在WebStorm中编码，保存

切换到微信web开发者工具中调试、预览

再回到WebStorm中编码

...

未完，待续...