"SyntaxError: Unexpected token export(…)"

Question

这让我抓狂。我正在使用 angular2-quickstart 作为入门项目。我刚刚在项目中添加了@ngrx/store、@ngrx/core 和@ngrx/effects。现在我收到标题中的错误。我不知道如何追踪错误，因为我没有收到描述性错误：

(anonymous function)    @   (index):18
ZoneDelegate.invoke @   zone.js:192
Zone.run    @   zone.js:85
(anonymous function)    @   zone.js:451
ZoneDelegate.invokeTask @   zone.js:225
Zone.runTask    @   zone.js:125
drainMicroTaskQueue @   zone.js:357
ZoneTask.invoke @   zone.js:297

关于解决 SystemJS 引发的神秘错误的任何想法或参考？

Answer 1

我的项目只是 运行 变成了同样的东西。看起来 @ngrx/core 和 @ngrx/store 开始在他们的 javascript 中使用 ES7 "export" 语句。现在任何浏览器都不支持这些，需要 t运行spiler 才能工作。

因此，为了恢复您的功能，要做的第一件事就是更改您的 package.json 以使用 @ngrx/* 的旧版本。这当然不是一个长期的解决方案，所以从长远来看，选项是以下之一：

• 使用 Babeljs（或类似的）使你的编译链支持 ES7。
• 切换到 Webpack 及其加载器（正如您所做的那样），它们更擅长可靠地输出符合标准的代码。您似乎已经这样做了。
• 向 ngrx 开发人员大喊大叫，说谁曾认为包含任何浏览器都不支持的 JS 代码是个好主意，却没有宣布您现在需要为此做额外的工作。

Answer 2

试试这个：

在systemjs.config.js中：

paths: {
  // paths serve as alias
  'npm:': 'http://127.0.0.1:8000/node_modules/'
},
map: {
  ...
  '@ngrx/core': 'npm:@ngrx/core/bundles/core.umd.js',
  '@ngrx/store': 'npm:@ngrx/store/bundles/store.umd.js',
},
package: {
  ...
}

此后import { Store } from '@ngrx/store';开始工作。

Answer 3

您可以使用此 systemjs 配置解决加载 UMD modules 问题：

System.config({
    map: {
      ...
      '@ngrx': 'node_modules/@ngrx',
    },
    package: {
      ...
      '@ngrx/core': { main: '/bundles/core.umd.js', defaultExtension: 'js' },
      '@ngrx/store': { main: '/bundles/store.umd.js', defaultExtension: 'js' },
      '@ngrx/effects': { main: '/bundles/effects.umd.js', defaultExtension: 'js' },
      '@ngrx/store-devtools': { main: '/bundles/store-devtools.umd.js', defaultExtension: 'js' },
      '@ngrx/store-log-monitor': { main: '/bundles/store-log-monitor.umd.js', defaultExtension: 'js' },
    }
})

我正在使用这些版本：

core1.2.0/store2.2.1/effects2.0.0/store-devtools3.1.0/store-log-monitor3.0.2