如何导入Frontmatter＆amp;使用Webpack在JavaScript中降价

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加载器并尝试使用节点fs来读取文件。我想知道是否有人能够帮我发现任何错误。

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

感谢您的任何见解。

Answer 1

通过阅读front-matter-loader docs，您似乎需要将结果从front-matter-loader传递到json-loader，或者单独提取前端数据和降价。假设您已安装了json-loader，front-matter-loader和raw-loader软件包，则以下内容可能会有效。

在您的网络包配置中通过front-matter-loader传递json-loader个结果：

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

分别提取前端数据和降价：

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

Answer 2

您可以使用前端模块。

安装

network.on( 'click', function(properties) { console.log('I\'m clicked'); var ids = properties.nodes; var clickedNodes = nodes.get(ids); console.log('clicked nodes:'); console.log(clickedNodes); });

OR

npm install front-matter

用法

yarn add front-matter