Electron、Typescript、React和Webpack入门指南

尼耳多
689 阅读4分钟

如果你今天需要建立一个桌面应用程序，Electron是一个越来越普遍的选择。它是跨平台的，并且使用你可能已经知道的相同的网络技术来构建。

我们是SitePen公司的Electron的长期用户，以前曾谈到过用Dojo设置Electron。在这里，我们将探讨一种设置Electron的意见方法：TypeScript、React和Webpack。

我们将从一个基本的Electron项目开始，逐步把它建成一个企业级的解决方案。

初始化一个空的Electron项目

首先，我们需要一个普通的Electron项目。它将与官方的Electron First App教程和Electron Quickstart资源库几乎相同。

Electron有两个独立的进程：一个是主进程，也就是Electron本身；另一个是渲染进程，本质上是Electron在基于Chromium的浏览器中加载的网页。

安装依赖性
npm init -y
npm install --save-dev electron
Electron（主）入口点
// src/electron.js
const { app, BrowserWindow } = require('electron');

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // and load the index.html of the app.
  win.loadFile('index.html');
}

app.on('ready', createWindow);
Electron（渲染）入口点
<!-- // src/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <div id="app">
      <h1>Hello World!</h1>
    </div>
  </body>
</html>

我们可以用npx electron src/electron.js 来运行这个应用程序。我们将在我们的package.json ，作为一个脚本添加。

// package.json
"scripts": {
  "start": "electron src/electron.js"
}

添加TypeScript

这个模板式的JavaScript也是有效的TypeScript，所以让我们把src/electron.js 改名为electron.ts 。我们只需要安装TypeScript编译器并对其进行配置。

安装依赖项
npm install --save-dev typescript
TypeScript配置
touch tsconfig.json
更新npm脚本
"scripts": {
  "build": "tsc src/electron.ts"
}

添加Webpack

接下来我们将设置Webpack来优化我们的应用程序。Webpack的配置由一个入口点的数组组成。Webpack通过将文件（及其依赖关系）传递给一个加载器来处理每个入口点。装载器是通过规则选择的，通常每个文件的扩展名都有一个装载器。最后，Webpack将输出转储到一个指定的位置。

我们将为我们的电子主进程创建一个单一的入口点，为所有*.ts 文件添加一个加载器以通过TypeScript编译器，并告诉Webpack将输出与源文件一起转储。

安装依赖项
npm install --save-dev webpack webpack-cli ts-loader
Webpack配置
// webpack.config.js
module.exports = [
  {
    mode: 'development',
    entry: './src/electron.ts',
    target: 'electron-main',
    module: {
      rules: [{
        test: /\.ts$/,
        include: /src/,
        use: [{ loader: 'ts-loader' }]
      }]
    },
    output: {
      path: __dirname + '/src',
      filename: 'electron.js'
    }
  }
];

下面是配置中每一块的细分：

  • mode: develop 开发构建（相对于生产而言）。
  • entry: './src/electron.ts 入口点的位置
  • target: 'electron-main' 指定要针对哪个环境；Webpack特别了解电子主进程。
  • test: /\.ts$/ 指定此规则应匹配所有以 为扩展名的文件。.ts
  • include: /src/ 指定在 内的所有文件都应考虑匹配此规则。src
  • use: [{ loader: 'ts-loader' }] 指定当此规则匹配时要使用哪个（些）加载器。
  • path: __dirname + '/src' 放置所有输出文件的目录。
  • filename: 'electron.js' 主要的输出捆绑文件名。
更新npm脚本
// package.json
"scripts": {
  "build": "webpack --config ./webpack.config.js",
  "start": "npm run build && electron ./src/electron.js"
}

添加React

React的渲染过程不需要知道它是在Electron上下文中使用的，所以设置React与设置一个普通的React项目相似。

安装依赖项
npm install --save-dev react react-dom @types/react @types/react-dom
React入口点
// src/react.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const Index = () => {
    return <div>Hello React!</div>;
};

ReactDOM.render(<Index />, document.getElementById('app'));
TypeScript配置

我们的渲染入口点是.tsx ，而不是.ts 。TypeScript编译器内置了对TSX（The TypeScript equivalent of JSX）的支持，但我们需要告诉TypeScript如何处理我们的TSX资源。毫不奇怪，我们使用的是React TSX品种。

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react"
  }
}

接下来，我们将在Webpack的配置中创建一个新的入口点。Webpack将处理我们的入口点（及其依赖性），并通过html-webpack-plugin将结果加载到我们的index.html 。

安装依赖项
npm install --save-dev html-webpack-plugin
Webpack 配置
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [
  ...
  {
    mode: 'development',
    entry: './src/react.tsx',
    target: 'electron-renderer',
    devtool: 'source-map',
    module: { rules: [{
      test: /\.ts(x?)$/,
      include: /src/,
      use: [{ loader: 'ts-loader' }]
    }] },
    output: {
      path: __dirname + '/dist',
      filename: 'react.js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ]
  }
];

这个配置与我们的主进程类似，但有一些新的项目。

  • target: 'electron-renderer' 指定目标环境；Webpack特别了解电子渲染器进程。
  • plugins ... 指定在构建过程中使用的任何插件。插件与加载器的不同之处在于，插件在捆绑层面上操作，并且可以通过钩子与构建过程进行更深入的整合。装载器是在文件层面上操作的。 会自动地在指定的 文件中添加对输出捆绑包的引用。HtmlWebpackPlugin template

由于我们的渲染器文件的输出路径不再是src 目录，我们已经指示Webpack将我们的资源放到一个新的dist 目录中。让我们对主进程的配置做同样的处理：

// webpack.config.js
...
  output: {
    path: __dirname + '/dist',
    filename: 'electron.js'
  }

由于我们的输出文件现在在dist 目录中，我们需要更新我们的npm脚本，使之与之相匹配：

"scripts": {
  ...
  "start": "npm run build && electron ./dist/electron.js"
}

总结

就这样吧!事实证明，Electron很适合运行主要的前端框架，而Webpack则很适合一次打包多个东西。整个过程只是需要一点神秘感。

需要帮助创建你的下一个桌面应用程序或确定Electron是否是适合你的方法？请与我们联系，讨论我们可以如何提供帮助

avatar
文章
阅读
粉丝