Electron 从零到一搭建--编写基础框架（Electron + React + Mobx + Webpack4 + Typescript）

时间  2019-11-16
标签 electron 搭建 编写 基础 框架 react mobx webpack4 webpack typescript 栏目 React 繁體版
原文   原文链接

介绍

这篇文章，主要的是讲述如何搭建Electron项目，这里会用到上篇文章：Webpack4+node+typescript+hotReload 搭建的框架，这里，你们能够先clone下来：javascript

git clone git@github.com:spcBackToLife/node-webpack4-ts-demo.git
复制代码

基础框架的搭建主要有如下部份内容，基本每部分都是单独的一篇文章：css

  • 基础node环境搭建: webpack4 + node + typescript
  • Electron集成: 单窗口 + 主进程、渲染进程在dev、prod环境的webpack处理。
  • React 集成
  • Mobx 集成 （因为redux比较重，dva比较麻烦，最后选择Mobx作react状态管理会更合适）
  • Electron集成: 多窗口 + 窗口渲染进程webpack处理。
  • 数据缓存、存储服务管理
  • 应用基础功能服务设计：录屏、截屏
  • 应用集成三方环境设计：Python环境
  • 应用webview注入js设计
  • 运行日志集成

Electron 集成 - 单窗口 + 主进程、渲染进程在dev、prod环境的webpack处理

关于Electron基础集成请看：Electron 入门简介，此处再也不累赘，照作就行。html

  1. 添加Electron依赖java

    ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ yarn add electron@6.0.0 -D
复制代码

  2. src下新建：main-process、render-process文件夹，将main.ts放置到main-process中。node

    • main-process #主进程文件夹
    • render-process #渲染进程文件夹

