Squoosh-编译及调试

项目目录结构

使用tree -d -L 2来打印目录结构

├── build
│   └── c
├── cli
│   ├── node_modules
│   └── src
├── codecs
│   ├── avif
│   ├── hqx
│   ├── imagequant
│   ├── jxl
│   ├── mozjpeg
│   ├── oxipng
│   ├── png
│   ├── resize
│   ├── rotate
│   ├── visdif
│   ├── webp
│   └── wp2
├── lib
├── libsquoosh
│   ├── build
│   ├── lib
│   ├── node_modules
│   └── src
├── node_modules
└── src
    ├── client
    ├── copy
    ├── features
    ├── features-worker
    ├── shared
    ├── static-build
    └── sw

libsquoosh: 核心代码，包含对于codec的调用，auto-optimizer的调用以及worker_pool的实现
src: 网站的源代码
cli: 命令行的代码，用于在浏览器外运行squoosh
codecs: 包含不同codec的调用层代码，各个codec的具体实现放在各个codec的开源仓库中。

编译文件

tsconfig.json

用来指定typescript项目如何来编译，类似于Makefile 或者CMakeLists.txt.

{
  "extends": "./generic-tsconfig.json",
  "files": [],
  "references": [
    { "path": "./client-tsconfig.json" },
    { "path": "./worker-tsconfig.json" },
    { "path": "./static-build-tsconfig.json" }
  ]
}

include: 指定哪里有typescripts文件，如

"include": ["src/**/*", "../codecs/**/*"]

outDir: 指定输出文件放在哪里
sourceMap: 指定编译器是否要生成sourceMap文件；

package.json

关于项目的一些信息，包括版本号，名字等，npm通过package.json来去识别项目及依赖。

{
  "private": true,
  "name": "squoosh",
  "version": "2.0.0",
  "license": "apache-2.0",
  "scripts": {
    "build": "rollup -c && node lib/move-output.js",
    "debug": "node --inspect-brk node_modules/.bin/rollup -c",
    "dev": "DEV_PORT=\"${DEV_PORT:=5000}\" run-p watch serve",
    "watch": "rollup -cw",
    "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static",
    "prepare": "husky install"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.1.0",
    "other dependencies",
},
  "lint-staged": {
    "*.{js,css,json,md,ts,tsx}": "prettier --write",
    "*.{c,h,cpp,hpp}": "clang-format -i",
    "*.rs": "rustfmt"
  },
  "dependencies": {
    "wasm-feature-detect": "^1.2.11"
  }

其中scripts用来指定package不同操作对应的命令，如如何编译，如何调试等；

rollup使用

是用来打包的，把多个小的js文件打包到一个更大的JS文件。一般会创造一个文件，命名为rollup.config.js:

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

如何编译及运行

1. 安装需要的dependencies

npm install

2. 编译
   整个网站的编译:

npm run build

单独编译libsquoosh并安装到cli目录。注意cli/package.json中dependencies中指定的是squoosh的特定版本，而不是本地的squoosh，

cd libsquoosh && npm run-script build
cd ../cli && npm install ../libsquoosh

3. 运行
   网站的运行

npm run dev

本地命令行的运行:

node src/index.js ~/Downloads/textile.png --avif auto

本地命令行的运行，带有参数的方式，例如下面的例子指定了缩放的目标宽度为720. 注意指定参数的时候，需要使用json的格式，否则内部解析会出问题；

node src/index.js ~/Downloads/textile.png --avif auto --resize "{width:720}"

Misc

1. 启用ora之后看不到打印
   简单规避方法不要启动ora，也就是注释掉spinner.start();

参考

squoosh