开发组件前工具的准备

环境依赖

• 一、设置npm镜像为淘宝镜像

npm config set registry https://registry.npm.taobao.org

• 二、 安装Node.js到本地，然后执行以下命令

npm install yo grunt-cli generator-mendix -g

三、执行jshint进行grunt语法检查插件

npm install grunt-contrib-jshint --save-dev

四、在任意地方建一个目录，并进入此文件夹，执行

Yo mendix
//注意在安装的时候要记得选择Grunt方式不要选择Gulp；接下来的选择AppStoreWidgetBiolerplate,from Github的方式
//

执行完之后会在目录中创建一个Gruntfile.js文件；打开JS文件，将里面的mpks->files->dest->TEST_WIDGETS_FOLDER替换成自己的mendix 工程目录的widgets目录即可。 然后在当前组件目录(有Gruntfile.js的目录)执行

grunt watch

//该命令会自动的监听组件工程文件的修改，会自动打包到mendix工程目录下

Mendix组件开发打包工具gulp和grunt的比较：

gulp优点：

• 不需要设置项目目录，在test目录下即可测试。
• 若只更新了组件的js代码，可直接在浏览器强制刷新界面，不需要重启mendix工程。
• 编译速度更快。

grunt优缺点：

• 虽说可直接打包到项目工程目录widgets下，但是尽可能不要直接在业务工程下测试组件（因为项目大之后启动会慢）；
• 每次测试都需要重启Mendix工程。

一、下载并安装Node.js

下载地址：https://nodejs.org/en/

二、设置npm镜像

npm config set registry https://registry.npm.taobao.org

三、运行yo命令

运行 npm install -g yo generator-mendix命令 检查yo是否安装成功:yo --version

四、安装gulp

npm install -g gulp-cli

五、请在空目录下运行 yo mendix

并设置组件的名称，选择Gulp编译，并创建一个AppStoreWidgetBoilerplate。

六、如何使用Gulp测试组件

1、使用VsCode编辑器打开组件根目录
2、在VSCode中新建终端并运行 gulp命令，每次保存，gulp会自动将组件打包
    并在dist目录下生成.mpk文件；
    mpk文件是组件最终的文件，如果您已经开发完成组件，
    可以将.mpk文件复制到项目工程目录下的widgets目录下，
    并在mendix客户端中按F4刷新项目目录。
3、如果想测试组件的功能，可以将项目根目录下的mpr文件拷贝到组件test目录下，
    并且删除Test.mpr文件，如果项目中使用到了其他组件，请一并拷贝到test/widgets目录下。