通過 webpack 將 yaml 導入打字稿

Question

有沒有辦法通過Webpack將Yaml導入Typescript文件而不會出錯？

// webpack config

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.yaml$/,
        use: 'yaml',
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs',
  },
};

// package.json
"devDependencies": {
    "yaml-ts-loader": "^1.0.0",
.....

在test.ts文件中

import examples from './test-examples.yaml';

describe('', () => {...})

結果是

TSError: ⨯ Unable to compile TypeScript:
tests/mytest.test.ts:1:22 - error TS2307: Cannot find module './test-examples.yaml' or its corresponding type declarations.

1 import examples from './test-examples.yaml';

這適用於 Javascript 但在 Typescript 中失敗

有沒有辦法通過Webpack將Yaml導入Typescript文件而不會出錯？

---

編輯

第二次嘗試

• 刪除 yaml-ts-loader`
• 添加yaml-loader
• 創建一個global.d.ts

declare module '*.yaml' {
  const data: any;
  export default data;
}

• 向tsconfig.json添加類型

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext", "es2015"],
    "sourceMap": true,
    "noEmitOnError": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "module": "commonjs",
    "declaration": true,
    "downlevelIteration": true
  },
  "include": ["global.d.ts", "src"],
  "exclude": ["node_modules", "tests"]
}

得到相同的結果

---

這是運行測試的代碼片段..（在 package.json 中）

"scripts": {
    "test": "mocha -r ts-node/register tests/**/*.test.ts",
    ....
}

並且測試像這樣導入 yaml ..

import examples from './test-examples.yaml';

但是因為我沒有使用 webpack 進行測試（我認為我不是）這可能是問題嗎？ 是否有必要用 Webpack 編譯我的測試（因為它是測試文件本身導入 YAML），然后在編譯后的版本上運行 Mocha 測試？ 或者這不是必要的？

==============

編輯 #2

我最終回避了這個問題，並將fs與一個將 YAML 轉換為 JSON 的npm模塊一起使用。

Answer 1

Typescript 不知道您有 webpack 可以讓您導入yaml文件，因此它不會將不是js或ts視為模塊。 您需要明確告訴打字稿， yaml模塊是什么以及它們導出什么。 這可以通過創建一個包含以下內容的types.d.ts文件來完成：

declare module '*.yaml' {
  const data: any
  export default data
}

然后，您需要通過在使用它的文件中添加/// <reference path="/path/to/types.d.ts" />行或添加此文件以include數組include在您的配置文件

yaml-ts-loader是自己生成方式.d.ts為每個文件yaml文件，所以如果它實際上，你也可以增加那些include在tsconfig或/// <reference />他們

Answer 2

您應該在“*.d.ts”文件中的某處聲明模塊類型（如果沒有，只需將其放在根目錄中）：

declare module '*.yaml' {
  const content: { [key: string]: any }
  export default content
}

Answer 3

我設法讓它與

  ...
  module: {
    rules: [
      ...
      {
        test: /\.yaml$/,
        type: "json",
        use: "yaml-loader",
      },
    ]
  }
  ...

但現在笑話令人窒息