Question

默认的angular-cli构建生成具有非常扁平结构的dist文件夹 - assets文件夹和js，html文件。有没有办法创造fe。脚本文件夹并在构建过程中将所有js文件放入其中？

Answer 1

CLI尚未完全支持这一点，但它确实提供了一些有用的工具来帮助您完成大部分工作。我需要这个来部署我的Angular应用程序和WAR，同时尽量减少通过servlet-mappings添加的复杂程度。这个问题没有具体提到J2EE，但我认为这个解决方案的原则可以在各种环境中共享。

相关的ng build参数：

--deploy-url：将应用于资源的路径映射。 这可能与Angular-CLI目前接近您正在寻找的内容一样接近。
--output-path：指定Angular构建的输出目录（特别是，我使用它来为不同的环境指定唯一的输出目录，因为应用程序正在部署到具有不同配置的多个目标）。
--base-href：应用程序的根URI。例如/angular-app/ http://localhost:4200/angular-app/。这将设置<base href="<uri>">头标记，并且是非哈希路由所必需的。对其他事情也许是必要的。

最有趣的一个可能是--deploy-url。例如，如果您将部署URL设置为/dist/，则构建的应用程序中对JS文件的引用将以/dist/为前缀。

这种方法的两大抓点：

--deploy-url不会更改JS文件的输出路径。它只更改对JS文件的引用。文件本身仍将放在根构建目录中。您必须在构建过程中添加一个步骤来手动修复此问题。
--deploy-url似乎不适用于任何其他资产。我将所有其他资源放在assets/目录中，而构建的输出仍然通过assets/<path>（而非dist/assets/<path>根据需要引用资产）。您可以通过提供虚拟目录或URL重写来解决此问题。

作为参考，这是我生成的WAR目录结构：

app/
    dist/    <-- Deployed Angular application
        assets/
            (images, CSS, etc)
        *.js
        (other assets pulled into the root path, e.g. *.(svg|eot|woff|woff2|ttf) from Font Awesome)
        index.html
    WEB-INF/
    ...
    index.jsp

以下是我制作此结构的步骤：

ng build -pr false --prod --output-path build/node-prod --base-href /angular-app/ --deploy-url /angular-app/dist/。
通过gradle任务将build/node-prod的内容复制到WAR构建目录的app/dist。
通过内容index.jsp将index.html指向<%@include file="dist/index.html"%>。
为路径/dist/*和/assets/*添加默认servlet（静态资产）的servlet映射。
通过http://tuckey.org/urlrewrite/将^/assets/(.*)$的网址映射添加到/dist/assets/$1（或通过httpd，nginx等）。这是必要的，因为上面给出了--deploy-url不能用于其他资产的捕获。
（可选）将^/dist/index.html$的301或302重定向添加到根上下文路径，以防止用户通过dist URI访问该应用。

在生成的webapp中，http://localhost/angular-app/是我的应用程序的唯一有效端点。此端点指向index.jsp，其中包含index.html的内容，该内容通过<script src="/angular-app/dist/<some-file>.js"></script>标记加载相关的JS。

当需要某些其他资产时，例如徽标图像，页面向assets/<file-name>发出请求，该请求通过Tuckey重新编写到服务器端dist/assets/<file-name>，透明地解析为所请求的资产。

这个解决方案的优点在于我们能够在根上下文中部署Angular应用程序，而无需将{em>所有 ng build内置到根WAR路径中。这特别好，因为我们不想在可以避免的情况下添加全局servlet映射（例如，*.js）。

Angular-cli构建文件夹结构

1 个答案: