语法错误：意外的令牌“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 报错的建议或参考资料？

- Élodie Petit

---

这是完整的堆栈跟踪吗？还是缺少了一些东西？ - Deendayal Garg

这是我能看到的完整错误输出。当我取消注释导入 ngrx 中的 store 时会发生这种情况：“import { Store } from '@ngrx/store';”。 - Élodie Petit

你能否尝试使用此处提供的系统配置 https://github.com/ngrx/store/issues/67#issuecomment-196151894？ - Deendayal Garg

@DeendayalGarg 谢谢你，但这个解决方案是针对旧版本的，因为在 ngrx 下面没有“dist”文件夹了。我现在怀疑这与 ES6 有关。当我在 ngrx/store/index 中注释掉导出行时，错误就消失了。我应该在 Github 上向 ngrx 的开发人员询问这个问题。 - Élodie Petit

经过两个小时的努力工作，我切换到了webpack，所有的问题都已经解决了！ - Élodie Petit

Answer 1

你可以使用以下的 systemjs 配置来加载 UMD 模块 以解决此问题:

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' },
    }
})

我使用以下版本：

core 1.2.0 / store 2.2.1 / effects 2.0.0 / store-devtools 3.1.0 / store-log-monitor 3.0.2

- bertrandg

Answer 2

我的项目也遇到了同样的问题。看起来@ngrx/core和@ngrx/store开始在他们的javascript中使用ES7“export”语句。目前任何浏览器都不支持这些语句，需要使用转译器才能工作。

因此，为了恢复功能，首先要做的是更改您的package.json以使用旧版本的@ngrx/*。当然，这并不是长期的解决方案，因此长期的选择有以下几种：

• 使用Babeljs（或类似工具）使您的编译链支持ES7。
• 切换到Webpack及其加载器（就像您已经做的那样），它们更擅长可靠地输出符合标准的代码。
• 向ngRx开发人员抱怨，谁认为包含任何浏览器都不支持的JS代码是一个好主意，而不宣布现在需要额外的工作。

- Filip Sufitchi

---

我觉得这是ngrx经常面临的问题。几乎所有的示例（包括他们自己的）都已过时，需要更新。已经过去3天了，我还在努力创建一个可以工作的项目 :-) - Élodie Petit

关于使用Webpack，我突然想到一个问题：如果你不使用转译器，可能会再次遇到这个问题。切换到Webpack的原因是它用自己的require（合法的ES6/ES5）替换了（不支持的）import语句。但是，如果ngrx团队（或其他人）决定使用另一个ES7特性，例如函数参数中的尾随逗号（例如constructor(a: string, b: number,) {}），你的代码将再次无法运行。我不确定是否可以通过ts-loader来处理JS，或者需要babel loader来解决这个问题。 - Filip Sufitchi

错误。"export" 是 ES2015 的特性。ngrx 总是分发 ES5，经过转译的版本。只需使用捆绑包而不是 src/ 目录（其中包含 ES2015 模块语法的 ES5 代码（要明确的是，仅模块语法，没有其他 ES2015+ 特性）。请参考下面的 bertrandg 答案。 - André Werlang

Answer 3

尝试这个：

在 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'; 生效之后。

- Алекс М