在带有 Webpack 的 Electron 项目中使用来自外部目录的组件
Using components from an external directory in a Electron project with Webpack
我正在尝试尽可能简单地做到这一点,我研究了一段时间的 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 配置有一个解决方案。
提前感谢您的帮助:)
我找到了解决方案。发生这种情况是因为 /common 和 /electron 之间的 React 实例不同。
想法是添加一个别名,像这样:
'react': Path.resolve('./node_modules/react')
当然,对于需要完全在同一个实例上的其他模块也可以这样做。如果这个答案不完全正确,请不要犹豫,对此发表评论。
我为类似的问题折腾了一天多。我的项目依赖于一个模块 A,该模块本身由 Webpack(我自己编写的)捆绑在一起。我从 A 外部化了 React(声明它是一个 commonjs2 模块)。这将从库包中排除 React 文件。
我的主程序 运行ning 在 Electron Renderer 进程中,也使用 React。我让 Webpack 将 React 包含到包中(没有特殊配置)。
但是,由于 运行time 环境中有两个 React 实例,这产生了 'hooks' 问题。
这是由这些事实造成的:
- module A 'requires' React,这是由Electron的模块系统解决的。所以 Electron 从 node_modules;
获取 React
- 主程序依赖于 Webpack 运行时间 'load' 从包本身做出反应。
- Electron 和 Webpack 运行time 都有自己的模块缓存...
我的解决方案是也从主程序中外部化 React。这样,主程序和模块 A 都从 Electron 获取它们的 React - 内存中的单个实例。
我尝试了任意数量的别名,但这并没有解决问题,因为别名只为在哪里可以找到模块代码的问题提供方向。对于多模块缓存的问题没有任何作用!
如果您 运行 使用无法控制的模块解决此问题,请了解 React 是否以及如何被外部化。如果它没有被外部化,我认为你无法在 Electron 的上下文中解决这个问题。如果它被外部化为一个全局的,将 React 放入你的 .html 文件并让你的主程序也依赖于它。
我正在尝试尽可能简单地做到这一点,我研究了一段时间的 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 配置有一个解决方案。
提前感谢您的帮助:)
我找到了解决方案。发生这种情况是因为 /common 和 /electron 之间的 React 实例不同。
想法是添加一个别名,像这样:
'react': Path.resolve('./node_modules/react')
当然,对于需要完全在同一个实例上的其他模块也可以这样做。如果这个答案不完全正确,请不要犹豫,对此发表评论。
我为类似的问题折腾了一天多。我的项目依赖于一个模块 A,该模块本身由 Webpack(我自己编写的)捆绑在一起。我从 A 外部化了 React(声明它是一个 commonjs2 模块)。这将从库包中排除 React 文件。
我的主程序 运行ning 在 Electron Renderer 进程中,也使用 React。我让 Webpack 将 React 包含到包中(没有特殊配置)。
但是,由于 运行time 环境中有两个 React 实例,这产生了 'hooks' 问题。
这是由这些事实造成的:
- module A 'requires' React,这是由Electron的模块系统解决的。所以 Electron 从 node_modules; 获取 React
- 主程序依赖于 Webpack 运行时间 'load' 从包本身做出反应。
- Electron 和 Webpack 运行time 都有自己的模块缓存...
我的解决方案是也从主程序中外部化 React。这样,主程序和模块 A 都从 Electron 获取它们的 React - 内存中的单个实例。
我尝试了任意数量的别名,但这并没有解决问题,因为别名只为在哪里可以找到模块代码的问题提供方向。对于多模块缓存的问题没有任何作用!
如果您 运行 使用无法控制的模块解决此问题,请了解 React 是否以及如何被外部化。如果它没有被外部化,我认为你无法在 Electron 的上下文中解决这个问题。如果它被外部化为一个全局的,将 React 放入你的 .html 文件并让你的主程序也依赖于它。