--- theme: qklhk-chocolate --- 我正在参加跨端技术专题征文活动，详情查看：[juejin.cn/post/710123…](https://juejin.cn/post/7101231224038883336) ## 介绍掘金平台在4月份推出的新功能【码上掘金】备受瞩目，在里面你可以通过代码编制一些创意想法从而实时编译出来看到立即看到展示效果，可以说就是国内版的codepen。本期将用Vite和Electron带大家仿制【码上掘金】，来开发出一款跨平台的代码编辑工具软件，其中从创建，开发到打包一应俱全，喜欢编制创意代码的同学不容错过哟~ 首先，我们先康康最终效果吧： ![演示图.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd6137a69e5749a48d7fe62d843d8214~tplv-k3u1fbpfcp-watermark.image?) > **Web版在线地址：** https://jsmask.gitee.io/cc-code-edit/ ## 正文 ### 创建vite ```sh pnpm create vite ``` 我们这里选择使用vue-ts来开发这个项目。 ![示图1-1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/017f1965f2f141a08c6b64c5ad33f40d~tplv-k3u1fbpfcp-watermark.image?) ```sh cd code-edit-app pnpm i pnpm dev ``` 我们创建完vite后，先来运行一下，看看是否能本地跑起来。 ![示图1-2.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0b48f016e304d4daf681ed5e709b4f7~tplv-k3u1fbpfcp-watermark.image?) ### 创建主窗体搭建之前，我们先下载一下 electron。 ```sh pnpm i electron -D ``` 我们先在 `package.json` 中写入 electron 的入口文件。 ```json // package.json { "main": "electron/main.js", } ``` 然后，我们就要创建这个应用的主窗体了。 ```js // electron/main.js const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow() { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 1280, height: 720, autoHideMenuBar: true, // 自动隐藏菜单栏 frame: true, // 边框窗口 webPreferences: { preload: path.join(__dirname, 'preload.js'), // 隔离vite和Electron之间的状态 nodeIntegration: true, // 使用页面中可以引入node和electron相关的API contextIsolation: false, // 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本 }, icon: path.join(__dirname, '../public/favicon.ico'), }) // 主窗体要加载的url mainWindow.loadURL('http://localhost:3000') } app.whenReady().then(() => { createWindow() app.on('activate', ()=>{ if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', ()=>{ if (process.platform !== 'darwin') app.quit() }) ``` 这里注意两点： + 目前将会加载本地3000端口的URL地址，后面是想用vite开启3000端口服务后得到地址然后再唤起electron进程构建其应用。 + 为了让页面内部也可以使用electron和nodejs，所以要把 `nodeIntegration` 属性开启。另外，为了后面的资源都可以访问到不出问题，我们还要修改 `vite.config.ts` 文件的 `base` 。 ```typescript // vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ base:"./", plugins: [vue()], }) ``` ### 热更新服务接下来，为了 vite 和 electron 运行正常，就要需要先让vite运行，其服务完成后，保证本地3000端口可以正常访问运行了，再开启electron去加载url，最后再开启这个应用服务。其目的，大家也能猜到，其实就是为了在以后要让写进去的业务代码实时更新到服务中，然后再显示到应用上，后面就开发就非常的方便。但我们怎么让这两个服务按刚才的要求运行呢？当然可以用两个本办法，就是手动开两个终端，一个终端跑vite，一个终端跑electron，但这样开发起来十分的麻烦，所以下面要安装几个脚本方便我们完成这件事咯。 ```sh pnpm i concurrently wait-on cross-env -D ``` - **concurrently**：同时运行多个命令，在node实现任务自动化的业务中经常使用 - **wait-on**：来完成等待资源，监控正在构建的文件的作用，我们这里用来监听vite是否生成url - **cross-env**: 可以用它设置一些环境变量，比如这里用它设置变量NODE_ENV来区分生成环境还是开发环境我们创建两个指令，来同时开启这两个服务。 ```json // package.json { "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview", "electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"" } } ``` 其中用 `cross-env` 在开发环境赋值 `NODE_ENV=development`，而 `concurrently ` 的 ` -k` 或 `--kill-others` 是为了用来清除其它已经存在或者挂掉的进程。接下来，我们运行下 `electron:serve` ，你就会发现非常快应用就自动打开了。 ![示图2-1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/965776c75aec407fa5789ae9ec889a56~tplv-k3u1fbpfcp-watermark.image?) ### 应用打包为了后面我们专心写业务，所以我们把打包这步要提前做好。首先，先要安装主流的 electron打包库。 ```sh pnpm i electron-builder -D ``` 然后要在 `package.json` 写好打包配置，这里注意一下，logo图标需要256x256的ico格式的图片，不然很可能不会显示出来。 ```json // package.json { "build": { "appId": "cc-code-editor", "productName": "CC CodeEditor", "copyright": "Copyright © 2022 jsmask", "mac": { "icon": "./public/logo.ico" }, "win": { "icon": "./public/logo.ico" }, "linux": { "icon": "./public/logo.ico" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true, "installerIcon": "./public/favicon.ico", "uninstallerIcon": "./public/favicon.ico", "installerHeaderIcon": "./public/favicon.ico" }, "files": [ "dist/**/*", "electron/**/*" ], "directories": { "buildResources": "assets", "output": "build" } } } ``` 当然，光加个这些配置项可不行，还没有完呢，还要修改 `electron/main.js` 那个主窗体的入口文件。 ```js // `electron/main.js` const NODE_ENV = process.env.NODE_ENV function createWindow() { // ... // 加载 index.html mainWindow.loadURL(NODE_ENV === 'development' ? 'http://localhost:3000' : `file://${path.join(__dirname, '../dist/index.html')}`) // 打开开发工具 if (NODE_ENV === "development") { mainWindow.webContents.openDevTools() } } ``` 还记得上一步用我们刚在开发环境赋值为 `development` ，利用它我们让在开发环境下，自动打开开发工具，并且开发模式才会走URL，否则（生产环境）我们直接走本地vite打包后生产的文件。此时，我们再加一道打包指令吧： ```json // package.json { "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview", "electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"", "electron:build": "npm run build && electron-builder" } } ``` 然后我们运行下应用打包指令： ```sh pnpm run electron:build ``` 等待一段时间就可以看到打包好的目录，点击就可以运行这个应用了，非常的方便。 ![示图3-1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0929857d4aa04ac398191d2cd2fa2e75~tplv-k3u1fbpfcp-watermark.image?) 但构建时会在外网下载包这一步很可能会卡住，由于默认的镜像源在国外，包下载速度和稳定性都不太好，有条件的小伙伴可以科学上网来解决。或者换成国内的镜像源配置一下地址即可： ```sh npm config set ELECTRON_MIRROR "https://npmmirror.com/mirrors/electron/" npm config set ELECTRON_BUILDER_BINARIES_MIRROR "https://mirrors.huaweicloud.com/electron-builder-binaries/" ``` ### Monaco Editor 众所周知，`monaco-editor` 是微软开源的一款非常强大的代码编辑器插件，其丰富的智能感知、验证、基本语法着色都非常的完美。此次，我们会用它来完成封装一个组件(EditBox.vue)，这个组件将接收语法类型和初始内容，输入的同时还会通知父组件把输入的内容再传递过去，这就是我们这个前端代码编辑应用的其中一个核心部分。 ```vue ``` 上面一些vue3的基础语法就不再过多赘述了，这里唯一要说的是里面会引用很多Worker他们通过写这些根据语言来在编辑器中创造语法环境。然后我们稍微在父页面就可以使用这个组件，使用三次分别传入html，css，javascript三种语言： ```vue ``` 再次运行如下图所示，编辑器主界面就完成了，而且编辑器也可以正常输入和做一些语法提示。 ![示图4-1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3a141a1f1e54e7eb9218865efa6ef1e~tplv-k3u1fbpfcp-watermark.image?) ### 编译效果预览为了展示和隔离环境，我们引入了 `iframe` 标签，接下来会通过在 `srcdoc` 属性上追加内容，来完成效果的预览。 ```html

``` 【码上掘金】在iframe的显示其实是生成了一个在线的html文件的地址，要写的html，css和js代码处理后都会写入了进去来完成预览，而我们因为本地的，所以没那么复杂直接拼字符串完成即可，而且优点也很明显，因为【码上掘金】是在线平台每次编译都会请求接口来更新页面内容，所以并没有那么快速而且会加一些防抖节流的手段，本地暂时可以不用考虑这些了，当然你要在上面写的项目非常之大那还是要去做限制的，当前我们不用考虑这些，每当编辑器内容改变直接赋值即可。 ```typescript import resetCss from "reset.css"; function renderCode() { codeContent.value = ` ${htmlContent.value}