react+electron使应用窗口相互独立

听说99%的前端同学都来这里充电吖！

欢迎关注前端小北，我是亚北！

前两篇文章我们介绍了react+electron构建桌面应用和如何加载本地的静态资源。然后现在有个需求，是要使应用里的弹窗独立于主窗口，今天来实现这个需求。

在之前我们知道electron通过main.js这个文件里new一个BrowserWindow来新建一个窗口，同样的，这个应用的弹窗，也可以通过new一个BrowserWindow来新建：

const { app, BrowserWindow } = require('electron')
function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
      preload: `${__dirname}/preLoad.js`
  // 并且为你的应用加载index.html
  win.loadURL(url.format({
   pathname: path.join(__dirname, 'dist/index.html'),
   protocol: 'file:',
   slashes: true
  // 创建第二个窗口
  const win2 = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
      preload: `${__dirname}/preLoad.js`
}

到这里新的弹窗已经有了，那里面的内容要如何填充呢？我们可以参照第一个窗口的做法用win.loadURL()来决定加载html文件。但是react项目打完包只有一个index.html啊，新的窗口应该从哪里加载html呢。接下来我们就来解决这一问题。

首先，在config/webpack.config.js里找到entry。如果没有config文件夹需要先运行命令把我们的config配置文件给暴露出来：

npm run eject

如果你运行了之后报如下错误：

这是因为我们使用脚手架创建一个项目的时候，自动给我们增加了一个.gitignore文件，但是我们本地却没有文件仓库。需要在终端输入如下命令：

git add .
git commit -am "Save before ejecting"

就是用git将项目添加到我们的本地仓库,接下来再执行npm run eject就没有问题了。

然后项目下会多出两个文件夹，config和scripts，我们开发中一般只需关心config文件下的webpack.config.js，paths.js，webpackDevServer.config.js，其他多出来的文件不要管他。下面就是config/webpack.config.js里entry的代码：

这里面就只是显示index的路径，我们需要在config/paths.js里添加我们几个模块的路径：

module.exports = {
  appIndexJs: resolveModule(resolveApp, 'src/index/index'),
  // 添加的模块路径
  appModalJs: resolveModule(resolveApp, 'src/Modal/index'),
}

修改config/webpack.config.js的entry为对象形式：

entry: {
      index: [paths.appIndexJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean),
      modal: [paths.appModalJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean)
    },

添加html配置，同样在config/paths.js里面添加：

appHtml: resolveApp('public/index.html'),
// 新增的html
appModalHtml: resolveApp('public/modal.html'),

config/paths.js里完整的module.exports如下：

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  // 新增的html
  appModalHtml: resolveApp('public/modal.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  // 添加的模块路径
  appModalJs: resolveModule(resolveApp, 'src/Modal/index'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  appJsConfig: resolveApp('jsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrlOrPath,
};

在config/webpack.config.js里处理html，在plugins中将原来的HtmlWebpackPlugin进行配置修改，添加一个filename和chunks：

Object.assign(
            filename: 'index.html',// 添加filename
            chunks: ['index'] //添加chunks
          },

对之前配置的每个页面都复制一个改一下它的template和filename以及chunks:

new HtmlWebpackPlugin(
        Object.assign(
            inject: true,
            template: paths.appHtml,
            filename: 'index.html',
            chunks: ['index']
          isEnvProduction
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
            : undefined
      new HtmlWebpackPlugin(
        Object.assign(
            inject: true,
            template: paths.appTicketHtml,
            filename: 'ticket.html',
            chunks: ['ticket']
          isEnvProduction
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
            : undefined
      )

然后我们运行npm run build来对react项目进行打包。如果build后报Cannot read property 'filter' of undefined，那么就需要把new ManifestPlugin里的generate属性删掉，这个问题我不是很清楚，从网上也是只搜到了解决方案而没有搜到原因，如果有前端小伙伴明白其中的原因，希望可以指点一二，不胜感激！

至此，我们的react项目已经可以打包出两个html文件和其对应的资源了，我们就用win2.loadURL()使其拥有两个独立的窗口。如下：

 // 创建第二个窗口
  const win2 = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
      preload: `${__dirname}/preLoad.js`
  win2.loadURL(url.format({
   pathname: path.join(__dirname, 'dist/index.html'),
   protocol: 'file:',