使用Webpack在Electron项目中使用外部目录中的组件 [英] Using components from an external directory in a Electron project with Webpack

问题描述

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

I am trying to do this as simple as possible, I studied Yarn Workspaces for a while, but that's a solution that's currently doesn't work with Electron, there were simply too many issues.

• 我在这里有Electron项目：./electron /


• 我在这里有一个包含组件的目录：./common /

这些组件是在React / JSX中开发的，没有什么特别的。就是说，我正在使用钩子（useXXX）。

The components are developed in React/JSX, there is nothing really fancy about them. That said, I am using hooks (useXXX).

我尝试了多种方法来包含这些组件（理想情况下，我想使用Yarn Workspaces，但它只会使问题数量成倍增加），但他们都失败了。这就是为什么我要避免使用yarn link或工作区或使common成为库等的原因。我只希望我的Electron项目的行为就像文件位于./electron下。就是这样。

I tried many ways to include those components (ideally, I wanted to use Yarn Workspaces, but it only multiplied the number of issues), but they all failed. Which is why I would like to avoid using yarn link or workspaces or making the common a library, etc. I just want my Electron project to behave as if the files were under ./electron. That's it.

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

The closest I came to a solution is by using electron-webpack, and overriding it with this config:

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 。

I can import modules, and they work... except if I use hooks. And I am getting the "Invalid Hook Call Warning": https://reactjs.org/warnings/invalid-hook-call-warning.html.

我觉得/ common文件夹没有被babel正确编译，但实际情况是我不知道在哪里看或尝试什么。我想通过该webpack配置可以解决此问题。

I feel like that /common folder is not being compiled properly by babel, but the reality is that I have no idea where to look or what to try. I guess there is a solution for this, through that webpack config.

在此先感谢您的帮助：）

Thanks in advance for your help :)

推荐答案

我找到了解决方案。之所以会这样，是因为React的实例在/ common和/ electron之间是不同的。

I found the solution. That happens because the instance of React is different between /common and /electron.

这个想法是要添加一个别名，例如：

The idea is to add an alias, like this:

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

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

Of course, the same can be done for other modules which need to be exactly on the same instance. Don't hesitate to comment this if this answer it not perfectly right.

这篇关于使用Webpack在Electron项目中使用外部目录中的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！