Compare commits
No commits in common. 'es5-gulp' and 'master' have entirely different histories.
8 changed files with 2 additions and 183 deletions
@ -1,73 +1,2 @@ |
|||||||
# javascript-dev-demo |
# 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文件 |
|
@ -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); |
|
@ -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" |
|
||||||
} |
|
||||||
} |
|
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 8.7 KiB |
@ -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); |
|
||||||
}()); |
|
@ -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…
Reference in new issue