BST Tauri 开发笔记(3)- 打包资源文件

参考:https://tauri.app/v1/guides/building/resources/

编辑 tauri.conf.jsonbundle 下面添加 resources,allowlist里也要添加这一行(如果无需用js访问该文件则不用):

    "bundle": {
      "active": true,
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "identifier": "com.cruelyouth.bst-app",
      "targets": "all",
      "resources": [
        "resources/*"
      ]
    },
    "allowlist": {
      "fs": {
        "scope": ["$RESOURCE/*"]
      }
    }

在rust中访问文件

tauri::Builder::default()
  .setup(|app| {
    let resource_path = app.path_resolver()
      .resolve_resource("lang/de.json")
      .expect("failed to resolve resource");

    let file = std::fs::File::open(&resource_path).unwrap();
    let lang_de: serde_json::Value = serde_json::from_reader(file).unwrap();

    println!("{}", lang_de.get("hello").unwrap()); // This will print 'Guten Tag!' to the terminal

    Ok(())
  })

#[tauri::command]
fn hello(handle: tauri::AppHandle) -> String {
   let resource_path = handle.path_resolver()
      .resolve_resource("lang/de.json")
      .expect("failed to resolve resource");

    let file = std::fs::File::open(&resource_path).unwrap();
    let lang_de: serde_json::Value = serde_json::from_reader(file).unwrap();

    lang_de.get("hello").unwrap().to_string()
}

该文件夹下放入一个文件,打包试试 npm run tauri build 打包后的可执行文件中嵌入了该资源文件。

BST Tauri项目笔记(2)Prettier

安装prettier

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

创建.prettierrc.cjs

module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: false,
  singleQuote: true,
}

修改.eslintrc.cjs

  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    // 添加下面
    'plugin:prettier/recommanded',
  ],
  ...,
  // 添加prettier插件
  plugins: ['react', '@typescript-eslint', 'prettier'],

BST Tauri项目笔记(1)eslint

创建Tauri项目

npm create tauri-app

选项如下

✔ Project name · bible-study-tool-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://reactjs.org/)
✔ Choose your UI flavor · TypeScript

安装npm 依赖

cd bible-study-tool-app
npm install
npm run tauri dev

安装配置eslint

npm i -D eslint

创建eslint配置

npx eslint --init

选项如下

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

安装airbnb配置

https://www.npmjs.com/package/eslint-config-airbnb
https://www.npmjs.com/package/eslint-config-airbnb-typescript

npx install-peerdeps --dev eslint-config-airbnb
npm i -D eslint-config-airbnb-typescript

添加配置 .eslintrc.cjs

  extends: [
    // 删掉eslint-recommanded项
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    // 添加以上三行
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  ...,
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    // 添加以下这行
    project: './tsconfig.json',
  },
  ...,
  rules: {
    // 禁止以下规则,我不喜欢语句加分号 seme colon
    'react/react-in-jsx-scope': 0,
    '@typescript-eslint/semi': 0,
  },

tsconfig.json 中加入:

"include": [".eslintrc.cjs", "src"],

环穿白河水库赤壁丹霞四十里长嵯

从张家口市后城镇曹家窑村出发的环穿路线,全长15公里,爬升不到800米,最高海拔处有1300多米,前3公里爬升消耗很大,到第7公里开始下山,没有爬升,到第10公里开始是在山间公路走。

总的来说风景很好,别的地方很少见到如此的岩石,有点像美国的酋长岩,最高处俯视整个山下的时候很震撼,但手机镜头拍不出来,真的好像站在针尖上下面全是万丈深渊,有点能体会撒旦带耶稣上了高山将整个世界指给他看的感觉。

基本这类型的山平时爬这个已经够了,上次的三界碑也是属于同一类型,但就没有这么好的风景了。

强度还可以,但也需要一些体力,不是很困难,路也比较容易认,就是要3小时车程,并且缺点也是全程没有遮挡,夏天会很晒,另外土太大,风沙吹起来浑身是灰尘。

