设置使用 SystemJS 开发 Aurelia 并在浏览器上转译 ts 文件？

Question

首先，我的情况很不寻常，所以让我解释一下：

我们的产品运行在本地自制服务器上（例如，http://localhost:1234/）。同一台服务器提供 UI 文件 ( http://localhost:1234/index.html) 并且不能添加 CORS 标头。

现在我的 Aurelia 应用程序将需要访问来自同一个来源的数据，但在开发过程中，Aurelia CLI 无法做到这一点，因为 Aurelia 的服务器将在另一个端口上运行，而且，我们的请求旨在没有主机名 ( /request/data) .

这是我想要的解决方案：.ts在开发过程中使用 SystemJS在浏览器端转译文件。就目前而言，au build每次我有一个小的更改时，我都必须构建 ( ) ，这非常不方便。

请告诉我如何配置/设置以在浏览器端转换从 Aurelia CLI 创建的项目。

Answer 1

如果我理解正确，您希望将前端开发“链接”到另一个后端服务器。

您不必直接使用 SystemJS，我有一个设置可以针对指定的后端服务器（本地或远程）运行我的开发前端开发。

这是一个 cli+requirejs（或 cli+systemjs）设置。

我一直想写一个关于如何做到这一点的教程，但没有找到足够的空闲时间。

这里是速成班。

我用http-proxy-middleware的aurelia_project/tasks/run.js挂钩后端。阅读我的代码，有默认的后端 url，您可以在命令行中覆盖它。请注意，它支持 http/https，您可以针对您的生产应用程序进行开发工作，这在 bug 搜寻中非常有用。

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

有两部分你需要改变。

1. 代理网址列表（之后const backendProxy = proxy([），这些是您希望将请求传递给后端服务器的网址。

2. historyApiFallback 的绕过列表。您需要阅读 connect-history-api-fallback 的文档以了解它是如何工作的。基本上，connect-history-api-fallback 尝试捕获一些请求并返回相同的 index.html 以支持 SPA 开发。您需要绕过一些请求到链上的下一个中间件。

我的完整 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;