在带有 Webpack 的 Electron 项目中使用来自外部目录的组件

Question

我正在尝试尽可能简单地做到这一点，我研究了一段时间的 Yarn Workspaces，但这是目前不适用于 Electron 的解决方案，问题太多了。

我这里有一个 Electron 项目：./electron/
我这里有一个包含组件的目录：./common/

组件是在React/JSX开发的，没有什么花哨的地方。也就是说，我正在使用钩子 (useXXX)。

我尝试了很多方法来包含这些组件（理想情况下，我想使用 Yarn Workspaces，但它只会成倍增加问题的数量），但都失败了。这就是为什么我想避免使用 yarn link 或工作区或将公共库设为库等的原因。我只希望我的 Electron 项目表现得就像文件在 ./electron 下一样。就是这样。

我最接近的解决方案是使用 electron-webpack，并使用此配置覆盖它：

module.exports = function(config) {
  config = merge.smart(config, {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          //include: /node_modules/,
          include: Path.resolve(__dirname, '../common'),
          loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=@babel/preset-react']
        },
      ]
    },
    resolve: {
      alias: {
        '@common': Path.resolve(__dirname, '../common')
      }
    }
  })

  return config
}

我可以导入模块，而且它们可以工作...除非我使用挂钩。我收到“无效挂机警告”：https://reactjs.org/warnings/invalid-hook-call-warning.html.

我觉得 /common 文件夹没有被 babel 正确编译，但事实是我不知道去哪里看或尝试什么。我想通过那个 webpack 配置有一个解决方案。

提前感谢您的帮助:)

Answer 1

我找到了解决方案。发生这种情况是因为 /common 和 /electron 之间的 React 实例不同。

想法是添加一个别名，像这样：

'react': Path.resolve('./node_modules/react')

当然，对于需要完全在同一个实例上的其他模块也可以这样做。如果这个答案不完全正确，请不要犹豫，对此发表评论。

Answer 2

我为类似的问题折腾了一天多。我的项目依赖于一个模块 A，该模块本身由 Webpack（我自己编写的）捆绑在一起。我从 A 外部化了 React（声明它是一个 commonjs2 模块）。这将从库包中排除 React 文件。

我的主程序运行ning 在 Electron Renderer 进程中，也使用 React。我让 Webpack 将 React 包含到包中（没有特殊配置）。

但是，由于运行time 环境中有两个 React 实例，这产生了 'hooks' 问题。

这是由这些事实造成的：

module A 'requires' React，这是由Electron的模块系统解决的。所以 Electron 从 node_modules;
主程序依赖于 Webpack 运行时间 'load' 从包本身做出反应。
Electron 和 Webpack 运行time 都有自己的模块缓存...

我的解决方案是也从主程序中外部化 React。这样，主程序和模块 A 都从 Electron 获取它们的 React - 内存中的单个实例。

我尝试了任意数量的别名，但这并没有解决问题，因为别名只为在哪里可以找到模块代码的问题提供方向。对于多模块缓存的问题没有任何作用！

如果您运行使用无法控制的模块解决此问题，请了解 React 是否以及如何被外部化。如果它没有被外部化，我认为你无法在 Electron 的上下文中解决这个问题。如果它被外部化为一个全局的，将 React 放入你的 .html 文件并让你的主程序也依赖于它。

在带有 Webpack 的 Electron 项目中使用来自外部目录的组件

Using components from an external directory in a Electron project with Webpack

reactjs

webpack

electron

react-hooks

webpack-4