这几日被electron折磨了好久，索性就暂时放下electron去光顾了下tauri，这里记录下练手用的简单项目开发过程吧！
首先得有一台安装了msedge webview以及msvc的win机器，然后要有node.js和rust的开发环境……
随便找个文件夹，打开pwsh，使用irm https://create.tauri.app/ps | iex来初始化，此间其将提问数个问题，其中Choose which language to use for your frontend选择TypeScript / JavaScript (pnpm, yarn, npm)，Choose your package manager选择yarn（个人选择，其他选项也都OK），Choose your UI template选择Vanilla，Choose your UI flavor选择JavaScript（强烈建议如果你不想用Vite就别选TypeScript）。
下面是我的package.json：
{
"name": "e-editor-lite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel ./src/index.html",
"tauri": "tauri"
},
"devDependencies": {
"@tauri-apps/cli": "^1.4.0",
"parcel-bundler": "^1.12.5"
},
"dependencies": {
"monaco-editor": "^0.41.0",
"monaco-themes": "^0.4.4"
}
}
然后生成的项目中src目录是页面源代码，下面展示一下我的的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<script type="module" src="./main.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#container {
height: 100%;
width: 100%;
}
import * as monaco from 'monaco-editor';
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
if (label === 'json') {
return 'monaco-editor/esm/vs/language/json.worker.js';
}
if (label === 'css' || label === 'scss' || label === 'less') {
return 'monaco-editor/esm/vs/language/css.worker.js';
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return 'monaco-editor/esm/vs/language/html.worker.js';
}
if (label === 'typescript' || label === 'javascript') {
return 'monaco-editor/esm/vs/language/ts.worker.js';
}
return 'monaco-editor/esm/vs/language/editor.worker.js';
}
};
import('monaco-themes/themes/GitHub Dark.json')
.then(data => {
monaco.editor.defineTheme('github-dark', data);
monaco.editor.setTheme('github-dark');
})
var container = document.getElementById('container');
var editor = monaco.editor.create(container, {
value: "function hello() {\n\talert('Hello world!');\n}",
language: 'javascript',
cursorSmoothCaretAnimation: "on",
cursorBlinking: "phase",
rulers: [
60,
80
],
theme: 'github-dark'
});
window.onresize = () => {
container.style.width = '0';
container.style.height = '0';
editor.layout();
container.style.removeProperty('width');
container.style.removeProperty('height');
editor.layout();
};
window.addEventListener("DOMContentLoaded", () => {
container.style.width = '0';
container.style.height = '0';
editor.layout();
container.style.removeProperty('width');
container.style.removeProperty('height');
editor.layout();
});
这里简单给编辑器加了个github-dark主题，另外还有编辑器大小自适应的一种自创方案（monaco的大小自适应向来是个大坑）
另外还要改一下rust代码，直接初始化时是混入了一些没必要的东西的，以下是src-tauri\src\main.rs修改后的代码：
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
另外由于使用了parcel进行打包，src-tauri\tauri.conf.json也是要改一部分的：
...
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devPath": "http://localhost:1234 ",
"distDir": "../dist",
"withGlobalTauri": true
},
...
最后npm run tauri dev就可以预览成果了！