关于主进程、渲染进程相关内容，请看文章：Electron-主进程、渲染进程 强烈建议先读完这个概念再来看这篇文章下面内容，除非你很是熟悉Electron，已经了解主进程、渲染进程。react

  1. src下新建：index.htmlwebpack

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>electron-sprout</title>
        <script> ( function() { if (!process.env.HOT) { // production环境下，加载打包后的style.css，css处理在webpack里。 const link = document.createElement('link'); link.ref = 'stylesheet'; link.href = '../dist/style.css'; } } ) </script>
    </head>
    <body>
        <div id="root">
          先写个hellowold在这，集成react的时候清掉
        </div>
    </body>
    <script> { const scripts = []; const port = process.env.PORT || 1212; // 开发环境下，加载webpack-dev-server下的js。 // 生产环境下，加载打包后的js scripts.push( (process.env.HOT) ? 'http://localhost:' + port + '/dist/renderer.dev.js' : '../dist/renderer.prod.js' ); // 将须要加载的js写入页面，进行加载。 document.write( scripts .map(script => `<script defer src="${script}"><\/script>`) .join('') ); } </script>
</html>
复制代码

  2. main-process目录下新建main-window.ts:git

    import { BrowserWindow } from 'electron';

export const createWindow = () => {
  const win = new BrowserWindow({
    show: true,
    width: 890,
    height: 556,
    webgl: true,
    frame: true,
    transparent: false,
    webPreferences: {
      webSecurity: true,
      allowRunningInsecureContent: false,
      nativeWindowOpen: false,
      nodeIntegration: true,
    },
  });
  win.webContents.openDevTools();
  win.loadURL(`file://${__dirname}/../index.html`);
};

复制代码

如上代码所见：咱们使用electron提供的BrowserWindow打开了一个系统窗口，这个窗口相似于浏览器的一个tab，能够采用loadURL加载一个网页或者本地文件index.html。api具体信息能够查看Electron 官网github

  1. 将main.ts的测试代码都删除，换上以下：web

    import { app } from 'electron';
import { createWindow } from './main-window';

app.on('ready', async () => {
  createWindow(); // 建立一个系统应用窗口
});

app.on('window-all-closed', () => app.quit()); // 全部窗口关闭的时候退出应用

复制代码

  2. 配置webpack处理主进程、渲染进程js。

关于主进程、渲染进程相关内容，请看文章：Electron-主进程、渲染进程

首先咱来配置个基础的webpack，用于处理，ts\js\css的: webpack.config.base.js，关于webpack相关内容，本身去学哈，没写文章，不学就照我这个配也行，我配的也不专业，哈哈，能用。

新建文件夹config/webpack,在下面新建文件：webpack.config.base.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

const isProd = process.env.NODE_ENV === 'production';
const cssLoader = {
  loader: 'css-loader',
  options: {
    modules: true,
    importLoaders: 1,
    localIdentName: '[local]__[hash:6]',
  },
};
// const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  target: 'electron-main', // 会在主进程和渲染进程文章中说起这个是什么，请看第6点开头的那个文章指向。
  resolve: {
    // changed from extensions: [".js", ".jsx"]
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // 须要处理的文件类型
  },
  module: {
    rules: [
      {
        test: /\.scss$/, // css loader配置
        use: [
          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
          cssLoader,
          'sass-loader',
        ],
      },
      {
        test: /\.tsx?$/, //tsx处理
        exclude: /node_modules/,
        use: [

          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
          // {
          // loader: 'awesome-typescript-loader',
          // },
        ],
      },
      // Common Image Formats
      {
        test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/, // 图片路径处理
        use: 'url-loader',
      },
      // addition - add source-map support
      { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }, // 报错的source-map
    ],
  },
  node: {
    __dirname: false, // 处理打包后dirname filename变量路径不对问题
    __filename: false,
  },
  devtool: 'source-map',
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/), // 使用moment组件的话，用这个减小moment库体积，这个做为基础设施的一部分吧
    new webpack.NamedModulesPlugin(), // 用于启动HMR（hot module reload）时能够显示模块的相对路径
  ],
};
复制代码

再来处理主进程js。新建文件config/webpack/webpack.config.main.prod.babel.js(关于为何要区分主进程、渲染进程分别处理js， 第6点提到的那个文章里有哈。),因为主进程开发环境无需作处理，直接能够执行,因此只有production的环境下须要处理js。

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const baseConfig = require('./webpack.config.base');

module.exports = merge.smart(baseConfig, {
  devtool: 'source-map',
  mode: 'production',
  entry: './src/main.ts',
  output: {
    path: path.join(__dirname, '../../'),
    filename: './dist/main.prod.js',
  },
  optimization: {
    minimizer: process.env.E2E_BUILD
      ? []
      : [
        new TerserPlugin({  // 压缩Javascript
          parallel: true,
          sourceMap: true,
          cache: true,
        }),
      ],
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'production',
    }),
  ],
});

复制代码

而后，咱们再来处理渲染进程的js，在开发环境下，为了改了代码可以自动刷新页面，热更新，咱们用了webpack-dev-server作处理，所以处理渲染进程js的时候会分开发环境和生成环境，有不一样的配置文件。首先来生成开发环境的吧。 新建文件config/webpack/webpack.config.renderer.dev.babel.js

const path = require('path');
const merge = require('webpack-merge');
const { spawn } = require('child_process');
const webpack = require('webpack');
const baseConfig = require('./webpack.config.base');

