标签：npm 学习 初体验 run 端口 tauri react 3000

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。