aurelia -在skelton-esnext项目中使用material-components-web时出错

Question

我已经成功地使用了我的aurelia from esnext-webpack项目中的material-components-web库，但我正在努力让它们在一个from esnext项目中工作。

问题似乎出在骨架-esnext项目使用带有system.js的jspm作为其模块加载器的事实上。

我已经将"@material/textfield": "npm:@material/textfield@^0.3.6"添加到我的package.json的jspm依赖项部分，这似乎会将正确的@material库安装到我的jspm_modules/npm/@material中。

现在，当我试图从我的aurelia视图模型中访问这个库中的任何类时，

import {MDCTextfieldFoundation} from '@material/textfield';

当我运行项目时，我在浏览器中得到以下错误：

 Error: (SystemJS) Unexpected token import
    SyntaxError: Unexpected token import
        at eval (<anonymous>)
        at Object.eval (http://localhost:9000/jspm_packages/npm/@material/textfield@0.3.6.js:1:123)
        at eval (....

对最有可能导致这个问题的原因有什么建议？

Answer 1

SystemJS正在导入插件的原始源文件，而不是转换后的源文件(如果您查看jspm_packages/npm/@material/textfield@0.3.6.js，您可以看到这一点。

您可以通过将其中的位置更改为指向textfield@0.3.6目录的dist目录来修复它。然而，它总是在潜在的更新中被覆盖。并且它不保存在CVS中。

另一种更简单的方法是在视图模型中导入正确的文件：

import {MDCTextfieldFoundation} from '@material/textfield/dist/mdc.textfield';