gatsby js站点组件中的动态模块导入答案

【问题标题】：Dynamic module import in component for gatsby js sitegatsby js站点组件中的动态模块导入
【发布时间】：2020-01-20 11:55:44
【问题描述】：

我正在构建一个 gatsby 站点，其中每个页面都是从模板生成的，但是每个页面都需要不同的模块导入。

具体来说，每个页面都包含一个observablehq notebook，这些都是从可观察到的模块中导出的。见here。

页面是从json 文件动态生成的，例如：

[
    {   "path": "page1",
        "modulename": "gatsby-test"
    },
    {   
        "path": "page2",
        "modulename": "gatsby-test-2"
    }
]

这是在gatsby-node.js 中使用createPages 完成的。

我已经yarn added 每个笔记本项目，例如yarn add https://api.observablehq.com/@robinl/gatsby-test.tgz.

我正在尝试编写一个将模块名称作为属性的组件，然后从this.props 的内容中加载正确的模块。

我的组件的轮廓如下所示：

class ImportedNotebook extends Component {

    componentDidMount() {
        var promise = import(this.props.modulename).then(function(themodule) {
            // do stuff here
        })   
    }

    render() {
        return (<div>blah</div>);
    }
}

这不起作用 - 我在使用 gatsby develop 访问本地主机上的页面时收到 Unhandled Rejection (Error): Cannot find module 'gatsby-test-2' 错误。

但是，如果我将 this.props.modulename 替换为 "gatsby-test-2"，它就可以正常工作。

有没有办法从变量中动态加载模块？或者更适合解决这个问题的不同方法？

【问题讨论】：

我觉得this 可能是相关的。

标签： reactjs gatsby

【解决方案1】：

如果我正确理解了您的页面构建过程，您应该能够在exports.createPages: 中调用createPage 时将可观察到的modulename 传递到动态生成页面的context 中

exports.createPages = function({ actions }) {
  // ...
  actions.createPage({
    path: pagePath,
    component: require.resolve("./src/templates/pageTemplate.js"), // your page template file
    context: {
      modulename: modulename, // pass in your modulename URL here
    },
  })

然后在您的页面模板 ("./src/templates/pageTemplate.js") 中，您可以像这样访问 modulename 变量：

this.props.pageContext.modulename

最后，您可以使用该变量来动态导入每个组件。

【讨论】：

【解决方案2】：

我越来越相信使用这种方法是不可能做到这一点的。本质上这是因为 webpack 需要显式导入。如果您尝试使这些“动态”，则无法知道要捆绑哪些代码。

我想出的解决方案是： - 开发一个组件，将一个从可观察模块导入的notebook 作为输入 - 为每个导入笔记本的笔记本创建一个最小的单独页面，然后将其传递给我的组件

对于每个页面，代码如下所示：

import React from "react"
import notebook from "gatsby-test-2"
import ObservablePage from "../components/obs_page"

export default ({ data }) => (
    ObservablePage(notebook)
)

【讨论】：