从TypeScript-> CommonJS模块中导出带有字体资产的全局样式

如何解决从TypeScript-> CommonJS模块中导出带有字体资产的全局样式

我有一个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作为package.json中的commonjs模块导入。这是通过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 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-config.js中的following the gist here的gatsby构建时，我们拉入ts-node：

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

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

也许要解决的问题是，通过服务器端环境ts-node导入字体？对于正确的方法是导出带有字体的模块感到困惑。愿意摆脱ts-node，并将Gatsby配置文件保留为js ..，但是大多数情况下只是希望能够导入我的字体。

解决方法

我通过仅复制字体作为构建步骤的一部分来解决了这一问题。基本上，字体都有自己的管道。也许有更好的方法，但是效果很好。