react入口文件_Electron+React+TypeScript+Webpack环境搭建

前言

本文将介绍如何从零开始搭建electron+react+typescript+webpack环境。

在这里，我们不使用create-react-app等脚手架。

为什么呢？

因为脚手架意味着重，意味着很多用不到的东西，意味着你不知道自己装了些什么东西。同时，也不利于我们学习，我们可以在开始只搭一个最基础的架子，以后用到什么东西，再往里面添加。

环境

操作系统为windows7

node版本为v9.6.0

初始化工程

创建工程

mkdir myapp && cd myapp

初始化

npm init

依赖安装

安装webpack

npm i -D webpack@4.36.1

安装React和Types中React的声明文件

npm i --S react@16.8.6 react-dom@16.8.6 @types/react@16.8.23 @types/react-dom@16.8.4

安装TypeScript，ts-loader和source-map-loader

npm i -D typescript@3.5.3 ts-loader@6.0.4 source-map-loader@0.2.4

ts-loader可以让Webpack使用TypeScript的标准配置文件tsconfig.json编译TypeScript代码。

source-map-loader 允许webpack保持跨库的 source maps 数据连续性，从而保持调试的简易性。

添加TypeScript配置文件

我们想将TypeScript文件整合到一起 - 这包括我们写的源码和必要的声明文件。

我们需要创建一个tsconfig.json文件，它包含了输入文件列表以及编译选项。在工程根目录下新建文件tsconfig.json文件，添加以下内容：

{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es5",
      "jsx": "react"
    },
    "include": [
      "./src/**/*"
    ],
    "exclude": [
      "node_modules",
      "dist"
    ]
}

详细介绍可参考官方文档：

https://www.tslang.cn/docs/handbook/tsconfig-json.html

写点什么

好了，目前为止，我们可以写点什么了。

添加目录：

mkdir src && cd src
mkdir components && cd components

在components目录下添加Hello.tsx文件，代码如下：

import * as React from 'react';

export interface Props {
  name: string;
  enthusiasmLevel?: number;
}

export default class Hello extends React.Component<Props, object> {
  render() {
    const { name, enthusiasmLevel = 1 } = this.props;

    if (enthusiasmLevel <= 0) {
      throw new Error('You could be a little more enthusiastic. :D');
    }

    return (
      <div className="hello">
        <div className="greeting">
          Hello {name + getExclamationMarks(enthusiasmLevel)}
        </div>
      </div>
    );
  }
}

function getExclamationMarks(numChars: number) {
  return Array(numChars + 1).join('!');
}

在src目录下增加index.tsx文件，代码如下：

import * as React from "react";
import * as ReactDOM from "react-dom";

import Hello from "./components/Hello";

ReactDOM.render(
  <Hello name="TypeScript" enthusiasmLevel={10} />,
  document.getElementById('root') as HTMLElement
);

增加index.html文件，用来显示我们的组件，代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>demo</title>
</head>

<body>
  <div id="root"></div>
  <script src="./dist/bundle.js"></script>
</body>

</html>

添加Webpack配置文件

我们在根目录下创建webpack.common.config.js文件，并添加如下内容：

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },

  devtool: "source-map",

  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

  module: {
    rules: [
      { test: /.tsx?$/, loader: "ts-loader" },

      { enforce: "pre", test: /.js$/, loader: "source-map-loader" }
    ]
  },

  plugins: [
  ],
};

具体配置这里就不讲了，大家可以参考官方文档：

https://www.webpackjs.com/concepts/

好了，到这里React，TypeScript和Webpack已经配置好了，大家可以执行如下命令尝试一下：

webpack --config webpack.common.config.js

然后打开index.html就可以看到我们写的页面了。

如果成功了，我们就继续往下看吧，接下来将介绍Electron的配置。

添加main.tsx文件

在根目录下添加main.tsx文件，用来初始化和配置Electron，代码如下：

import { app, BrowserWindow, Menu, MenuItem, dialog } from'electron';

let mainWindow: BrowserWindow = null;
let createWindow = function() {
    mainWindow = new BrowserWindow({
      width:800, 
      height:600, 
      webPreferences: {
        // nodeIntegration: true
      }
      // fullscreenable:false,
      // maximizable:false
    })
    mainWindow.webContents.openDevTools()
    mainWindow.loadFile('index.html')
    mainWindow.on('closed', function() {
        mainWindow = null
    })
}
app.on('ready', createWindow)
app.on('window-all-closed', ()=>{
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

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

代码详细信息可参考官方文档：

https://electronjs.org/docs/tutorial/first-app#electron-development-in-a-nutshell

修改tsconfig.json配置

将新增的main.tsx文件加入include配置中，修改完毕如下：

{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es5",
      "jsx": "react"
    },
    "include": [
      "./src/**/*",
      "main.tsx"
    ],
    "exclude": [
      "node_modules",
      "dist"
    ]
}

修改package.json配置

1.由于main.tsx文件需要编译后才能使用，我们应该将main配置项指向编译后的目录。

2.增加prestart配置，集成webpack指令。

3.增加start配置，用来启动Electron。

修改后如下：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "prestart": "webpack --config webpack.common.config.js",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.7",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "@types/react": "^16.8.23",
    "@types/react-dom": "^16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

修改webpack.common.config.js配置

由于增加了main文件作为Electron的入口，再加上index文件作为React的入口，现在一共两个入口，需要修改entry配置。

同时，我们需要在配置中指定打包应用类型，将target设置为electron-renderer。修改后如下：

module.exports = {
    mode: "development",
    entry: {
      "bundle": ["./src/index.tsx"],
      "main": ["./main.tsx"]
    },
    output: {
      filename: "[name].js",
      path: __dirname + "/dist"
    },
  
    devtool: "source-map",
  
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json"]
    },
  
    module: {
      rules: [
        { test: /.tsx?$/, loader: "ts-loader" },
  
        { enforce: "pre", test: /.js$/, loader: "source-map-loader" }
      ]
    },
  
    plugins: [
    ],

    target: "electron-renderer"
};

至此，所有配置已经完成了，让我们运行一下吧。

运行

执行如下命令：

npm start

如有问题，可以参考示例代码。

好了，大家点个赞再走吧~

示例代码：

https://github.com/gaonee/myapp

参考链接：

从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

https://www.jianshu.com/p/63710a444827