electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
<h1 id="我的electron教程系列">我的electron教程系列</h1><p>electron教程(一): electron的安装和项目的创建</p>
<p>electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范</p>
<p>electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint</p>
<p>electron教程(二): http服务器, ws服务器, 子进程管理</p>
<p>electron教程(三): 使用ffi-napi引入C++的dll</p>
<p>electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)</p>
<p> </p>
<h1 id="引言">引言</h1>
<p> </p>
<p>这一篇将介绍:</p>
<p>1. 如何将electron替换为<code>TypeScript</code>.<br>
2. 如何使用VSCode调试<code>TypeScript</code>.<br>
3. 如何使用<code>ESLint</code>插件来检查<code>TypeScript</code>代码.</p>
<p>注: <code>TS</code>是<code>TypeScript</code>的简称, 在本文中, 这两个名字的所指代的内容完全相同.</p>
<p> </p>
<h1 id="ts版本electron">TS版本electron</h1>
<p> </p>
<h3 id="1-部署nodejselectron环境">1. 部署node.js+electron环境</h3>
<p>按步骤完成electron教程(一): electron的安装和项目的创建所介绍的内容.</p>
<p> </p>
<h3 id="2-安装typescript">2. 安装TypeScript</h3>
<p>在项目根目录, 执行指令:</p>
<pre><code>npm install typescript -g
</code></pre>
<p>之后执行指令:</p>
<pre><code>npm install @types/node --save-dev
</code></pre>
<p>此时TS就已经安装完成了</p>
<p> </p>
<h3 id="3-创建typescript编译用配置文件">3. 创建TypeScript编译用配置文件</h3>
<p>首先要知道，纯粹的TS源码是不能运行和调试的。</p>
<p>当我们要运行TS源码时，其实是利用TS源码生成了对应的JS源码, 以及一个<code>sourcemap</code>文件, 该文件保存着位置信息, 也就是转换后的JS代码的每一个位置, 所对应的转换前的TS位置.</p>
<p>将<code>.ts</code>文件转换为<code>.js</code>文件所用的命令是<code>tsc</code>, 这条命令源自我们刚才安装的TypeScript编译器(<code>npm install typescript -g</code>).</p>
<p>例如在<code>hello.ts</code>文件所在的目录执行如下命令后:</p>
<pre><code>tsc hello.ts
</code></pre>
<p>一旦编译成功，就会在相同目录下生成<code>hello.js</code>和<code>hello.js.map</code>文件.</p>
<p>你也可以通过命令参数/修改配置文件来修改默认的输出名称和目录等.</p>
<p>现在我们通过修改配置文件来对<code>tsc</code>编译进行配置.</p>
<p>在项目根目录下, 创建<code>tsconfig.json</code>配置文件, 内容如下:</p>
<pre><code>{
"compilerOptions": {
"module": "commonjs",
"target": "es2019",
"noImplicitAny": false, // 在表达式和声明上有隐含的'any'类型时报错, 最好之后改成true
"sourceMap": true,
"outDir": "./dist", // 输出目录
"baseUrl": ".",
"paths": {
"*": ["node_modules/*"]
}
},
"include": [
"src/**/*"
]
}
</code></pre>
<p>可以看到这里指定了<code>dist目录</code>为<code>输出目录</code>, 而来源是<code>src目录</code>,</p>
<p>它指明了: 将<code>src目录</code>下所有<code>.ts</code>文件, 编译为<code>.js</code>文件, 并且将<code>.js</code>文件, 放置在<code>dist目录</code>中, 其二级目录和多级目录, 和<code>src目录</code>保持一致.</p>
<p> </p>
<h3 id="4-修改packagejson-添加src命令">4. 修改package.json, 添加src命令</h3>
<p>修改<code>package.json</code>文件中的<code>script</code>脚本, 如下:</p>
<pre><code> "scripts": {
"build": "tsc",
"watch": "tsc -w",
"start": "npm run build && electron ./dist/main.js"
},
</code></pre>
<p>可以看到, 主要修改有3处:</p>
<ol>
<li>
<p>添加<code>build</code>脚本, 内容为<code>"tsc"</code>.<br>
即在当前目录运行<code>tsc</code>命令, 而<code>tsc</code>命令会依据刚才创建的<code>tsconfig.json</code>配置文件进行编译.</p>
</li>
<li>
<p>添加了<code>watch</code>脚本, 用于 // todo</p>
</li>
<li>
<p>修改<code>start</code>脚本.<br>
脚本内容分为两段, 用<code>&&</code>隔开.<br>
第一段为在当前命令执行<code>npm run build</code>指令, 也就是运行<code>build</code>脚本.<br>
第二段为<code>electron ./dist/main.js</code>, 即用<code>electron</code>启动<code>dist</code>目录下的<code>main.js</code>文件. 注意此时<code>main.js</code>文件位于<code>dist</code>目录, 因为该文件是<code>tsc</code>自动生成的, 生成在了<code>dist</code>目录中.</p>
</li>
</ol>
<p> </p>
<h3 id="5-创建preloadts文件">5. 创建preload.ts文件</h3>
<p>在项目的src目录下, 创建<code>preload.ts</code>, 内容如下:</p>
<pre><code>// 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));
}
});
</code></pre>
<p> </p>
<h3 id="6-创建maints文件">6. 创建main.ts文件</h3>
<p>此时, 我们删除步骤1中在<code>src目录</code>下创建的<code>main.js</code>, 我们不再需要这个<code>.js</code>文件, 取而代之的是, <code>main.ts</code>文件, 内容如下:</p>
<pre><code>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.
</code></pre>
<p> </p>
<h3 id="7-运行electron">7. 运行electron</h3>
<p>此时, 我们已经完成了对electron的升级, <code>TS</code>版electron已经完工.</p>
<p>执行指令:</p>
<pre><code>npm start
</code></pre>
<p>如果编译通过, 就会在<code>dist目录</code>下生成正确的<code>main.js</code>文件, <code>main.js.map</code>文件, <code>preload.js</code>文件和<code>preload.js.map</code>文件.<br>
紧接着, electron程序自动启动.</p>
<p> </p>
<h1 id="使用vscode调试typescript">使用VSCode调试TypeScript</h1>
<p> </p>
<h3 id="1-配置vscode调试javascript">1. 配置VSCode调试JavaScript</h3>
<p>按步骤完成使用VSCode调试启动项目所介绍的内容.</p>
<p> </p>
<h3 id="2-增加typescript配置">2. 增加TypeScript配置</h3>
<p>修改<code>.vscode</code>目录下的<code>launch.json</code>配置文件.</p>
<pre><code>{
"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，该协议导致不进入断点
}
]
}
</code></pre>
<p>我们在原来的基础上, 增加了TypeScript的调试配置方案, 取名为<code>Electron TS</code>.</p>
<p> </p>
<h3 id="3-启用typescript配置">3. 启用TypeScript配置</h3>
<p>重新启动VSCode, 保证已经将项目目录复制到了VSCode工作区.</p>
<p>按照如下步骤, 启用<code>ELectron TS</code>配置方案.</p>
<p><img src="https://silenzio-markdown-image-hosting-service.oss-cn-beijing.aliyuncs.com/%E5%8D%9A%E5%AE%A2%E5%9B%BE%E5%BA%8A/electron%E6%95%99%E7%A8%8B%28%E7%95%AA%E5%A4%96%E7%AF%87%E4%BA%8C%29%3A%20%E4%BD%BF%E7%94%A8TypeScript%E7%89%88%E6%9C%AC%E7%9A%84electron%2C%20VSCode%E8%B0%83%E8%AF%95TypeScript%2C%20ESLint%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/anfklajiolsefjalijeflia1%60.png"></p>
<p>此时, VSCode会自动启动调试(F5). 如果你事先打了断点, 将进入断点, 如果没有打断点, 会直接启动electron程序.</p>
<p> </p>
<h1 id="使用eslint插件来检查typescript代码">使用<code>ESLint</code>插件来检查TypeScript代码</h1>
<p> </p>
<h3 id="1-部署nodejselectron环境-1">1. 部署node.js+electron环境</h3>
<p>按步骤完成安装ESLint代码检查工具, Google JavaScript Style Guide所介绍的内容.</p>
<p> </p>
<h3 id="2-安装typescript的eslint依赖">2. 安装TypeScript的ESLint依赖</h3>
<p>执行指令:</p>
<pre><code>yarn add @typescript-eslint/parser --save-dev
</code></pre>
<p>执行指令:</p>
<pre><code>yarn add @typescript-eslint/eslint-plugin --save-dev
</code></pre>
<p> </p>
<h3 id="3-修改vscode配置文件settingjson">3. 修改VSCode配置文件setting.json</h3>
<p>通过快捷键<code>cmd + shift + P</code>打开搜索, 输入<code>setting</code>, 按照图中所示, 选中<code>首选项: 打开设置</code>:</p>
<p><img src="https://silenzio-markdown-image-hosting-service.oss-cn-beijing.aliyuncs.com/%E5%8D%9A%E5%AE%A2%E5%9B%BE%E5%BA%8A/electron%E6%95%99%E7%A8%8B%28%E7%95%AA%E5%A4%96%E7%AF%87%E4%BA%8C%29%3A%20%E4%BD%BF%E7%94%A8TypeScript%E7%89%88%E6%9C%AC%E7%9A%84electron%2C%20VSCode%E8%B0%83%E8%AF%95TypeScript%2C%20ESLint%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/1ffc58c485f310281a877d74ce39b08.png"></p>
<p>在<code>setting.json</code>中, 添加如下内容:</p>
<pre><code> "eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "typescript",
"autoFix": true
}
]
</code></pre>
<p> </p>
<h3 id="4-修改eslint配置文件eslintrcjs">4. 修改ESLint配置文件.eslintrc.js</h3>
<p>将<code>.eslintrc.js</code>修改`为如下内容:</p>
<pre><code>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"],
}
};
</code></pre>
<p> </p>
<h3 id="5-重启vscode">5. 重启VSCode</h3>
<p>重启后, ESLint生效.</p>
</div>
<div id="MySignature" role="contentinfo">
---------------------------------
E la nave va<br><br>
来源：https://www.cnblogs.com/silenzio/p/11724373.html
頁:
[1]