Question

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

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

现在，我的Aurelia应用程序将需要访问相同来源的数据，但是在开发过程中，Aurelia CLI无法实现，因为Aurelia的服务器将在另一个端口上运行，此外，我们的请求旨在主机名（/request/data）。

这是我想要的解决方案：在开发过程中，使用SystemJS在浏览器端转换.ts文件。现在，每次我进行小的更改时都必须构建（au build，这非常不方便。

请告诉我如何配置/设置以移植在浏览器端通过Aurelia CLI创建的项目。

Answer 1

如果我对您的理解正确，那么您想运行前端开发人员“链接”到另一台后端服务器。

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

这是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

您需要更改两个部分。

代理的网址列表（在const backendProxy = proxy([之后），这些是您想要将请求传递到后端服务器的URL。
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;

设置为使用SystemJS开发Aurelia并在浏览器上传输ts文件？

1 个答案: