electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

1.  创建项目,创建时 选择 nodejs 项目,因为 开发 electron 与 开发 nodejs 基本一致。

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

2.安装 electron 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

npm i -D electron@beta

 

 

 

 electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

看目录分析:

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

 

他妈的 在 npm 官方网站是搜索框里都搜不到 这个,百度才出来,网址为:https://www.npmjs.com/package/@types/electron

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

3.安装 typescript 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

 

4.开始根据,electron的文档,开始实战。


electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

接下来需要配置,typescript ,让main.ts自动 编译成 main.js 这个是我独创摸索的方法。

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

接下来,我们开始 分析一下 这个 demo的main.js的代码:

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

我们main.ts里 写代码的时候,发现没有智能提示!!!,这怎么能行,这是因为 官方 demo都是用的 commonjs模块化 + es6语法,即:只有在 js文件里写 才会有智能提示,

我们新建一个abc.js文件 而不是ts留意 ,然后把官方的main.js里的 代码 放到 abc.js 看下 是否会有智能提示。如下gif:

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

【重要!重要!重要!只所以,在ts下 没有 智能提示,原因是 ts的模块化 最终要翻译成 commonjs  amd cmd es6标准模块 等等,需要兼容很多模块化,难点就在这里,问题点,也出在这里 非常重要,这里。】
那么ts的开发者 就必须 自己有一套 模块化,最终 把自己的这一套模块化 通过编译器 编译成 各种模块化规范,那么 ts官方 就指定了 针对最终要转换成 commonjs模块化规范时,在ts里 应该如何

写的规范,看官方文档:

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

 

 electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

 

 

 

/*
 这个是官方的写法,这个是直接写在js 文件中的,没有问题,但是我们是用 ts的
 需要改变
 */
//const { app, BrowserWindow } = require(‘electron‘);//另外注意,这是一种解构赋值写法.

 

 

 

若要引入,官方的模块的话,最好的方法 就是让 IDE自动引入把,看下面gif:

 

 

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

electron、nodejs、typescript、idea 组合开发,安装和配置 以及错误 等 详细说明

上一篇:SQL注入中的文件读写


下一篇:webpack4 SplitChunks插件 代码拆分