Webpack4 手动搭建 TypeScript + React + Electron 项目-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个常用的前端打包工具，它可以将多个 JavaScript 文件打包成一个文件，并且支持多种模块化方案。在前端开发中，Webpack 已经成为了不可或缺的工具之一。本文将介绍如何使用 Webpack4 手动搭建 TypeScript + React + Electron 项目。

安装 Webpack4

首先，我们需要安装 Webpack4。可以通过以下命令进行安装：

npm install webpack webpack-cli --save-dev

安装 TypeScript

接下来，我们需要安装 TypeScript。可以通过以下命令进行安装：

npm install typescript ts-loader --save-dev

安装 React

然后，我们需要安装 React。可以通过以下命令进行安装：

npm install react react-dom @types/react @types/react-dom --save-dev

安装 Electron

最后，我们需要安装 Electron。可以通过以下命令进行安装：

npm install electron electron-builder --save-dev

配置 Webpack

接下来，我们需要配置 Webpack。在项目根目录下创建一个 webpack.config.js 文件，然后在该文件中添加以下配置：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: 'electron-main',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

以上配置的含义如下：

entry：指定入口文件。
output：指定输出文件。
target：指定编译目标为 Electron 主进程。
module：指定模块加载器。
resolve：指定文件扩展名。

编写 TypeScript 代码

接下来，我们可以开始编写 TypeScript 代码了。在项目根目录下创建一个 src 目录，然后在该目录下创建一个 main.ts 文件，然后在该文件中添加以下代码：

// javascriptcn.com 代码示例
import { app, BrowserWindow } from 'electron';
import * as path from 'path';

let mainWindow: Electron.BrowserWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

以上代码的含义如下：

import：引入 Electron 的 app 和 BrowserWindow 模块。
createWindow：创建窗口。
mainWindow：窗口对象。
app：应用对象。
loadFile：加载 HTML 文件。
closed：窗口关闭事件。
ready：应用启动事件。
window-all-closed：所有窗口关闭事件。
activate：应用激活事件。

编写 React 代码

最后，我们可以编写 React 代码了。在 src 目录下创建一个 App.tsx 文件，然后在该文件中添加以下代码：

// javascriptcn.com 代码示例
import React from 'react';

export default function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

然后在 index.html 文件中添加以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello, World!</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./renderer.js"></script>
  </body>
</html>

最后，在 src 目录下创建一个 renderer.tsx 文件，然后在该文件中添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

打包应用程序

最后，我们可以使用 Electron Builder 打包应用程序了。可以通过以下命令进行打包：

electron-builder

打包完成后，会在项目根目录下生成一个 dist 目录，其中包含了打包好的应用程序。

总结

本文介绍了如何使用 Webpack4 手动搭建 TypeScript + React + Electron 项目。其中，我们安装了必要的依赖，配置了 Webpack，编写了 TypeScript 和 React 代码，并使用 Electron Builder 打包了应用程序。希望本文对您有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65548c64d2f5e1655de52e82