Настройка для разработки Aurelia с использованием SystemJS и переноса файлов в браузере? - PullRequest
Новая
       21

Настройка для разработки Aurelia с использованием SystemJS и переноса файлов в браузере?

0 голосов
/ 05 июля 2018

Прежде всего, мой случай довольно необычный, поэтому позвольте мне объяснить:

Наш продукт работает на локальном самодельном сервере (например, http://localhost:1234/). Тот же сервер обслуживает файлы пользовательского интерфейса (http://localhost:1234/index.html) и НЕ МОЖЕТ добавлять заголовок CORS.

Теперь моему приложению Aurelia потребуется доступ к данным того же источника, но во время разработки это невозможно с Aurelia CLI, поскольку сервер Aurelia будет работать на другом порту, и, кроме того, наш запрос предназначен для имя хоста (/request/data).

Это моё желаемое решение: используйте SystemJS для переноса файлов .ts на стороне браузера во время разработки. На данный момент я должен строить (au build) каждый раз, когда у меня есть небольшие изменения, и это очень неудобно.

Скажите, пожалуйста, как настроить / настроить перенос проекта, созданного из Aurelia CLI, на стороне браузера.

1 Ответ

0 голосов
/ 05 июля 2018

Если я правильно вас понимаю, вы хотите запустить "front-end dev-end", связывающий его с другим внутренним сервером.

Вам не нужно напрямую играть с SystemJS, у меня есть настройка для запуска моего внешнего разработчика dev с указанным внутренним сервером (локальным или удаленным).

Это настройка cli + requirejs (или cli + systemjs).

Я всегда хотел написать учебник о том, как это сделать, но не нашел достаточно свободного времени.

Вот ускоренный курс.

Я использую http-proxy-middleware в aurelia_project/tasks/run.js для подключения бэкэнда. Прочитайте мой код, есть URL-адрес бэкенда по умолчанию, и вы можете перезаписать его в командной строке. Обратите внимание, что он поддерживает http / https, вы можете работать с разработчиком над своим производственным приложением, что очень полезно при поиске ошибок. 

au run --watch --backend http(s)://other.domain:optional_port

Есть две части, которые нужно изменить.

  1. список прокси-адресов (после const backendProxy = proxy([), это URL, которые вы хотите передать запрос на бэкэнд-сервер.

  2. список обходов для historyApiFallback. Вам нужно прочитать документ о connect-history-api-fallback, чтобы понять, как это работает. По сути, connect-history-api-fallback пытается перехватить некоторые запросы и вернуть тот же index.html для поддержки SPA dev. Вам нужно обойти какой-то запрос к следующему промежуточному программному обеспечению в цепочке.

Мой полный run.js. 

import gulp from 'gulp';
import browserSync from 'browser-sync';
import historyApiFallback from 'connect-history-api-fallback/lib';
import {CLIOptions} from 'aurelia-cli';
import project from '../aurelia.json';
import build from './build';
import watch from './watch';
import proxy from 'http-proxy-middleware';

const backend = CLIOptions.getFlagValue('backend') || 'https://localhost:8443';
const isHttps = !!backend.match(/^https/);

const backendProxy = proxy([
  '**/WSFed/**',
  '**/log*',
  '**/login/**',
  '**/logout/**',
  '**/logoff/**',
  '**/assets/**',
  '**/images/**',
  '**/*.json',
  '**/*download*/**',
  '**/*download*',
  '**/leavingAnalytics'
], {
  target: backend,
  // logLevel: 'debug',
  changeOrigin: true,
  secure: false, // bypass certificate check
  autoRewrite: true,
  // hostRewrite: true,
  protocolRewrite: isHttps ? 'https' : 'http'
  // onProxyRes: function (proxyRes, req, res) {
  //   console.log('proxyRes headers: '+ JSON.stringify(proxyRes.headers));
  // }
});

function passThrough(context) {
  return context.parsedUrl.pathname;
}

function bypass(regex) {
  return {
    from: regex,
    to: passThrough
  };
}

let serve = gulp.series(
  build,
  done => {
    browserSync({
      ghostMode: false,
      reloadDebounce: 2000,
      https: isHttps,
      online: false,
      open: CLIOptions.hasFlag('open'),
      port: 9000,
      // logLevel: 'debug',
      logLevel: 'silent',
      server: {
        baseDir: [project.platform.baseDir],
        middleware: [
          historyApiFallback({
            // verbose: true,
            rewrites: [
              {from: /azure\/authorize/, to: '/index.html'},
              bypass(/\/WFFed\//),
              bypass(/\/login/),
              bypass(/\/logout/),
              bypass(/\/logoff/),
              bypass(/\/assets/),
              bypass(/ajax/),
              bypass(/download/),
              bypass(/leavingAnalytics/)
            ]
          }),
          function(req, res, next) {
            res.setHeader('Access-Control-Allow-Origin', '*');
            next();
          },
          backendProxy
        ]
      }
    }, function(err, bs) {
      if (err) return done(err);
      let urls = bs.options.get('urls').toJS();
      log(`Application Available At: ${urls.local}`);
      log(`BrowserSync Available At: ${urls.ui}`);
      done();
    });
  }
);

function log(message) {
  console.log(message); //eslint-disable-line no-console
}

function reload() {
  log('Refreshing the browser');
  browserSync.reload();
}

let run;

if (CLIOptions.hasFlag('watch')) {
  run = gulp.series(
    serve,
    done => { watch(reload); done(); }
  );
} else {
  run = serve;
}

export default run;
...