前言
本文将介绍如何从零开始搭建electron+react+typescript+webpack环境。
在这里，我们不使用create-react-app等脚手架。
为什么呢？
因为脚手架意味着重，意味着很多用不到的东西，意味着你不知道自己装了些什么东西。同时，也不利于我们学习，我们可以在开始只搭一个最基础的架子，以后用到什么东西，再往里面添加。
初始化工程
创建工程
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
render() {
const { name, enthusiasmLevel = 1 } = this.props;
if (enthusiasmLevel <= 0) {<br /> throw new Error('You could be a little more enthusiastic. :D');<br /> }return (<br /> <div className="hello"><br /> <div className="greeting"><br /> Hello {name + getExclamationMarks(enthusiasmLevel)}<br /> </div><br /> </div><br /> );<br /> }<br />}
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(
document.getElementById(‘root’) as HTMLElement
);
增加index.html文件，用来显示我们的组件，代码如下：
<!DOCTYPE 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" }<br /> ]<br /> },
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”
}
}
若有收获，就点个赞吧
0 人点赞
