JS-файл библиотеки Aurelia в Bundle, но разрешен как статический файл

Моя структура проекта выглядит следующим образом:

ЦСИ
..lib
.... someLibrary.js

bundles.js:

"bundles": {
    "dist/app-build": {
        "includes": [
            "[**/*.js]",
            "**/*.html!text",
            "**/*.css!text"
        ],
        "options": {
            "sourceMaps": 'inline'
            "inject": true,
            "minify": true,
            "depCache": true,
            "rev": true
        }
    },

Проект строится нормально, но когда я проверяю app-build.js, я не нахожу определения для lib / someLibrary.js. Я использую машинописный текст для своего собственного проекта, поэтому я предполагаю, что это как-то связано с этим, как я могу смешивать обычные js-файлы и выводить из моих переносимых TS-файлов в один и тот же пакет сборки приложения?

Обновление Итак, я попытался разделить задачу gulp 'build-system' на две задачи: 'build-typcript', который аналогичен тому, что был до 'build-system', затем я создал 'build-libs', который выглядит так:

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));
});

Затем я добавил в свою конфигурацию пакета dist / app-build: "lib/someLibrary.min.js"

И теперь мой app-build.js определил библиотеку, однако, когда я пытаюсь использовать библиотеку в одном из моих представлений, используя:

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

Я получаю ошибку:

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

Какие?!?? Почему он ищет html, когда html нигде не участвует во всем этом сценарии? Почему то, что должно быть легко, так сложно?

Update2

Таким образом, очевидно, что "require" не работает с файлами javascript. Я изменил использование тега 'script', однако кажется, что они удаляются при рендеринге Aurelia. Я не знаю, как заставить Аурелию делать то, что я хочу.

1 ответ

Итак, после большого разочарования и недоверия к тому, насколько сложным может быть что-то столь простое, в дополнение к упомянутым выше изменениям в задачах сборки (которые включают файл библиотеки javascript, в котором нет пакета npm/jspm в app-bundle), я создал модифицированная версия этого решения, которая выглядит следующим образом:

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>

Это сохранит оригинальную функциональность скрипт-инжектора, которая позволит вам добавлять удаленные сторонние библиотеки в ваше приложение Aurelia, но также позволит вам загружать любые локальные сторонние библиотеки, которые вы поставили в комплекте с вашим приложением.

Надеюсь, это кому-нибудь поможет.

Другие вопросы по тегам