0

我设置了一个项目，它使用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 模块是针对其他模块加载器构建的，或者我仍然缺少一些配置。

4

1 回答 1

0

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

特别是，文件名表明除了模块构造（ , ）es5-esm.js之外的所有内容都被转译为 es5 。importexport

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

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

所以，

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

应该做的伎俩。

于 2019-07-22T18:19:48.643 回答