如何将我的 ExtWebComponent 添加到 JSP？

Question

我想将我的 Web 组件添加到我的 JSP。如何连接我的 ExtWebComponents 来执行此操作？

我的服务器端在 Servlet 容器中运行。

Answer 1

我有一个项目示例展示了如何做到这一点。客户端是 ExtWebComponents，服务器端是 Java。

项目笔记

Maven 多模块项目
Java 后端的 servlet 容器
客户端是一个 ExtWebComponents 项目，使用 pom.xml 只是为了将其作为模块轻松导入 IDE。并启动 npm 构建。

Example Project

JSP 例子

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">

    <title>Sandbox Project</title>
    <link rel="icon" type="image/x-icon" href="resources/favicon.ico">

    <script src="webcomponents-bundle.js"></script>
    <link href="ext/ext.css" rel="stylesheet">
</head>

<body>

Testing
<my-sandbox-view></my-sandbox-view>

<%
    out.write("<h2>Test jsp<h2>");
%>

<!-- The webpacked resource bundle is imported here -->
<script type="text/javascript" src="ext/ext.js"></script><script type="text/javascript" src="app.js"></script></body>
</html>

Example Source

从客户端到服务器的资源

您必须告诉 webpack 将资源复制到您的 Web 应用程序目录，以便它们可以在您的 Java 项目中使用。例如，这是如何使用自定义插件完成的，然后使用 webpack --watch。

// This causes infinite loop, so I can't use this plugin.
//  new CopyWebpackPlugin([{
//    from: __dirname + '/build/',
//    to: __dirname + '/../sandbox-server/target/test1'
//  }]),

// Inline custom plugin - will copy to the target web app folder
// 1. Run npm install fs-extra
// 2. Fix the path, so that it copies to the server's build webapp folder
{
  apply: (compiler) => {
    compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
      // Debugging
      console.log("########-------------->>>>> Finished Ext JS Compile <<<<<------------#######");

      let source = __dirname + '/build/';
      // TODO Set the path to your webapp build
      let destination = __dirname + '/../sandbox-server/target/sandbox';

      let options = {
        overwrite: true
      };
      fs.copy(source, destination, options, err => {
        if (err) return console.error(err)
        console.log('Copy build success!');
      })
    });
  }
}

Example Source

如何将我的 ExtWebComponent 添加到 JSP？

How can I add my ExtWebComponent to a JSP?

extwebcomponents