通过 webpack 将 yaml 导入打字稿答案

【问题标题】：import yaml via webpack into typescript通过 webpack 将 yaml 导入打字稿
【发布时间】：2021-12-01 08:48:13
【问题描述】：

有没有办法通过 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 但在打字稿中失败

有没有办法通过 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"]
}

得到相同的结果

这是运行测试的代码的 sn-p ..（在 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 模块。

【问题讨论】：

标签： typescript webpack yaml

【解决方案1】：

Typescript 不知道您有允许您导入 yaml 文件的 webpack，因此它不会将不是 js 或 ts 的文件视为模块。您需要明确告诉 typescript，yaml 模块是什么以及它们导出什么。这可以通过创建一个包含以下内容的types.d.ts 文件来完成：

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

然后，您需要通过在您使用它的文件中添加 /// <reference path="/path/to/types.d.ts" /> 行或将此文件添加到 tsconfig 中的 include 数组中来让 typescript 知道该文件。

yaml-ts-loader 顺便说一下应该为每个yaml 文件生成.d.ts 文件，所以如果确实如此，您也可以将它们添加到 tsconfig 中的include 或/// <reference /> 它们

【讨论】：

【解决方案2】：

您应该在“*.d.ts”文件中的某处声明模块类型（如果没有，请将其放在根目录）：

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

【讨论】：

【解决方案3】：

我设法让它工作

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

但现在开玩笑已经窒息了

【讨论】：