diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..f2c9da3 --- /dev/null +++ b/.babelrc @@ -0,0 +1,11 @@ +{ + "plugins": ["@babel/syntax-dynamic-import"], + "presets": [ + [ + "@babel/preset-env", + { + "modules": false + } + ] + ] +} diff --git a/README.md b/README.md index 59e7bf2..46ca7e4 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,68 @@ # 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文件 diff --git a/index.html b/index.html new file mode 100644 index 0000000..e3df316 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + Webpack App + + +

Hello world!

+

Tip: Check your console

+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..1f7274a --- /dev/null +++ b/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 ", + "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" + } +} diff --git a/src/demo.js b/src/demo.js new file mode 100644 index 0000000..5fccacb --- /dev/null +++ b/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); + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..39dc5f5 --- /dev/null +++ b/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, + }, + ], + }); +}); + diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..0f0cef3 --- /dev/null +++ b/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; +};