Compare commits

..

No commits in common. 'es5-gulp' and 'master' have entirely different histories.

  1. 3
      .gitignore
  2. 71
      README.md
  3. 29
      gulpfile.js
  4. 20
      package.json
  5. BIN
      screenshots/1.png
  6. BIN
      screenshots/2.png
  7. 44
      src/demo.js
  8. 18
      src/index.js

3
.gitignore vendored

@ -105,4 +105,5 @@ dist
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
.vscode-test

71
README.md

@ -1,73 +1,2 @@
# 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文件

29
gulpfile.js

@ -1,29 +0,0 @@
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);

20
package.json

@ -1,20 +0,0 @@
{
"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"
}
}

BIN
screenshots/1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
screenshots/2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

44
src/demo.js

@ -1,44 +0,0 @@
// 建议每个文件都包裹一层立即执行函数,避免插件的全局变量污染
!(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);
}());

18
src/index.js

@ -1,18 +0,0 @@
// 建议每个文件都包裹一层立即执行函数,避免插件的全局变量污染
!(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,
},
],
});
});
}());
Loading…
Cancel
Save