# 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文件