在 Gatsby 中使用根导入插件为 NPM 包创建别名答案

【问题标题】：Creating an Alias for an NPM Package in Gatsby Using the Root Import Plugin在 Gatsby 中使用根导入插件为 NPM 包创建别名
【发布时间】：2020-01-07 13:33:41
【问题描述】：

我已经安装了gatsby-plugin-root-import 插件来为我的 Gatsby 站点中的导入创建别名。我已经用了一段时间了，效果很好。

今天，我决定看看是否可以将它用于已安装的 npm 包。我想我设置正确，但我收到一条错误消息，提示找不到模块：

Module not found: Error: Can't resolve 'FontAwesome' in '/sandbox/src/pages'

但是，当我查看我的代码时，它看起来应该可以工作：

{
      resolve: 'gatsby-plugin-root-import',
      options: {
        // Node Modules
        FontAwesome: path.join(__dirname, '@fortawesome/react-fontawesome'),

        // Main Folders
        SRC: path.join(__dirname, 'src'),
        Assets: path.join(__dirname, 'src/assets'),
        Components: path.join(__dirname, 'src/components'),
        Config: path.join(__dirname, 'src/config'),
        Layouts: path.join(__dirname, 'src/layouts'),
        Pages: path.join(__dirname, 'src/pages'),
        Plugins: path.join(__dirname, 'src/plugins'),
        Styles: path.join(__dirname, 'src/styles'),
        Utilities: path.join(__dirname, 'src/utilities'),

      },
    },

所有其他别名都可以正常工作 - 只有 FontAwesome 别名会创建未找到模块的错误消息。

知道为什么这不起作用以及我能做些什么来解决它吗？

谢谢。

附：这是插件的链接：https://github.com/mongkuen/gatsby-plugin-root-import

【问题讨论】：

标签： javascript reactjs npm webpack gatsby

【解决方案1】：

我认为问题出在这行：

FontAwesome: path.join(__dirname, '@fortawesome/react-fontawesome'),

您将使用 node_modules 中的插件名称加入根文件夹。但是您需要查看 node_modules 文件夹，因为它不会像导入一样自动解析。

您能否改为测试以下行？

FontAwesome: path.join(__dirname, 'node_modules/@fortawesome/react-fontawesome'),

【讨论】：