经验:换了徒步登山的鞋会感觉好很多,徒步鞋注意要稍微比平时的鞋大一点,走长路后脚会肿,因此需要更多空间,走到最后感觉小脚趾挤的很难受,跟袜子太紧也有些许关系。北方的山很多灌木都带刺,长袖长裤还是必要,这里的灌木没有上次三界碑那么的扎,还是感恩的。

rust编译为wasm32-wasi失败

问题和这个问题一样

https://stackoverflow.com/questions/74968490/the-wasm32-wasi-target-may-not-be-installed-while-it-is-installed

如果自行rustup add target wasm32-wasi 则显示已添加,如果自行cargo build --target wasm32-wasi 则会失败,说没有这个target。

原因是因为系统里安装了两套rust,先清除rust

rustup self uninstall
brew uninstall rust

再重新安装rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Node.js 18 更新不再需要 Nodemon

以前开发Node的时候,需要如Nodemon一类的工具启动,监听文件变化自动重新加载源码,现在Node.js 18自带了这一个功能,使用方法:

# 监听一切的入口文件相关模块更改和import的第三方module更改
node --watch server.js

# 指定监听路径,除外的module更改不会触发刷新 
# 只支持 Windows, MacOS
node --watch-path=./src --watch-path=./tests index.js

# 刷新时保持原有log输出
node --watch --watch-preserve-output server.js

2月23日墩台山脊三界碑穿越徒步

从天津蓟县石炮沟村开始,到北京平谷红石门村,共12公里,用时5小时多。路比较好认,沿途都有徒步组织留下的贴纸,而且都是比较明显的路,只有过了三界碑之后有一些小路,上面有很多带刺的植物很扎,不太舒服,其余的路没有难度(只有一处山脊很窄,下面就是深渊需要小心点)。我的脚踝较弱,容易崴脚,大腿筋也不舒服,沿途很多碎石路,脚踩不正,脚踝受力不均,而且容易滑,感恩带了登山杖,否则就很辛苦。可能只有初春适合来,不适合夏天来,沿途没有遮挡会非常晒,但是2月份来又没有什么可看的,植物的枯叶还有没掉光的,有些背阴的地方还有积雪。这里风景一般,加上今天天气不是很好,如果晴朗能见度高可能还好一点。沿途能看到一段长城,但是路线并不会去长城那边。

因为是穿越,所以回程车需要到红石门村接我们,村口的村委会有公共厕所。当时很想喝可乐,但问了一个村民说没有小卖铺。最后小狗长的很有趣🐶

六只脚轨迹

A useful video tutorial about how to setup environment for Vite + React + Typescript + Eslint + Prettier + Vitest and so on

Some bash commands and github link in this video:

npm i -D eslint
npx eslint --init

npx install-peerdeps --dev eslint-config-airbnb
npm install eslint-config-airbnb-typescript
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
# crete cjs file for prettier
npm i -D vitest
npm i -D @testing-library/react @testing-library/jest-dom

https://github.com/CodingGarden/react-ts-starter

近期发现一些值得收藏的网站

这类的网站太多,实在没有机会完整的看,但里面确实有些很好的内容,等到要找的时候找不到又非常可惜,深感个人的收藏夹里需要整理,但又没有找到很好的整理方法,放入收藏夹,肯定过一段时间也是找不到了,希望能够有更好的方式管理这些东西,先存在这看以后还会不会用到吧。

一个介绍各种算法和数据结构在JS里实现的仓库,很有价值:https://github.com/trekhleb/javascript-algorithms

一个自学类网站,可以交互式学习计算机科学课程:https://github.com/freeCodeCamp/freeCodeCamp

开发类面试大全:https://github.com/jwasham/coding-interview-university

各种各样的技术工具,不管有没有用先收起来:https://github.com/trimstray/the-book-of-secret-knowledge#other-cheat-sheets-toc

数据建模和数据分析的平台:https://www.kaggle.com/