Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習

Vite2 を使用するほとんどの開発者が遭遇する問題は、ドキュメントに Markdown のサポートについての説明がないことです。では、Vite プロジェクトで Markdown のインポートとレンダリングをサポートしたい場合はどうすればよいでしょうか?この記事では2つの方法を紹介します。

カスタム Vite プラグイン

ネット上の関連質問を見ると、ほとんどがこのやり方、つまり、Vite で Markdown レンダリングをサポートするためのカスタムプラグインに関するものです。具体的な手順は次のとおりです。

プロジェクトのルートディレクトリに md.js ファイルを作成し、次の内容を入力します。

'path' からパスをインポートします。
'fs' から fs をインポートします。
'marked' から marked をインポートします。

const mdToJs = str => {
  const コンテンツ = JSON.stringify(marked(str));
  `export default ${content}` を返します。
};

エクスポート関数md() {
  戻る {
    configureServer: [ // 開発用 async ({ app }) => {
        app.use(async (ctx, next) => {
          // .md という拡張子のファイルを取得し、それを js ファイルに変換します if (ctx.path.endsWith('.md')) {             
            ctx.type = 'js';
            定数 filePath = path.join(process.cwd(), ctx.path);
            ctx.body = mdToJs(fs.readFileSync(filePath).toString());
          } それ以外 {
            次の()を待ちます。
          }
        });
      },
    ]、
    変換: [{ // ロールアップ用
      テスト: context => context.path.endsWith('.md'),
      変換: ({ code }) => mdToJs(code)
    }]
  };
}

次に、vite.config.js を変更し、上記で作成したプラグインをインポートします。

'./md' から {md} をインポートします。

エクスポートデフォルト{
  プラグイン: [md()]
};

この方法を使用すると、インポートされた md ファイルはレンダリング用の js ファイルに変換されます。具体的な使用例:

<テンプレート>
<記事 v-html="md" />
</テンプレート>

<script lang="ts">
'./xxx.md' から md をインポートします
エクスポートデフォルト{
設定（）{

  {md} を返す
  
  }
}

vite-plugin-markdownの使用

このサードパーティ製プラグインは、Markdown ファイルのインポートとレンダリングをサポートするだけでなく、HTML 文字列、React または Vue コンポーネントなどのさまざまな形式へのレンダリングもサポートします。
vite-plugin-markdownをインストールします。

npm と vite-plugin-markdown

vite.config.js で変更します:

const mdPlugin = require('vite-plugin-markdown')

エクスポートデフォルト{
  プラグイン: [
    mdPlugin.plugin({
      モード: ['html'],
    })
  ]
}

オプションオブジェクトが構成に渡され、次のパラメーターがサポートされます。

モード: ('html' | 'toc' | 'react' | 'vue')[]
マークダウン?: (本文: 文字列) => 文字列
マークダウン?: マークダウン | マークダウン.オプション

各モードでのレンダリング例:

Front Matter属性をインポートする

---
タイトル: 素晴らしいタイトル
説明: この素晴らしいコンテンツについて説明してください
タグ:
  - "素晴らしい"
  - "素晴らしい"
  - 「すごい」
---
# これはすごい
Vite は、開発中にネイティブ ES モジュールのインポートを介してコードを提供し、本番環境用に Rollup とバンドルする、独自の Web 開発ビルド ツールです。

'./contents/the-doc.md' から { 属性 } をインポートします。

console.log(attributes) //=> { title: '素晴らしいタイトル', description: 'この素晴らしいコンテンツを説明してください', tags: ['素晴らしい', '素晴らしい', '素晴らしい'] }

コンパイルされた HTML (Mode.HTML) をインポートする

'./contents/the-doc.md' から { html } をインポートします。

コンソール.log(html) 
//=> "<h1>これは素晴らしい</h1><p>ite は、開発中にネイティブ ES モジュールのインポートを介してコードを提供し、本番環境用に Rollup とバンドルする、独自の Web 開発ビルド ツールです。</p>"

ToC メタデータをインポートする (Mode.TOC)

# バイト

Vite は、開発中にネイティブ ES モジュールのインポートを介してコードを提供し、本番環境用に Rollup とバンドルする、独自の Web 開発ビルド ツールです。

＃＃ 状態

＃＃ はじめる

# 注記

'./contents/the-doc.md' から { toc } をインポートします。

コンソール.log(toc)
//=> [{ レベル: '1', コンテンツ: 'vite' }, { レベル: '2', コンテンツ: 'ステータス' }, { レベル: '2', コンテンツ: 'はじめに' }, { レベル: '1', コンテンツ: 'メモ' },]

React コンポーネントとしてインポート (Mode.REACT)

'react' から React をインポートします
'./contents/the-doc.md' から { ReactComponent } をインポートします。

関数MyReactApp() {
  戻る （
    <div>
      <Reactコンポーネント />
    </div>
}

Vue コンポーネントとしてインポート (Mode.VUE)

<テンプレート>
  <記事>
    <マークダウンコンテンツ />
  </記事>
</テンプレート>

<スクリプト>
'./contents/the-doc.md' から { VueComponent } をインポートします。

エクスポートデフォルト{
  コンポーネント:
    マークダウンコンテンツ: VueComponent
  }
};
</スクリプト>

最後に

Vite2+Vue3を使用してMarkdown文書をレンダリングする実践に関するこの記事はこれで終わりです。より関連性の高いVite2+Vue3レンダリングMarkdownコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: