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

zphenhs4  于 7个月前  发布在  TypeScript
关注(0)|答案(7)|浏览(155)

我试图在typescript导入自述文件,但得到“错误模块未找到”
我的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的-new-in-TypeScript#typescript-20中,他们引入了“模块名称中的通配符”,我们可以使用它来包含任何扩展文件。
我只是按照https://hackernoon.com/import-json-into-typescript-8d465beded79的例子,这是json文件,我按照同样的markdown文件,但没有成功。
我没有使用webpack和任何加载器,所以我只想从typescript

gcxthw6b

gcxthw6b1#

对于使用React with Typescript的用户:
使用以下代码在根目录 (例如src/ 中创建一个globals.d.ts文件:

declare module "*.md";

字符串
然后像这样导入:

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

qnyhuwrf

qnyhuwrf2#

Angular 8,TypeScript 3.5.2

在**src**文件夹中创建一个文件globals.d.ts(必须在src中才能工作),添加:

declare module '*.md';

字符串
在组件或服务导入中,使用:

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


在本例中,page.md与我导入它的组件处于同一级别。这对servebuild --prod也有效。如果第一次在live reload模式下测试serve,请确保重新启动它。
导入json有一个更清晰的过程-请参阅TypeScript 2.9发布文档
注意:您不必将文件命名为globals.d.ts,也可以将其命名为anything-at-all.d.ts,但这是惯例

wnrlj8wa

wnrlj8wa3#

在你链接的例子中,他们导入的是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内容的字符串。

qfe3c7zg

qfe3c7zg4#

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

e4eetjau

e4eetjau5#

对于未来的读者来说,这个设置对我没有任何作用:Vite + React + Typescript

第一步

我最终做的是在vite.config.ts中创建一个自定义插件来从markdown文件中获取原始内容:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react(),
    {
      name: "markdown-loader",
      transform(code, id) {
        if (id.slice(-3) === ".md") {
          // For .md files, get the raw content
          return `export default ${JSON.stringify(code)};`;
        }
      }
    }
  ]
});

字符串

第二步

然后我只是告诉typescript在vite-env.d.ts中正确导入markdown文件

declare module "*.md";

p8h8hvxi

p8h8hvxi6#

对于使用React with Typescript的用户:
使用以下代码在src/react-app-env.d.ts文件中查找文件:

declare module "*.md";

字符串
然后像这样导入:

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

7uhlpewt

7uhlpewt7#

除了Other的答案,我还需要添加一个fetch请求
因此,总体步骤是:

第一步:创建一个文件markdown.d.ts,代码如下:

declare module '*.md' {
    const value: string; // markdown is just a string
    export default value;
}

字符串

第二步:将此代码添加到您想要的.tsx文件中

import data from '<path_to_md_file>.md'

useEffect(() => {
        fetch(data).then(res => res.text()).then(text => console.log(text))
}, [])

相关问题