如何在typescript中导入markdown(.md)文件

Question

我试图在打字稿中导入自述文件,但得到"找不到错误模块"

我的TS代码

import * as readme from "./README.md"; // here i am getting error module not found

我也尝试过:typings.d.ts

declare module "*.md" {
    const value: any;
    export default value;
}

我发现在typescript 2.0 https://github.com/Microsoft/TypeScript/wiki/什么是新的TypeScript#typescript-20中他们引入了"模块名称中的通配符",我们可以包含任何扩展名文件.

我只是按照示例https://hackernoon.com/import-json-into-typescript-8d465beded79这是json文件我跟着同样的markdown文件,但没有成功.

我没有使用webpack和任何加载器,所以我只想从打字稿中获取它

Answer 1

角 8，打字稿 3.5.2

globals.d.ts在src文件夹中创建一个文件（必须在src工作），添加：

declare module '*.md';

在您的组件或服务导入中：

import * as pageMarkdown from 'raw-loader!./page.md';

在这种情况下page.md，与我将其导入的组件处于同一级别。这与serve和build --prod也一起工作。serve如果第一次在实时重新加载模式下测试它，请确保重新启动。

有一个更清晰的导入过程json- 请参阅TypeScript 2.9 发布文档

注意：您不必命名文件globals.d.ts，它可以被调用anything-at-all.d.ts，但这是惯例

Answer 2

对于使用React和Typescript的用户：

使用以下代码在根目录中创建globals.d.ts文件：

declare module "*.md";

然后像这样导入它：

import readme from "../README.md" // substitute this path with your README.md file path

Answer 3

在您链接的示例中，他们正在导入 JSON，而不是 Markdown。他们能够导入 JSON，因为有效的 JSON 也是有效的 JavaScript/TypeScript。Markdown 不是有效的 TypeScript，因此像这样导入它是不可能开箱即用的。

如果您想在运行时访问 Markdown 文件，请发出 AJAX 请求来检索其内容。如果您确实希望将其构建在 JavaScript 本身中，那么您将需要某种构建脚本。您提到您没有使用 Webpack，但它将能够通过添加绑定到 的模块规则来实现您正在寻找的/\.md$/内容raw-loader。您需要使用某种等效的东西。

编辑：

看来你每天都学到新东西。正如 OP 在评论中指出的那样，TypeScript 2.0 支持导入非代码资源。

请尝试以下操作：

declare module "*!txt" {
    const content: string;
    export default content;
}

import readme from "./README.md!txt";

该readme值应该是包含 README.md 内容的字符串。