zsmj
2 years ago
7 changed files with 234 additions and 0 deletions
@ -0,0 +1,11 @@ |
|||||||
|
{ |
||||||
|
"plugins": ["@babel/syntax-dynamic-import"], |
||||||
|
"presets": [ |
||||||
|
[ |
||||||
|
"@babel/preset-env", |
||||||
|
{ |
||||||
|
"modules": false |
||||||
|
} |
||||||
|
] |
||||||
|
] |
||||||
|
} |
||||||
@ -1,2 +1,68 @@ |
|||||||
# javascript-dev-demo |
# javascript-dev-demo |
||||||
|
|
||||||
|
## 使用说明 |
||||||
|
在插件开发过程中,比较常见的场景是通过`WebResourceProvider`注入一段自定义的javascript文件,如果插件功能较多,在编写插件代码时候大多会拆分为多个js文件编写,在发布插件时合并为一个文件供`WebResourceProvider`引入 |
||||||
|
|
||||||
|
## 项目结构 |
||||||
|
常见的项目结构如下图所示,resources下放置js文件 |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
建议打包合并的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的 |
||||||
|
|
||||||
|
## es-next-webpack |
||||||
|
|
||||||
|
#### 复制模板 |
||||||
|
|
||||||
|
1. 可以直接复制package.json,webpack.config.js,.babelrc到web路径下 |
||||||
|
2. 也可以直接clone项目到web路径下 |
||||||
|
|
||||||
|
#### 安装nodejs,选装yarn |
||||||
|
|
||||||
|
这一步省略,可以自行查阅相关资料 |
||||||
|
|
||||||
|
#### 安装依赖 |
||||||
|
|
||||||
|
在web路径下启动命令行,执行 |
||||||
|
|
||||||
|
`npm install` 或者 `yarn install` |
||||||
|
|
||||||
|
#### 打包合并文件 |
||||||
|
|
||||||
|
示例中编写了两个js文件,将这两个文件合并为`your-plugin-name.js`输出到dist目录下,文件名可以在webpack.config中配置 |
||||||
|
|
||||||
|
命令行执行 |
||||||
|
|
||||||
|
`npm run build` 或 `yarn build` |
||||||
|
|
||||||
|
这是dist目录下将出现`your-plugin-name.js`文件,如果需要再次打包,重新执行上述命令即可 |
||||||
|
|
||||||
|
#### 自动watch文件变动 |
||||||
|
|
||||||
|
如果需要在源代码变动之后自动合并输出文件,可以采用dev开发模式 |
||||||
|
|
||||||
|
命令行执行 |
||||||
|
|
||||||
|
`npm run dev` 或 `yarn dev` |
||||||
|
|
||||||
|
启动了一个web-server,可以直接访问localhost:9090/your-plugin-name.js 加载js文件 |
||||||
|
|||||||
@ -0,0 +1,12 @@ |
|||||||
|
<!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> |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
{ |
||||||
|
"name": "my-webpack-project", |
||||||
|
"version": "1.0.0", |
||||||
|
"main": "index.js", |
||||||
|
"repository": "gitea@git.fanruan.com:dailer/javascript-dev-demo.git", |
||||||
|
"author": "zsmj <zsmj1994@gmail.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" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
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); |
||||||
|
|
||||||
@ -0,0 +1,17 @@ |
|||||||
|
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, |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
@ -0,0 +1,61 @@ |
|||||||
|
// 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…
Reference in new issue