const port = process.env.PORT || 1212;
const publicPath = `http://localhost:${port}/dist`;
module.exports = merge.smart(baseConfig, {
  devtool: 'inline-source-map',
  mode: 'development',
  target: 'electron-renderer',
  entry: {
    renderer: [
      require.resolve('../../src/render-process/index.tsx'),
      // 'react-hot-loader/patch', // 集成react的时候再开
      `webpack-dev-server/client?http://localhost:${port}/`,
      'webpack/hot/only-dev-server',
    ],
  },
  output: {
    publicPath: `http://localhost:${port}/dist`,
    filename: '[name].dev.js',
  },
  plugins: [
    new webpack.NamedModulesPlugin(), // 用于启动HMR时能够显示模块的相对路径
    new webpack.HotModuleReplacementPlugin(), // hot module replacement 启动模块热替换的插件
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
    new webpack.LoaderOptionsPlugin({
      debug: true,
    }),
  ],
  devServer: {
    port,
    publicPath,
    compress: true,
    noInfo: true,
    stats: 'errors-only',
    inline: true,
    lazy: false,
    hot: true,
    headers: { 'Access-Control-Allow-Origin': '*' },
    contentBase: path.join(__dirname, 'dist'),
    watchOptions: {
      aggregateTimeout: 300,
      ignored: /node_modules/,
      poll: 100,
    },
    historyApiFallback: {
      verbose: true,
      disableDotRule: false,
    },
    before() {
      if (process.env.START_HOT) {
        console.log('Starting Main Process...');
        spawn('npm', ['run', 'start-main-dev'], { // 在运行这个server以前会运行package.json里的`start-main-dev`指令，文章下面会配置。
          shell: true,
          env: process.env,
          stdio: 'inherit',
        })
          .on('close', code => process.exit(code))
          .on('error', spawnError => console.error(spawnError));
      }
    },
  },
});

复制代码

最后贴一下渲染进程的production环境的webpack吧： 新建文件config/webpack/webpack.config.renderer.prod.babel.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const baseConfig = require('./webpack.config.base');

module.exports = merge.smart(baseConfig, {
  devtool: 'source-map',
  mode: 'production',
  target: 'electron-renderer',
  entry: {
    renderer: require.resolve('../../src/render-process/index.tsx'),
  },
  output: {
    path: path.join(__dirname, '..', '../dist'),
    publicPath: './dist/',
    filename: '[name].prod.js',
  },
  optimization: {
    minimizer: process.env.E2E_BUILD
      ? []
      : [
        new TerserPlugin({
          parallel: true,
          sourceMap: true,
          cache: true,
        }),
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            map: {
              inline: false,
              annotation: true,
            },
          },
        }),
      ],
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'production',
    }),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
      openAnalyzer: process.env.OPEN_ANALYZER === 'true',
    }),
  ],
});

复制代码
  1. 还记得咱再运行那个demo的时候使用了ts-node./src/main-process/main.ts运行可让咱们直接用node环境ts。但是目前尚未ts-electron让咱们直接用electron运行ts。所以咱们须要用babel把咱们的运行入口处理下。咱们只须要config目录下新建：babel-entry-config.js
module.exports = {
  extensions: ['.js', '.ts', '.tsx'],
  presets: [
    [
      '@babel/preset-env',
      {
        targets: { electron: require('electron/package.json').version },
        useBuiltIns: 'usage',
        modules: 'commonjs',
      },
    ],
    '@babel/preset-typescript',
  ],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
  ],
};

复制代码

而后src下新建文件entry.dev.js：

require('@babel/register')(require('../config/babel-entry-config'));
require('./main-process/main');
复制代码

最后咱修改下package.json的运行命令:

...
  "start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r @babel/register ./src/entry.dev.js",
  "dev": "cross-env START_HOT=1 webpack-dev-server --config ./config/webpack/webpack.config.renderer.dev.babel.js"
  ...
复制代码
  1. 咱还差最后一步就能够运行了，在render-process下新建一个index.tsx。关于render-process新建的tsx是什么意思，请看上面说到的主进程和渲染进程文章：Electron-主进程、渲染进程
console.log('hello 秋泽雨');
复制代码

搞了半天，我们终于能够yarn dev 启动一下了，若是猜的没错，咱确定运行散架，由于还有些上面用到的依赖没装，哈哈：

yarn add cross-env webpack-dev-server webpack-merge mini-css-extract-plugin @babel/register @babel/plugin-proposal-decorators @babel/preset-typescript -D
复制代码

最后终于能够看到窗口以及窗口加载的html，以及html加载的js输出的console.log: 'hello 秋泽雨'。

总体从yarn dev以后的运行流程全解图以下：

''

此篇demo: github.com/spcBackToLi…

下一篇会讲：react+mobx集成

有问题欢迎加群沟通哦：

''
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程