如何在打字稿中導入 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