tauri学习(1)-初体验

tauri是一个类似Electron的框架，对于开发者最大的区别是后端语言用的是Rust，而且生成的可执行程序更小，今天尝试了下，感觉还不错，按官网的做法，只需执行下的命令(mac环境)

npm create tauri-app

回答一些基础问题后，项目模板就搭建好了，参考下图，我选的是create-react-app + TypeScript

项目目录结构如下：

public/src 是标准的react目录，src-tauri则是tauri的rust代码目录，可以打开tauri.conf.json看一眼：

建议将默认的identifier改掉，不然生产环境无法正常打包。另外windows下的height/title 这些，可以调整窗口的大小、标题。

有兴趣的同学，还可以看看package.json

注意到添加了1个名为tauri的脚本，接下来就用这个命令来启动一下，会发现程序并没在跑起来，而是输出一堆信息：

说明还需要加subcommands，尝试一下info，就能看到一些环境信息、依赖包的版本等...

对命令有基础了解后，可以跑起来看看：

npm run tauri dev

熟悉的react欢迎页终于出来了，只不过是在我们自己的window窗口里运行的，通俗的讲，就是将react套了个webview的壳。

肯定也有同学好奇，既然是react项目，能不能象传统web项目一样，也跑在浏览器里吗？当然可以！

npm run start

如果刚才的window窗口没关闭，用npm run start启动时，会提示3000端口占用，问你是否换个端口，回答Y，通常会找下1个端口3001启动。

tips：思考一下，其实tauri 应用在运行时，内嵌的react也必然会启一个端口对吧？想想我们刚才用npm run tauri info看到的输出devPath: http://localhost:3000/，所以浏览器直接访问这个3000端口，也是一样的。

看上图，3001端口(左上)，是单独用npm run start启动的，而3000端口(右上)是启用tauri window应用时，自动启动的，最下面的就是套了壳的tauri。

 

最后看看如何打包部署： 

npm run tauri build

会在target/release/bundle下生成dmg安装文件，以及可执行应用tauri-hello.app

看下它们的大小：

安新文件dmg只有5.4M，可执行程序app不到10M，这比electron精减太多了。

标签：npm,学习,初体验,run,端口,tauri,react,3000
来源： https://www.cnblogs.com/yjmyzz/p/tauri-hello-world.html