如何导入Frontmatter&使用Webpack在JavaScript中进行Markdown

问题描述

我正在尝试使用Markdown编写的内容逐步构建一个React网站.

I am trying to incrementally build a React site with the content written in Markdown.

我一直试图导入一个带有Frontmatter的Markdown文件来渲染.

I am stuck so far as I am trying to import a single Markdown file with Frontmatter to render.

我尝试了前者-加载器和原始加载器;都抛出错误:

I have tried front-matter-loader and raw-loader; both throw errors:

/pages/home.md: Invalid left-hand side in prefix operation (1:2)
1 | ---
  |   ^   
2 | title: This is the home page  
3 | ---

这是我简单的JavaScript测试:

import home from '../pages/home.md';

console.log('testing');
console.log(home);

这是我在webpack配置中的加载器:

...
module: {
    rules: [
        { 
            test: /\.(js)$/, 
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                    cacheDirectory: '.babel_cache'
                }
            }
        },
        {
            test: /\.md$/,
            use: 'raw-loader'
        }
    ]
},
...

我期望使用raw-loader是一个字符串，然后可以将其传递给 front-matter ，提取并渲染带有标记的HTML.但是，我显然似乎无法正确地require/import文件.我的下一个测试将完全删除Webpack加载程序，并尝试使用节点的fs读取文件.我想知道是否有人可以帮助我在这里发现任何错误.

What I expected from using raw-loader was a string, which I could then pass to front-matter, extract, and then render HTML with marked. However, I obviously cannot seem to require/import the file properly. My next tests will be to remove the webpack loaders altogether and try to use node's fs to read the file. I wondered if anyone would be able to help me spot any error here.

我一直在想，front-matter-loader根本不是一个复杂的文件(在此处查看)，并且没有理由不应该加载文件.

I keep thinking, the front-matter-loader is not a complicated file at all (view here), and there's no reason why it shouldn't load the file.

感谢您的见解.

推荐答案

通过阅读 front-matter-loader docs ，看起来您需要将front-matter-loader中的结果传递给json-loader或分别提取前者数据和减价.假设您已经安装了json-loader，front-matter-loader和raw-loader软件包，则可能会执行以下操作.

From reading the front-matter-loader docs, looks like you need to pass the results from front-matter-loader through a json-loader or extract the front-matter data and markdown separately. Assuming you've installed the json-loader, front-matter-loader, and raw-loader packages, the following might work.

在Webpack配置中通过json-loader传递front-matter-loader结果:

Passing front-matter-loader results through json-loader in your webpack config:

    ...
    module: {
        rules: [
            ...
            {
                test: /\.md$/,
                use: ['json-loader', 'front-matter-loader']
            }
        ]
    },
    ...

分别提取前项数据和降价:

Extracting the front-matter data and markdown separately:

var data = require('json!front-matter!../pages/home.md')
var content = require('raw!front-matter?onlyBody!../pages/home.md')

这篇关于如何导入Frontmatter&使用Webpack在JavaScript中进行Markdown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！