update

.gitignore

@@ -106,4 +106,3 @@ dist
 
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
-

README.md

@@ -1,2 +1,73 @@
 # javascript-dev-demo
 
+## 使用说明
+在插件开发过程中,比较常见的场景是通过`WebResourceProvider`注入一段自定义的javascript文件,如果插件功能较多,在编写插件代码时候大多会拆分为多个js文件编写,在发布插件时合并为一个文件供`WebResourceProvider`引入
+
+此仓库提供了es6,es6,typescript三个分支
+
+## 项目结构
+常见的项目结构如下图所示,resources下放置js文件
+
+![1](./screenshots/1.png)
+
+建议打包合并的js文件输出到dist目录下,这样对应`WebResourceProvider`中代码为
+```
+public class WebResourceProvider extends AbstractWebResourceProvider {
+    @Override
+    public Atom attach() {
+        return MainComponent.KEY;
+    }
+
+    @Override
+    public Atom client() {
+        return new Component() {
+            @Override
+            public ScriptPath script(RequestClient requestClient) {
+                return ScriptPath.build("/com/fr/plugin/decision/demo/web/dist/dec.plugin.demo.js");
+            }
+        };
+    }
+}
+```
+
+如果使用了git,将`node_modules`加入到插件项目的`.gitignore`中,注意不是这个demo的
+
+## es5-gulp
+
+#### 复制模板
+
+1. 可以直接复制package.json,gulpfile.js到web路径下
+2. 也可以直接clone项目到web路径下
+
+#### 安装nodejs,选装yarn
+
+这一步省略,可以自行查阅相关资料
+
+#### 安装依赖
+
+在web路径下启动命令行,执行
+
+`npm install` 或者 `yarn install`
+
+#### 打包合并文件
+
+示例中编写了两个js文件,将这两个文件合并为`dec.plugin.demo.js`输出到dist目录下
+
+命令行执行
+
+`npm run build` 或 `yarn build`
+
+这是dist目录下将出现`dec.plugin.demo.js`文件,如果需要再次打包,重新执行上述命令即可
+
+![2](./screenshots/2.png)
+
+#### 自动watch文件变动
+
+如果需要在源代码变动之后自动合并输出文件,可以采用dev开发模式
+
+命令行执行
+
+`npm run dev` 或 `yarn dev`
+
+即启动了一个node进程,每当源代码中任意js文件变更,`dec.plugin.demo.js`都会被自动更新
+因为启动了一个web-server,也可以直接访问localhost:9009/dist/dec.plugin.demo.js加载js文件

gulpfile.js

@@ -0,0 +1,29 @@
+const { src, dest, series } = require("gulp");
+const concat = require("gulp-concat");
+const watch = require("gulp-watch");
+const browserSync = require("browser-sync").create();
+
+function buildTask() {
+  return src(["src/**/*.js"])
+    .pipe(concat("dec.plugin.demo.js"))
+    .pipe(dest("./dist"));
+}
+
+function watchTask(done) {
+  watch(["src/**/*.js"], buildTask);
+  done();
+}
+
+function staticServerTask(done) {
+  browserSync.init({
+    port: "9009",
+    server: {
+      baseDir: "./",
+    },
+    open:false
+  });
+  done();
+}
+
+exports.buildTask = buildTask;
+exports.devTask = series(buildTask, watchTask, staticServerTask);

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "javascript-dev-demo",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://code.fanruan.com/dailer/javascript-dev-demo.git",
+  "author": "dailer <Dailer@fanruan.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "gulp buildTask",
+    "dev": "gulp devTask"
+  },
+  "dependencies": {
+    "browser-sync": "^2.27.7",
+    "gulp": "^4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-watch": "^5.0.1",
+    "serve-static": "^1.14.2"
+  }
+}

src/demo.js

@@ -0,0 +1,44 @@
+//  建议每个文件都包裹一层立即执行函数,避免插件的全局变量污染
+!(function () {
+    var Widget = BI.inherit(BI.BasicButton, {
+
+        props: {
+            baseCls: "decision-plugin-demo",
+        },
+
+        render: function () {
+            var self = this, o = this.options;
+
+            return {
+                type: "bi.vertical",
+                hgap: 10,
+                vgap: 10,
+                items: [
+                    {
+                        el: {
+                            type: "bi.vertical_adapt",
+                            rgap: 10,
+                            items: [
+                                {
+                                    type: "bi.label",
+                                    text: "测试开关"
+                                }, {
+                                    type: "bi.switch",
+                                    ref: function (_ref) {
+                                        self.switchButton = _ref;
+                                    },
+                                    selected: false,
+                                    handler: function () {
+                                        console.log(self.switchButton.isSelected() ? "开启" : "关闭")
+                                    }
+                                }
+                            ]
+                        },
+                    },
+                ],
+            };
+        },
+    });
+
+    BI.shortcut("dec.plugin.demo", Widget);
+}());

src/index.js

@@ -0,0 +1,18 @@
+//  建议每个文件都包裹一层立即执行函数,避免插件的全局变量污染
+!(function () {
+    //  示例在系统管理新增一个管理节点
+    BI.config("dec.provider.management", function (provider) {
+        provider.inject({
+            modules: [
+                {
+                    value: "demo",
+                    id: "decision-plugin-demo",
+                    text: BI.i18nText("demo示例"),
+                    cardType: "dec.plugin.demo",
+                    cls: "dir-font-10",
+                    gradeAuth: false,
+                },
+            ],
+        });
+    });
+}());