Question

所以我遵循this article尝试将json文件导入到我的代码中。这是我的导入行：

import data from './assets/fonts/helvetiker_bold.typeface.json';

这是字体json文件（只是为了测试它是否现在甚至可以导入）：

{"hi":"true"}

这是我的tsconfig.json文件：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "target": "es5",
    "module":"es2015",
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "strict": true,
    "sourceMap": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declarationDir": "dist/types",
    "outDir": "dist/lib",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "include": [
    "src"
  ]
}

这是我尝试编译时遇到的错误：

[!] Error: Unexpected token
src\assets\fonts\helvetiker_bold.typeface.json (1:5)
1: {"hi":"true"}
        ^

我不知道它在抱怨什么。任何帮助都将得到感谢

Answer 1

我对这个问题的解决方案是只创建一个包含我的JSON对象的类，并将其与FontLoader.parse()函数结合使用，而不是从文件中加载JSON。如此完成：

创建了一个名为HelvetikerUtils.ts的文件，其中包含我的json对象：

export class HelvetikerUtil {
    constructor() { }

    data: any = <YOUR_FONT_JSON_HERE>
}

将此类导入任何地方

import { HelvetikerUtil } from './HelvetikerUtil';

使用FontLoader.parse（）加载数据

let myFont = new HelvetikerUtil;
let FONTLoader = new FontLoader();
let font = FONTLoader.parse(myFont.data);

在打字稿中导入json文件，导致有效json出现“意外令牌”错误

1 个答案: