如何在打字稿中导入 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/What 's-new-in-TypeScript#typescript-20 中，他们引入了“模块名称中的通配符”，使用我们可以包含任何扩展名文件。

我只是按照示例https://hackernoon.com/import-json-into-typescript-8d465beded79用于 json 文件，我对 Markdown 文件也遵循相同的示例，但没有成功。

我没有使用 webpack 和任何加载器，所以我只想要从打字稿

Answer 1

对于那些使用React with Typescript的人：

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

declare module "*.md";

然后像这样导入：

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

Answer 2

在您的链接示例中，他们正在导入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内容的字符串。

Answer 3

@Mitch的回答对我不起作用。 使用angular v7，我发现我可以使用这种语法： import * as documentation from 'raw-loader!./documentation.md';

Answer 4

Angular 8，TypeScript 3.5.2

在src文件夹中创建一个文件globals.d.ts （必须在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 5

对于那些使用 React 和 Typescript 的人：

使用以下代码在src/react-app-env.d.ts文件中找到文件：

declare module "*.md";

然后像这样导入：

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