javascript - 如何使用 Webpack 在 JavaScript 中导入 Frontmatter 和 Markdown

Question

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

到目前为止，我一直在尝试导入带有 Frontmatter 的单个 Markdown 文件 进行渲染。

我试过了front-matter-loader和 raw-loader ;都抛出错误:

/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 ，提取，然后使用 marked 呈现 HTML .但是，我显然无法正确地require/import 文件。我的下一个测试将是完全删除 webpack 加载程序并尝试使用 Node 的 fs 来读取文件。我想知道是否有人能够帮助我发现这里的任何错误。

我一直在想，front-matter-loader 根本不是一个复杂的文件 (view here)，没有理由不加载该文件。

感谢您的任何见解。

Answer 1

来自阅读front-matter-loader docs ，看起来您需要通过 json-loader 传递来自 front-matter-loader 的结果，或者分别提取 front-matter 数据和 markdown。假设您已经安装了 json-loader、front-matter-loader 和 raw-loader 包，以下可能有效。

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

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

分别提取前题数据和markdown:

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