尝试加载瞬态 Web Worker 时出现“Reflect.defineMetadata”错误

我正在尝试从 Web Worker 内部加载 aurelia 框架，以便将 Worker 装饰为瞬态。这是工人装载机：

importScripts('/jspm_packages/system.js');
System.config({
  defaultJSExtensions: true,
  transpiler: 'none',
  paths: {
    'npm:*': '/jspm_packages/npm/*'
  },
  map: {
    'aurelia-framework': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-dependency-injection': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-binding': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-metadata': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-templating': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-loader': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-task-queue': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-pal': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-path': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-logging': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-polyfills': 'npm:[email protected] /cdn-cgi/l/email-protection',
    'aurelia-fetch-client': 'npm:[email protected] /cdn-cgi/l/email-protection/aurelia-fetch-client'
  }
});
System.import('files-service')
  .then(module => {
    let fs = new module.FilesService();
  });

这是我声明工人阶级的方式：

@transient()
export class FilesService {
  constructor() {
    httpClient = new HttpClient();
    // rest of stuff
  }
}

我得到这个错误：

Uncaught (in promise) Error: Reflect.defineMetadata is not a function
    at Object.define (http://localhost:9000/jspm_packages/npm/[email protected] /cdn-cgi/l/email-protection/aurelia-metadata.js:49:15)
    at eval (http://localhost:9000/jspm_packages/npm/[email protected] /cdn-cgi/l/email-protection/aurelia-dependency-injection.js:245:33)
    at execute (http://localhost:9000/dist/files-service.js:93:67)
    at u (http://localhost:9000/jspm_packages/system.js:5:97)
    at Object.execute (http://localhost:9000/jspm_packages/system.js:5:3188)
    at y (http://localhost:9000/jspm_packages/system.js:4:9948)
    at w (http://localhost:9000/jspm_packages/system.js:4:10327)
    at p (http://localhost:9000/jspm_packages/system.js:4:8205)
    at h (http://localhost:9000/jspm_packages/system.js:4:8590)
    at http://localhost:9000/jspm_packages/system.js:4:6896
    Error loading http://localhost:9000/dist/files-service.js

知道可能出了什么问题吗？顺便说一句，如果工作人员未声明为瞬态，则没有问题（在这种情况下不需要所有这些映射）。

Add the aurelia-pal-browser打包到您的 SystemJS 映射，然后将代码更新为如下所示：

// Import Aurelia's [p]latform [a]bstraction [l]ibrary for the browser.
// The PAL does some basic feature detection and serves as an abstraction for
// browser globals.
System.import('aurelia-pal-browser')
  .then(pal => pal.initialize())
  // now import a small set of polyfills for things like Reflect.defineMetadata
  .then(() => System.import('aurelia-polyfills'))
  // now you should be all set...
  .then(() => System.import('files-service')
  .then(({ FilesService }) => {  // <-- look how fancy I am! ES6 destructuring FTW - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
    let fs = new FilesService();
  });

看起来您想在工作人员中使用容器 - 这是一个示例：

let container = null;

System.import('aurelia-pal-browser')
  .then(({ initialize }) => initialize())
  .then(() => System.import('aurelia-polyfills'))
  // import DI and instantiate a container for the worker to use.
  .then(() => System.import('aurelia-dependency-injection'))
  .then(({ Container }) => container = new Container())
  // use the container...
  .then(() => System.import('files-service')
  .then(({ FilesService }) => {
    let fs = container.get(FilesService);
  });