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/tut
orial/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/63710a444
827