Compare commits

..

4 Commits

Author SHA1 Message Date
dailer a6242ddc99 update 3 years ago
dailer b04a1583dc update 4 years ago
dailer 32a550fdba update 4 years ago
dailer 686971aea7 init 4 years ago
  1. 11
      .babelrc
  2. 3
      .gitignore
  3. 15
      README.md
  4. 29
      gulpfile.js
  5. 12
      index.html
  6. 35
      package.json
  7. BIN
      screenshots/1.png
  8. BIN
      screenshots/2.png
  9. 76
      src/demo.js
  10. 33
      src/index.js
  11. 61
      webpack.config.js

11
.babelrc

@ -1,11 +0,0 @@
{
"plugins": ["@babel/syntax-dynamic-import"],
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
]
}

3
.gitignore vendored

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

15
README.md

@ -3,6 +3,8 @@
## 使用说明
在插件开发过程中,比较常见的场景是通过`WebResourceProvider`注入一段自定义的javascript文件,如果插件功能较多,在编写插件代码时候大多会拆分为多个js文件编写,在发布插件时合并为一个文件供`WebResourceProvider`引入
此仓库提供了es6,es6,typescript三个分支
## 项目结构
常见的项目结构如下图所示,resources下放置js文件
@ -30,11 +32,11 @@ public class WebResourceProvider extends AbstractWebResourceProvider {
如果使用了git,将`node_modules`加入到插件项目的`.gitignore`中,注意不是这个demo的
## es-next-webpack
## es5-gulp
#### 复制模板
1. 可以直接复制package.json,webpack.config.js,.babelrc到web路径下
1. 可以直接复制package.json,gulpfile.js到web路径下
2. 也可以直接clone项目到web路径下
#### 安装nodejs,选装yarn
@ -49,13 +51,15 @@ public class WebResourceProvider extends AbstractWebResourceProvider {
#### 打包合并文件
示例中编写了两个js文件,将这两个文件合并为`your-plugin-name.js`输出到dist目录下,文件名可以在webpack.config中配置
示例中编写了两个js文件,将这两个文件合并为`dec.plugin.demo.js`输出到dist目录下
命令行执行
`npm run build``yarn build`
这是dist目录下将出现`your-plugin-name.js`文件,如果需要再次打包,重新执行上述命令即可
这是dist目录下将出现`dec.plugin.demo.js`文件,如果需要再次打包,重新执行上述命令即可
![2](./screenshots/2.png)
#### 自动watch文件变动
@ -65,4 +69,5 @@ public class WebResourceProvider extends AbstractWebResourceProvider {
`npm run dev``yarn dev`
启动了一个web-server,可以直接访问localhost:9090/your-plugin-name.js 加载js文件
即启动了一个node进程,每当源代码中任意js文件变更,`dec.plugin.demo.js`都会被自动更新
因为启动了一个web-server,也可以直接访问localhost:9009/dist/dec.plugin.demo.js加载js文件

29
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);

12
index.html

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
</head>
<body>
<h1>Hello world!</h1>
<h2>Tip: Check your console</h2>
</body>
</html>

35
package.json

@ -1,29 +1,20 @@
{
"name": "my-webpack-project",
"name": "javascript-dev-demo",
"version": "1.0.0",
"main": "index.js",
"repository": "gitea@git.fanruan.com:dailer/javascript-dev-demo.git",
"author": "zsmj <zsmj1994@gmail.com>",
"repository": "https://code.fanruan.com/dailer/javascript-dev-demo.git",
"author": "dailer <Dailer@fanruan.com>",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.19.6",
"@babel/preset-env": "^7.19.4",
"@webpack-cli/generators": "^2.5.0",
"babel-loader": "^9.0.1",
"css-loader": "^6.7.1",
"mini-css-extract-plugin": "^2.6.1",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"description": "My webpack project",
"scripts": {
"build": "webpack --mode=production --node-env=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --watch",
"serve": "webpack serve",
"dev": "webpack serve"
"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.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
screenshots/2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

76
src/demo.js

@ -1,38 +1,44 @@
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() ? "开启" : "关闭");
// 建议每个文件都包裹一层立即执行函数,避免插件的全局变量污染
!(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);
],
};
},
});
BI.shortcut("dec.plugin.demo", Widget);
}());

33
src/index.js

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

61
webpack.config.js

@ -1,61 +0,0 @@
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV == 'production';
const stylesHandler = MiniCssExtractPlugin.loader;
const config = {
entry: './src/index.js',
target: ["web", "es5"],
output: {
path: path.resolve(__dirname, 'dist'),
filename: "your-plugin-name.js"
},
devServer: {
open: true,
host: 'localhost',
port: "9090",
},
plugins: [
new MiniCssExtractPlugin(),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: 'babel-loader',
},
{
test: /\.css$/i,
use: [stylesHandler,'css-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: 'asset',
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = 'production';
} else {
config.mode = 'development';
}
return config;
};
Loading…
Cancel
Save