Question

我想在Gatsby网站中内嵌https://zizzamia.github.io/perfume/的整个UMD模块源代码，如何从node_modules目录中读取它并将其放入以下内容的<head>文件吗？

Answer 1

我想出了以下解决方案：

安装raw-loader，这是一个Webpack加载器，用于导入文件作为字符串

npm install raw-loader --save-dev

将我的文件作为字符串导入

import rawPerfume from 'raw-loader!./node_modules/perfume.js/dist/perfume.umd.min.js';

我创建了一个插件（只需将plugins/<PLUGIN_NAME>添加到项目的根目录），其中包含 gatsby-ssr.js文件（看看SSR guide of Gatsby）
然后我再设置一个头部组件

import React from "react";
export const onRenderBody = ({
  setHeadComponents,
}) => {
  setHeadComponents([
    React.createElement('script', {
      dangerouslySetInnerHTML: {
        __html: rawPerfume.default || rawPerfume
      }
    })
  ]);  
}

最终的代码是这样的（plugins/gatsby-plugin-perfume.js/gatsby-ssr.js文件）

import rawPerfume from 'raw-loader!./node_modules/perfume.js/dist/perfume.umd.min.js';

import React from "react";
export const onRenderBody = ({
  setHeadComponents,
}) => {
  setHeadComponents([
    React.createElement('script', {
      dangerouslySetInnerHTML: {
        __html: rawPerfume.default || rawPerfume
      }
    })
  ]);  
}

您也可以在我也分享过的the gatsby-plugin-perfume.js plugin上看到代码

如何在Gatsby网站中内联node_modules脚本？

1 个答案: