Aurelia JS - 使用带有 CLI (au run) 的 gist.run 项目？

Question

我想尝试调试一下：

• https://gist.run/?id=57ed46429e4583eb4c3fb11814451a55

...但是，我不确定如何使用 aurelia CLI 在本地运行 gist.run 类型的项目。

这就是我的工作：

$ mkdir /tmp/aurtmp
$ cd /tmp/aurtmp
$ au new aurtmp --here
...
What platform are you targeting?           1. Web (Default)
What transpiler would you like to use?     1. Babel (Default)
What css processor would you like to use?  1. None (Default)
Would you like to configure unit testing?  2. No
What is your default code editor?          5. None of the Above
Would you like to create this project?     1. Yes (Default)
Would you like to install the project dependencies?  1. Yes (Default)
...
Installing project dependencies.
...
Congratulations! Your Project "aurtmp" Has Been Created!
...
Happy Coding!

$ git clone https://gist.github.com/anonymous/57ed46429e4583eb4c3fb11814451a55 tmpsrc
$ rsync -aP tmpsrc/ src/
$ rm -rf tmpsrc

此时请注意，./index.html（自动生成）和./src/index.html（已下载）

好的，如果我直接从文件夹运行文件：

firefox ./src/index.html

...它实际上似乎在运行，但我进入错误日志：

syntax error                     app.js:1:1
...
syntax error       first-level-items.js:1:1
not well-formed   second-level-items.js:1:1

...这不是我直接在 gist.run 中遇到的错误（使用 Chromium 时）。

但是，如果我对 Chromium 进行同样的尝试，我会得到：

XMLHttpRequest cannot load file:///tmp/aurtmp/src/main.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Error: XHR error loading file:///tmp/aurtmp/src/main.js(…)

...我想这是不言自明的。

如果我尝试使用au run --watch 或au build 构建项目，我会得到：

Tracing first-level-items...
{ uid: 8,
  name: 'writeBundles',
  branch: false,
  error: 
   { [Error: ENOENT: no such file or directory, open '/tmp/aurtmp/src/aurelia-kendoui-bridge/slider/slider.js']
     errno: -2,
     code: 'ENOENT',
     syscall: 'open', ...

那么，有没有推荐和/或简单的方法来使用/调试来自 gist.run 本地的 Aurelia 项目，使用 au cli？

Answer 1

首先，通过运行au -v 确保您运行的是最新版本的 CLI (0.25.0)。如果您使用的不是最新版本的 CLI，那么（在您的情况下），您需要运行 npm install -g aurelia-cli 进行升级。然后使用au new在新文件夹中创建一个新项目。

接下来，您需要使用 Aurelia CLI 安装 aurelia-kendoui-bridge。

 au install aurelia-kendoui-bridge

它将为您运行 npm install aurelia-kendoui-bridge 并修改您的 aurelia.json 文件以包含 kendo ui 桥。

现在您已经创建了一个新项目，您只需将 gist 中的所有文件（index.html 除外）复制到 CLI 项目的 src 目录中。您可以覆盖main.js 和app.[html|js] 文件。不要用 gist 中的文件替换 index.html 文件。

接下来，运行 au run 或 au run --watch，您应该一切顺利！