如何在构建期间将 Aurelia 捆绑包部署到另一个目录？

Question

我正在开发 Aurelia Sample app，并希望将构建输出（vendor-bundle.js 和 app-bundle.js）部署到 www-root\scripts而不是默认的scripts 目录。所以我尝试修改 aurelia.json 看起来像：

...
"testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  },
  "build": {
    "targets": [
      {
        "id": "web",
        "displayName": "Web",
        "output": "www-root\\scripts"
      }
    ],
    "loader": {
...

这确实会导致捆绑文件输出到www-root\scripts，但是因为我已经为我的应用程序定义了一个 HTTP.SYS 别名，例如登陆 URL 是：http://localhost/MyAlias/ 当我尝试浏览应用程序时，它会尝试从以下位置加载 app-bundle.js：http://localhost/MyAlias/www-root/scripts/app-bundle.js 而不是 http://localhost/MyAlias/scripts/app-bundle.js。

vendor-bundle.js 正确下载自：http://localhost/MyAlias/scripts/vendor-bundle.js

我不知道要修改什么以使其从正确的路径获取 app-bundle.js。

非常感谢任何帮助。

Answer 1

您可以创建自定义 gulp 任务，在构建过程结束时将捆绑的应用程序复制到 www-root 文件夹中。 选择这种方式，就不需要在aurelia.json中改build.targets了。

1. 使用 aurelia-cli 生成器 [documentation] 生成新任务。

如下所示：

aurelia_project/tasks/dist.js|ts

import * as gulp from 'gulp';
import * as project from '../aurelia.json';

export default function dist() {
    return gulp.src(project.dist.sources, { "base" : "." })
        .pipe(gulp.dest(project.dist.output));
}

2.我认为最好有一个单独的配置部分用于发布，这样您也可以添加其他文件和文件夹。

aurelia_project/aurelia.json

...

"dist": {
    "output": "www-root",
    "sources": [
        "./scripts/**/*",
        "./index.html",
        "<other_resource_to_copy>",
        ...
    ]
},

....

3.在构建过程结束时插入这个新任务。

aurelia_project/tasks/build.js|ts

export default gulp.series(
    readProjectConfiguration,
    ...
    writeBundles,   
    dist // here goes our custom task
);

4.哦，它也适用于au run --watch！ :)

如果您想尝试一下，我有一个工作示例here。

Answer 2

如果有人来这里寻找清理 aurelia-cli 项目根目录的方法，这里有一个方法可以使用 RequireJS 或 SystemJS 加载器直接构建到您选择的位置：

1. 为输出建立一个目录，我们称之为OUTPUT
2. 将 index.html 和 favicon.ico 移动到 OUTPUT

3. 打开aurelia_project/aurelia.json 并编辑以下内容：

   "build": {
       "targets": [
           {
               "index": "OUTPUT/index.html",
               "baseDir": "OUTPUT",
               "baseUrl": "scripts",
               "output": "OUTPUT/scripts"
           }
       ],
       ...
   }
   ...
   "platform": {
       "index": "OUTPUT/index.html",
       "baseDir": "OUTPUT",
       "baseUrl": "scripts",
       "output": "OUTPUT/scripts"
   },
   

4. 使用au run 进行测试，您应该一切顺利！