Yew Parcel 模板项目使用教程

Yew Parcel 模板项目使用教程

yew-parcel-templateAwesome Yew with Yew-Router and Parcel application项目地址:https://gitcode.com/gh_mirrors/ye/yew-parcel-template

1. 项目的目录结构及介绍

yew-parcel-template/
├── bin/
├── github/
├── vscode/
├── app/
│   ├── crate/
│   │   ├── gitignore
│   │   ├── LICENSE
│   │   ├── README.md
│   │   ├── index.html
│   │   ├── package-lock.json
│   │   ├── package.json
│   │   ├── wasm-builder.js
│   │   ├── wasm_pack_cmd
│   │   ├── wasm_pack_cmd.bat
│   └── ...
├── .gitignore
├── LICENSE
├── README.md
└── ...

• bin/: 存放项目的二进制文件。
• github/: 存放与GitHub相关的配置文件。
• vscode/: 存放Visual Studio Code的配置文件。
• app/crate/: 项目的主要代码和配置文件。
  • gitignore: Git忽略文件配置。
  • LICENSE: 项目许可证。
  • README.md: 项目说明文档。
  • index.html: 项目的主HTML文件。
  • package-lock.json: npm依赖锁定文件。
  • package.json: npm配置文件。
  • wasm-builder.js: WebAssembly构建脚本。
  • wasm_pack_cmd: wasm-pack命令行工具。
  • wasm_pack_cmd.bat: Windows批处理文件。

2. 项目的启动文件介绍

项目的启动文件主要包括以下几个部分：

• index.html: 主页面文件，负责加载WebAssembly模块并初始化应用。
• wasm-builder.js: 用于构建WebAssembly的脚本文件。
• package.json: 包含了项目的npm脚本命令，例如：

  "scripts": {
    "start": "parcel serve index.html",
    "build": "parcel build index.html"
  }
  

通过运行以下命令启动项目：

npm start

这将启动开发服务器，默认在http://localhost:1234提供服务。

3. 项目的配置文件介绍

主要的配置文件包括：

• package.json: 包含了项目的依赖和脚本命令。

  {
    "name": "yew-parcel-template",
    "version": "1.0.0",
    "scripts": {
      "start": "parcel serve index.html",
      "build": "parcel build index.html"
    },
    "dependencies": {
      "parcel": "^2.0.0"
    }
  }
  

• wasm-builder.js: 配置了WebAssembly的构建过程。

  const { spawn } = require('child_process');
  const chokidar = require('chokidar');
  
  // 配置监听文件变化
  const watcher = chokidar.watch(['src', 'Cargo.toml'], {
    persistent: true
  });
  
  watcher.on('all', (event, path) => {
    console.log(event, path);
    spawn('wasm-pack', ['build'], { stdio: 'inherit' });
  });
  

通过这些配置文件，可以实现项目的自动化构建和开发服务器的启动。

yew-parcel-templateAwesome Yew with Yew-Router and Parcel application项目地址:https://gitcode.com/gh_mirrors/ye/yew-parcel-template