SyntaxError using Wijmo with RequireJs / Typescript

Question

我设置了一个项目，它使用Typescript和RequireJS来加载依赖项。我无法使wijmo.grid依赖起作用。

我从Grapecity的快速入门手册开始，并将其调整为Typescript和RequireJs的组合。

这就是我想在test.ts做的事情：

import { FlexGrid} from '@grapecity/wijmo.grid';
export class TestViewModel {
constructor() {
let grid = new FlexGrid('#hostElement');
}
}

脚本标记：

<script src="~/lib/requirejs/require.js"></script>
<script src="~/js/require-config.js"></script>
<script>
require(
["my-test"],
function (myTest) {
var viewModel = new myTest.TestViewModel();
}
);
</script>

这是我require-config.ts：

declare var require: any;
require.config({
baseUrl: "/",
paths: {
"jquery": [
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery",
"lib/jquery/dist/jquery-3.4.1"
],
"knockout": [
"https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug",
"lib/knockout/knockout-3.5.0.debug"
],
"@grapecity/wijmo.grid": [
"lib/@grapecity/wijmo.grid/es5-esm"
],
"my-test": "js/test"
},
waitSeconds: 15
});

这是我的tsconfig.json：

{
"compileOnSave": true,
"compilerOptions": {
"strict": true,
"noEmitOnError": true,
"sourceMap": true,
"removeComments": false,
"target": "es5",
"outDir": "wwwroot/js/",
"module": "amd",
"moduleResolution": "node",
"lib": [
"es6",
"dom"
]
},
"exclude": [
"wwwroot"
]
}

现在，当我访问该页面时，我希望它可以工作，但是出现错误：

SyntaxError: import declarations may only appear at top level of a module (es5-esm.js:14:365)

我在这里做错了什么？

编辑：

我还尝试在require-config.ts中使用索引模块：

"@grapecity/wijmo.grid": [
"lib/@grapecity/wijmo.grid/index"
],

这会导致不同的错误：

ReferenceError: exports is not defined (index.js:14:379)

似乎 wijmo 模块是针对其他模块加载器构建的，而不是所述的，或者我仍然缺少一些配置。

Answer 1

这意味着lib/@grapecity/wijmo.grid/es5-esm的格式不正确，正如预期的那样，文件名是可以预期的。您可以将依赖项映射到不同的输出，也可以使用 TypeScript 或 Babel 或其他东西转译代码。

特别是，文件名es5-esm.js表明除了模块构造(import，export)之外的所有内容都被转换为es5。

如果我们查阅文档，我们会发现情况确实如此。

Wijmo npm 包以多种格式提供其内容，这些格式 是语言版本(ES5 或 ES2015)和模块的组合 格式(CommonJS或ESM)。已安装包文件夹中的每种格式 由一个单独的.js文件表示，由一个特殊字段引用 在 package.json 文件中。像 Webpack 这样的现代捆绑器可以使用 首选格式的包文件，具体取决于捆绑程序 配置。没有此功能的捆绑器将使用主 package.json 中的字段，用于将模块名称解析为特定的.js文件。 在Wijmo软件包中，它是.js包含 (最兼容)ES5 + CommonJS 格式。

因此

paths: {
"@grapecity/wijmo.grid": [
"lib/@grapecity/wijmo.grid/index"
],
}

应该做这个伎俩。