Question

我的项目结构如下：

SRC
..lib
.... someLibrary.js

bundles.js：

gulp.task('build-libs', function() {
  return gulp.src(paths.root + '**/*.js')
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(changed(paths.output, {extension: '.js'}))
    .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '/src' }).on('error', gutil.log))
    .pipe(gulp.dest(paths.output));
});

项目构建正常，但是当我检查app-build.js时，我找不到lib / someLibrary.js的定义。我正在为我自己的项目使用typescript，所以我认为这与此有关，如何将常规js文件和我的已转换TS文件的输出混合到同一个app-build包中？

更新所以我试图将'build-system'gulp任务分成两个任务：'build-typescript'和之前的'build-system'相同，然后我创建了'build-libs'，看起来像这样：

<require from="lib/someLibrary.min.js">

然后我添加到我的dist / app-build包配置中：“lib / someLibrary.min.js”

现在我的app-build.js确实定义了库，但是当我尝试在我的一个视图中使用库时使用：

Failed to load resource: the server responded with a status of 404 (Static File '/dist/lib/someLibrary.min.html' not found)

我收到错误：

left

什么？！??为什么在没有html参与整个场景时它会寻找HTML？为什么这件事应该很容易？

UPDATE2

显然'require'不适用于javascript文件。我改为使用'script'标签，但是当Aurelia渲染时，它们似乎被剥离了。我不知道如何让Aurelia做我想做的事。

Answer 1

好吧，除了对上面提到的构建任务的更改（包括没有npm / jspm包进入app-bundle的javascript库文件）之外，还有很多挫折和不相信这么简单的事情会有多么困难。我创建了这个solution的修改版本，如下所示：

import { bindable, bindingMode, customElement, noView } from 'aurelia-framework';

@noView()
@customElement('scriptinjector')
export class ScriptInjector {
  @bindable public url;
  @bindable public isLocal;
  @bindable public isAsync;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) protected scripttag;

  public attached() {
    if (this.url) {
      this.scripttag = document.createElement('script');
      if (this.isAsync) {
        this.scripttag.async = true;
      }
      if (this.isLocal) {
        const code = 'System.import(\'' + this.url + '\').then(null, console.error.bind(console));';
        this.scripttag.text = code;
      } else {
        this.scripttag.setAttribute('src', this.url);
      }
      document.body.appendChild(this.scripttag);
    }
  }

  public detached() {
    if (this.scripttag) {
      this.scripttag.remove();
    }
  }
}

要使用它，只需将以下标记添加到您希望使用脚本库的视图中，如下所示：

<scriptinjector url="lib/bootstrap-toc.js" is-local.bind='true'></scriptinjector>

这将保留原始的scriptinjector功能，允许您将远程第三方库添加到您的Aurelia应用程序，但它还允许您加载与您的应用程序捆绑在一起的任何本地第三方库。

希望这有助于某人。

Aurelia库js文件在Bundle中，但被解析为静态文件

1 个答案: