代码之家 › 专栏 › 技术社区 › Luke Vo

在浏览器上使用SystemJS和transpile ts文件来开发Aurelia?

transpiler aurelia server browser file

Luke Vo · 技术社区 · 6 年前

我们的产品在本地自制服务器上运行(例如, http://localhost:1234/ ). 同一个服务器为UI文件提供服务( http://localhost:1234/index.html )无法添加CORS头。

/request/data ).

.ts au build )每次我都有零钱,很不方便。

1 回复 | 直到 6 年前

huocp 6 年前

如果我没听错,你想运行你的前端开发“链接”到另一个后端服务器。

这是一个cli+requirejs(或cli+systemjs)设置。

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

这是速成班。

我使用 http-proxy-middleware aurelia_project/tasks/run.js 连接后端。读我的代码,有默认的后端url,你可以在命令行中覆盖它。

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

有两个部分你需要改变。

代理URL的列表(之后 const backendProxy = proxy([ 这些是您要将请求传递到后端服务器的url。
historyApiFallback的旁路列表。你需要阅读基本上,连接历史api回退会尝试捕获一些请求并返回相同的索引.html要支持SPA开发,您需要绕过

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;