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 |
||||
|
||||
## 使用说明 |
||||
在插件开发过程中,比较常见的场景是通过`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