我有一个TypeScript React项目，组织如下：

tsconfig.json
package.json
yarn.lock
lerna.json
node_modules/
packages/
  ui-library/
    package.json
    tsconfig.json
    typings.d.ts
    src/
      fonts/
        myfont.ttf
      components/
        GlobalStyle.tsx
    lib/ <-- `tsc` builds to here
  web-app/
   package.json
   src/
    components/

web-app将ui-library作为commonjs模块导入其package.json中。这是通过Yarn Workspaces管理的，因此node_modules位于根目录而不是每个文件夹。在某个时候，web应用程序从ui-lib导入GlobalStyle，这就是问题发生的地方。

Error: Cannot find module '../fonts/myfont.ttf'
Require stack:
 - /Users/me/sources/myproject/packages/ui-library/lib/styles/GlobalStyle.js...

下面是导致问题的ui-library/src/GlobalStyle.tsx的原始import语句：

import myFont from "../fonts/myfont.ttf";

const GlobalStyle = () => (
  <style global jsx>{`
    @font-face {
      font-family: "My font family";
      src: url(${myFont}) format("truetype");
    }
  ...</style>);

问题是在发出的GlobalStyle.js代码中的require语句，当我在ui-lib文件夹中运行tsc时构建：
const MYFONT_ttf_1 = __importDefault(require("./myfont.ttf"));
我在网上搜索了这个问题，发现编译.ttf和其他异常导入时必须添加类型。所以我创建了一个typings.d.ts文件，声明如下：

declare module "*.ttf" {
  const value: string;
  export default value;
}

我将它包含在ui-library/tsconfig.json中，如下所示：

{
  "extends": "../../tsconfig.json",
  "exclude": ["lib"],
  "include": ["src"],
  "files": ["./typings.d.ts"],
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "lib",
    "declaration": true,
    "declarationMap": true,
    "noEmit": false
  }
}

上面的tsconfig扩展了根tsconfig：

{
  "files": ["./typings.d.ts"],
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2019",
    "lib": ["dom", "es2019"],
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "isolatedModules": true,
    "esModuleInterop": true,
    "noUnusedLocals": false,
    "forceConsistentCasingInFileNames": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "noEmit": true,
    "declaration": false
  },
  "exclude": ["node_modules"]
}

我们正在使用TypeScript 3.8。如果有任何其他信息需要提供，请告诉我。我的直觉是，我要么使用了错误的模块/目标，要么从根本上误解了其中的某些方面。

更多详情我应该注意我们使用CommonJS模块的原因是因为ts-node只能与之一起工作。当我们在做gatsby构建时，我们拉入ts-node，gatsby-config.js中的following the gist here：

require("ts-node").register();

// Use a TypeScript version of gatsby-config.js.
module.exports = require("./gatsby-config.ts");

也许这是一个不可能解决的问题，通过ts-node导入字体，这是一个服务器端环境？困惑的是什么正确的方法是导出一个模块的字体。愿意摆脱ts-node，并离开盖茨比配置文件为js..但主要是希望能够导入我的字体。