从0开发一个大玩具（十）

在上一篇中我们成功的使用ts+webpack+less+jq创建了项目的基础框架，从web层面来讲我们的项目已经可以正常进行开发了，一个web应用所需的模块也大致齐全
但是还记得第一篇中我们要做什么嘛
对的，我们要做一个像vscode一样能给前端开发者带来真正便利的工具型应用
所以项目是要运行在electron中的，那么开始给项目中增加electron
命令行输入
npm install electron --save
安装成功后
在项目根目录创建window文件夹在window文件夹中创建main.js

const {app, BrowserWindow, screen} = require('electron');

let mainWindow;

let createWindow = function () {
    
    // 获取屏幕工作区大小
    const screenWidth = screen.getPrimaryDisplay().workAreaSize.width;
    const screenHight = screen.getPrimaryDisplay().workAreaSize.height;
    
    mainWindow = new BrowserWindow({
        show: false,
        height: screenHight,
        width: screenWidth,
    });
    // 默认开启调试
    mainWindow.webContents.openDevTools();
    mainWindow.loadURL("http://localhost:8088");
    mainWindow.on('closed', function () {
        mainWindow = null
    });
    mainWindow.once('ready-to-show', function () {
        mainWindow.show();
    })
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow()
    }
});

修改package.json中的main字段

  "main": "./window/main.js",

指向到刚创建的main.js中
在package.json中增加scripts

  "scripts": {
    "dev": "webpack-dev-server --open",
    "start": "electron ."
  },

命令行输入npm run start 启动electron

image.png
运行成功
不过暂时我们不会用到electron的开发

---

此致
敬礼~
小旋风

我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243