我的electron教程系列
electron教程(一): electron的安装和项目的创建
electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范
electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
electron教程(二): http服务器, ws服务器, 子进程管理
electron教程(三): 使用ffi-napi引入C++的dll
electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
引言
这一篇将介绍:
1. 如何将electron替换为TypeScript.
2. 如何使用VSCode调试TypeScript.
3. 如何使用ESLint插件来检查TypeScript代码.
注: TS是TypeScript的简称, 在本文中, 这两个名字的所指代的内容完全相同.
TS版本electron
1. 部署node.js+electron环境
按步骤完成electron教程(一): electron的安装和项目的创建所介绍的内容.
2. 安装TypeScript
在项目根目录, 执行指令:
npm install typescript -g
之后执行指令:
npm install @types/node --save-dev
此时TS就已经安装完成了
3. 创建TypeScript编译用配置文件
首先要知道，纯粹的TS源码是不能运行和调试的。
当我们要运行TS源码时，其实是利用TS源码生成了对应的JS源码, 以及一个sourcemap文件, 该文件保存着位置信息, 也就是转换后的JS代码的每一个位置, 所对应的转换前的TS位置.
将.ts文件转换为.js文件所用的命令是tsc, 这条命令源自我们刚才安装的TypeScript编译器(npm install typescript -g).
例如在hello.ts文件所在的目录执行如下命令后:
tsc hello.ts
一旦编译成功，就会在相同目录下生成hello.js和hello.js.map文件.
你也可以通过命令参数/修改配置文件来修改默认的输出名称和目录等.
现在我们通过修改配置文件来对tsc编译进行配置.
在项目根目录下, 创建tsconfig.json配置文件, 内容如下:
{ "compilerOptions": { "module": "commonjs", "target": "es2019", "noImplicitAny": false, // 在表达式和声明上有隐含的'any'类型时报错, 最好之后改成true "sourceMap": true, "outDir": "./dist", // 输出目录 "baseUrl": ".", "paths": { "*": ["node_modules/*"] } }, "include": [ "src/**/*" ] } 可以看到这里指定了dist目录为输出目录, 而来源是src目录,
它指明了: 将src目录下所有.ts文件, 编译为.js文件, 并且将.js文件, 放置在dist目录中, 其二级目录和多级目录, 和src目录保持一致.
4. 修改package.json, 添加src命令
修改package.json文件中的script脚本, 如下:
"scripts": { "build": "tsc", "watch": "tsc -w", "start": "npm run build && electron ./dist/main.js" }, 可以看到, 主要修改有3处:
添加
build脚本, 内容为"tsc".
即在当前目录运行tsc命令, 而tsc命令会依据刚才创建的tsconfig.json配置文件进行编译.添加了
watch脚本, 用于 // todo修改
start脚本.
脚本内容分为两段, 用&&隔开.
第一段为在当前命令执行npm run build指令, 也就是运行build脚本.
第二段为electron ./dist/main.js, 即用electron启动dist目录下的main.js文件. 注意此时main.js文件位于dist目录, 因为该文件是tsc自动生成的, 生成在了dist目录中.
5. 创建preload.ts文件
在项目的src目录下, 创建preload.ts, 内容如下:
// All of the Node.js APIs are available in the preload process. // It has the same sandbox as a Chrome extension. window.addEventListener("DOMContentLoaded", () => { const replaceText = (selector: string, text: string) => { const element = document.getElementById(selector); if (element) { element.innerText = text; } }; for (const type of ["chrome", "node", "electron"]) { replaceText(`${type}-version`, (process.versions as any)[type]); } });
6. 创建main.ts文件
此时, 我们删除步骤1中在src目录下创建的main.js, 我们不再需要这个.js文件, 取而代之的是, main.ts文件, 内容如下:
import {app, BrowserWindow} from 'electron'; import * as path from 'path'; let mainWindow: Electron.BrowserWindow; /** * */ function createWindow(): void { // Create the browser window. mainWindow = new BrowserWindow({ height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), }, width: 800, }); // and load the index.html of the app. mainWindow.loadFile(path.join(__dirname, '../html/index.html')); // Open the DevTools. mainWindow.webContents.openDevTools(); // Emitted when the window is closed. mainWindow.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = null; }); } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow); // Quit when all windows are closed. app.on('window-all-closed', () => { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // On OS X it"s common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (mainWindow === null) { createWindow(); } }); // In this file you can include the rest of your app"s specific main process // code. You can also put them in separate files and require them here.
7. 运行electron
此时, 我们已经完成了对electron的升级, TS版electron已经完工.
执行指令:
npm start
如果编译通过, 就会在dist目录下生成正确的main.js文件, main.js.map文件, preload.js文件和preload.js.map文件.
紧接着, electron程序自动启动.
使用VSCode调试TypeScript
1. 配置VSCode调试JavaScript
按步骤完成使用VSCode调试启动项目所介绍的内容.
2. 增加TypeScript配置
修改.vscode目录下的launch.json配置文件.
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Electron JS", // 配置方案名字, 左下角可以选 "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "program": "${workspaceFolder}/src/mainJS.js", // electron入口 "protocol": "inspector" // 默认的协议是legacy，该协议导致不进入断点 }, { "type": "node", "request": "launch", "name": "Electron TS", // 配置方案名字, 左下角可以选 "program": "${workspaceFolder}/dist/main.js", // 这里要写编译后的js文件, 即electron入口 "preLaunchTask": "tsc: build - tsconfig.json", "sourceMaps": true, // 必须为true "outFiles": ["${workspaceFolder}/**/*.js"], "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "protocol": "inspector" // 默认的协议是legacy，该协议导致不进入断点 } ] } 我们在原来的基础上, 增加了TypeScript的调试配置方案, 取名为Electron TS.
3. 启用TypeScript配置
重新启动VSCode, 保证已经将项目目录复制到了VSCode工作区.
按照如下步骤, 启用ELectron TS配置方案.
此时, VSCode会自动启动调试(F5). 如果你事先打了断点, 将进入断点, 如果没有打断点, 会直接启动electron程序.
使用ESLint插件来检查TypeScript代码
1. 部署node.js+electron环境
按步骤完成安装ESLint代码检查工具, Google JavaScript Style Guide所介绍的内容.
2. 安装TypeScript的ESLint依赖
执行指令:
yarn add @typescript-eslint/parser --save-dev
执行指令:
yarn add @typescript-eslint/eslint-plugin --save-dev
3. 修改VSCode配置文件setting.json
通过快捷键cmd + shift + P打开搜索, 输入setting, 按照图中所示, 选中首选项: 打开设置:
在setting.json中, 添加如下内容:
"eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true } ]
4. 修改ESLint配置文件.eslintrc.js
将.eslintrc.js修改`为如下内容:
module.exports = { "extends": ["google", "plugin:@typescript-eslint/recommended"], "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "parserOptions": { "ecmaVersion": 2018 }, "env": { "es6": true }, rules: { "no-console": "off", "@typescript-eslint/indent": ["error", 2], "linebreak-style": ["error","windows"], } };
5. 重启VSCode
重启后, ESLint生效.