通过generator-esri-appbuilder-js自定义Web Appbuilder微件（）

generator-esri-appbuilder-js

Yeoman generator 可以用来自定义ArcGIS Web AppBuilder.！

简介

当你自定义Web AppBuilder时，这个generator为你提供了样板文件，它可以用来建立你的项目并且搭建创建各种可配置的微件时的所需文件。

如何开始

安装

从npm安装Yeoman,运行：

$ npm install -g yo

从npm安装generator-esri-appbuilder-js ，运行

$ npm install -g generator-esri-appbuilder-js

运行Generators

Generators应该在项目的工作文件夹的根目录中运行。也就是说应该在Web AppBuilder的文件夹之外（例如，不是在stem应用程序中，也不是你已经创建的一个应用程序）。由生成器配置的繁重任务将把微件文件复制到Web AppBuilder的安装目录下的适当文件夹中。因此，generator会问你要使用什么app。如果你选择NONE 或者在Web AppBuilder安装目录中没有任何Web AppBuilder应用程序，该文件将被创建，但不会被配置不会将您的代码复制到适当的应用程序目录。如果你运行generator之后创建App,你既可以访问Gruntfile和进行手动编辑，你也可以重新运行generator并且它会覆盖你的gruntfile.

App (Default) Generator

应用程序生成器安装和grunt的任务和其他项目文件，并确保所需的子文件夹(如微件)存在

1、导航到项目的根文件夹中

2、如果您还没有创建一个package.json这个文件夹中，运行npm init(参见下面的注释)

3、运行generator，通过yo esri-appbuilder-js 

4、回答小人的问题

NOTE A package.json file is not required but it allows the generator to save your dependencies in case you or other developers need to (re)install them later without running the generator.

Widget Generator

创建一个新的自定义微件所需的文件

1、导航到项目的根文件夹

2、 运行generator，通过 yo esri-appbuilder-js 

3、回答小人问题

根据提示得到默认值将会生成一下结果，在widgets文件夹下

在你复制widget文件夹到 Webappbuilder的stemapp 之后，你就可以在appbuilder中看到你的微件了

关于复制微件文件夹

为了让您在Web AppBuilder中可以使用的小部件，您需要将它们的文件复制到Web AppBuilder的安装根下的适当文件夹中。

手动复制文件夹

例如，假设您已经在c:\arcgis-Web AppBuilder-1.3中安装了Web AppBuilder，那么您需要将小部件文件复制到下面的文件夹下:

c:\arcgis-web-appbuilder-1.3\client\stemapp\widgets

另外，您可能希望将小部件文件复制到您创建的任何应用程序中:

c:\arcgis-web-appbuilder-1.3\server\apps\[appId]\widgets

除非您正在使用grunt task，否则每次您对文件进行更改时，您都需要重新复制这些文件

运行Grunt Tasks

让微件文件与Web AppBuilder保持同步的最简单方法是运行Grunt Tasks。在运行生成器之后，您可以在项目根目录下运行默认的Grunt Tasks:

grunt

这将复制任何尚未被复制的文件，然后开始观察微件文件夹下的所有文件，以便更改并将文件重新复制到Web AppBuilder的文件夹。

Linting Your Code

app generator通常不会对任何inting文件进行搭建。建议使用某种形式的linting,即 jshint,semistandard, or eslint. ，下面是使用semistandard的例子

1、安装semistandard

npm install -g semistandard

2、下面是一个示例配置，您可以将其添加到您的package.json:

 "semistandard": {
    "globals": [
      "define"
    ],
    "ignore": [
      "Gruntfile.js",
      "**/dist/**/*.js"
    ]
  }

3、验证代码

semistandard