Browse Source

update

es-next-webpack
zsmj 2 years ago
parent
commit
1a1b8fd1e8
  1. 11
      .babelrc
  2. 66
      README.md
  3. 12
      index.html
  4. 29
      package.json
  5. 38
      src/demo.js
  6. 17
      src/index.js
  7. 61
      webpack.config.js

11
.babelrc

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

66
README.md

@ -1,2 +1,68 @@
# javascript-dev-demo # javascript-dev-demo
## 使用说明
在插件开发过程中,比较常见的场景是通过`WebResourceProvider`注入一段自定义的javascript文件,如果插件功能较多,在编写插件代码时候大多会拆分为多个js文件编写,在发布插件时合并为一个文件供`WebResourceProvider`引入
## 项目结构
常见的项目结构如下图所示,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的
## 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文件

12
index.html

@ -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>

29
package.json

@ -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"
}
}

38
src/demo.js

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

17
src/index.js

@ -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,
},
],
});
});

61
webpack.config.js

@ -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…
Cancel
Save