之前干iOS的，写过一段时间swift，所以从js转到ts对我其实影响不太大。

只是有些知识点比较乱，没有串起来过。

首先我们需要上typescript的官方文档阅读一哈文档

中文网很久没有更新了，不过github有老哥一直在翻译zhongsp/TypeScript

实际上现在看官网也有中文语言这个选项了，但是翻译完成的文章不太多，今后应该会越来越多。

那么接下来就是把知识点串起来了

以下都是个人观点，如果有不对，望大牛指点

1.要不要全局安装typescript

个人觉得不要，typescript也是有版本的，版本随着项目走，项目去安装typescript即可，完全没有必要全局安装。

2.tsc命令

背景

常见的需求，开发移动端h5，在移动端浏览器或者移动端app上渲染。

前端不知道怎么在移动端调试，移动端不知道怎么调试网页。

经常出了问题不知道是找移动端解决还是找前端解决。

好了，我们举个例子：

公司小改改写了个页面，要在app的webview里加载，本地调试杠杠的，自己手机杠杠的，但是一上特意准备的测试机，就白屏了。

我号称是公司移动端里最会写前端的，前端里最会写移动端的。只能露一手了[LetMeSee]

如果你是前端，可以找个客户端，按此方法操作打开调试控制台，由你来调试网页上的问题

如果你是个移动端，你就可以按照这个方法，为前端同学准备好调试环境，剩下的网页调试工作交给他们

如何查找问题

背景

其实很早我就知道，babel会帮助我们做一件事，就是把高版本的ES语法，转换为低版本的ES语法，以确保在低版本浏览器上能正确运行。

但是一直我都不知道怎么去操纵它，只知道需要一堆配置，配合webpack可以做这件事（甚至我一度认为必须使用webpack才能做这件事）。

集成(基本就是抄文档)

其实如果用百度搜索，集成的东西有各种es版本的依赖，配置文件有js，rc，json文件，乱七八糟什么都有。

其实这是历史原因。但现在已经2021年了，咱们就直接按官网说的来。

1.下载依赖包

1
2

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

当然，我个人认为，如果不需要兼容IE的话，应该不需要下载polyfill了

2.添加依赖文件

啥是History模式

文档

nginx配置

前提：假设把打包后的文件放在根目录下（这个前提很重要!!!）

从文档可以看到，nginx配置内容为

1
2
3
4

# nginx
location / {
  try_files $uri $uri/ /index.html;
}

实际上这是什么意思呢？

根据以上前提

我们如果把对应文件放到根目录下，差不多是这个意思

1.把dist包内容放到根路径下

背景

有个静态项目需要本地跑起来调试。这个项目还是前后端不分离的。

接口有发布好的开发环境。不想跑java，想直接跑前端调试。

所以用nginx

nginx安装

我是mac，brew是什么就不多说了。

1
2
3
4

# 安装
brew install nginx
# 查看信息
brew info nginx

打开配置文件nginx.conf

brew info命令会输出conf的地址，请仔细查看。

不要怕改错，同文件夹下有个default，随时可以用默认配置覆盖

背景

在开发过程中，总会有一些模板代码需要编写，比如我是写vue的，vue2中的各种namespace，vue3中的各种引入。几乎是每个vue文件都需要的。

每次写都累的一批，也毫无技术含量。纯体力活，但还不得不做。

这时候大伙可能会用各自习惯的编辑器去编写各式各样的代码块来减轻工作量。

但是团队中编辑器并非统一的，众所周知，前端不仅语言众多，开发工具也多的一批，也没有什么好的跨编辑器跨机子的代码块存储方式（大厂统一云编辑器的往后稍稍，不包含你们）

这个时候就发现了plop（在跟着花裤衩手摸手学习vue-element-admin的时候学到的）。

Plop解决了什么问题？

解决了上述的同一个项目跨编辑器跨机器编写前端代码块的问题。

如何集成

一、集成plop到项目中

背景

有些component需要全局注册的，但是在main.js中全局注册又太麻烦了。

store采用modules方式分包，使用的时候也要手动注册。

store刷新丢失，需要持久化。

这时候解决前两个问题，可以使用require.context

解决最后一个问题可以使用vuex-persistedstate

require.context

1.require.context是什么？

Vue内置了webpack的部分配置，这个咱们就不多说了。

require.context是webpack的api。

一、背景

开发群中讨论，如何给electron注入js

有老哥提出了使用preload.js注入

我惊了，表示不信，后面仔细想了想：

“通过preload.js，可以预加载一些electron主线程的变量挂在到window上，后期在render线程中可以获取到对应的变量。

换句话说，preload.js中获取到的window，是后期render线程的window，那理论上确实可以做注入操作。

如果我在preload.js中添加window的生命周期,渲染后通过id或者各种方式获取到对应的dom节点，理论上我应该能劫持某些按钮，也就是说注入js成功了。”

二、说干就干

1、老规矩，vue+vue-cli-plugin-electron-builder创建项目

2、background.js，直接加载www.baidu.com

一、背景

希望窗口从某些固定区域弹出，比如右下角（如果有自定义弹窗需求，这就很常见了）

二、如何修改弹出位置

其实非常简单

1
2
3
4
5
6
7
8
9
10
11
12
13

const newWindow = new BrowserWindow({
    x: 400,
    y: 400,
    width: 400,
    height: 600,
    frame: false,
    webPreferences: {
      webSecurity: false,
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });

关键就是这个x，y了

1.屏幕上的坐标轴

在屏幕上的坐标轴长这样

把你的鼠标放到屏幕四个角落，打印一下就可以验证了

图标使用的地方非常多，打包生成exe的图标，运行时的图标，系统托盘的图标等等

这里我们先介绍几种格式：

png,jpg,icns,ico

1
2
3
4
5
6
7

png：是一种采用无损压缩算法的位图格式，兼容性好。

jpg：JPG一般指JPEG格式。JPEG（Joint Photographic Experts Group）是JPEG标准的产物，该标准由国际标准化组织（ISO）制订，是面向连续色调静止图像的一种压缩标准。JPEG格式是最常用的图像文件格式，后缀名为.jpg或.jpeg。

icns：一般是用来给application做resource的icon文件,也是macintosh系统里独特支持的格式。

ico:ICO是Windows的图标文件格式，图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

所以换句话说，icns是mac用的（有些时候linux也可以使用），ico是windows用的

怎么制作这些图标？

1.首先，准备问美工要一个1024x1024的png图标

2.有两个库可以帮助我们

electron-icon-maker

electron-icon-builder
具体使用说明请查看readme