JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 129
  • Score
    100M100P100Q75270F
  • License MIT

wasm-pack plugin for vite@v2

Package Exports

  • vite-plugin-rsw

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vite-plugin-rsw) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vite-plugin-rsw

npm npm downloads vite version chat

awesome-rsw Rust WebAssembly

wasm-pack plugin for vite@v2

Pre-installed

Features

  • startup optimization
  • enable debug mode: DEBUG=rsw yarn dev
  • friendly error message: browser and terminal
  • automatically generate template when crate does not exist
  • multiple rust crate
    • compile
    • hot-update

rsw run rsw error rsw debug

rsw new
rsw error wasm-pack
rsw error outdir

Quick Start

中文文档 - WebAssembly入门 WebAssembly 系列

create-xc-app: create a project in seconds!

template: wasm-vue3 and wasm-react

# With NPM
npm init xc-app

# With Yarn:
yarn create xc-app

# -------------------

# command line options
npm init xc-app my-wasm-app --template wasm-react

Getting Started

Step1

Install and configure rsw.

# install rsw
npm i -D vite-plugin-rsw

# or
yarn add -D vite-plugin-rsw
// vite.config.ts
import { defineConfig } from 'vite';
import ViteRsw from 'vite-plugin-rsw';

export default defineConfig({
  plugins: [
    ViteRsw({
      crates: [
        '@rsw/hey',
        'rsw-test',
        // https://github.com/lencx/vite-plugin-rsw/issues/8#issuecomment-820281861
        // outDir: use `path.resolve` or relative path.
        { name: '@rsw/hello', outDir: 'custom/path' },
      ],
    }),
  ],
});

Step2

Use exported Rust things from JavaScript with ECMAScript modules!

import init, { greet } from '@rsw/hey';

// 1. `WebAssembly.Instance` initialization
init();

// 2. Make sure this method is executed after `init()` is called
greet('World!');

Plugin Options

  • root: rust crate root path. default project root path.
  • unLinks: string[] - (npm unlink) uninstalls a package.
  • crates: Item[ ] - (npm link) package name, support npm organization.
    • Item as string - '@rsw/hello'
    • Item as RswCrateOptions - { name: '@rsw/hello', outDir: 'custom/path' }

⚠️ Note: Before performing the vite build, at least once vite dev, generate wasm package (rust-crate/pkg). In the project, wasm package is installed by vite-plugin-rsw in the form of npm link, otherwise it will error Can not find module 'rust-crate' or its corresponding type declarations.

Remote Deployment

Install

Install lencx/rsw-node globally, you can use the rsw command.

npm i -g rsw-node
rsw help

Example

npm install -D rsw-node
"scripts": {
  "rsw:deploy": "rsw && npm run build"
}

rsw deploy

Error

  • npm ERR! EEXIST: file already exists

    # https://docs.npmjs.com/cli/v6/commands/npm-link
# npm link uses the global prefix (see npm prefix -g for its value)
# /Users/lencx/.nvm/versions/node/v15.6.0
npm prefix -g

# after removing the folder, try again `npm run dev`
rm -rf /Users/lencx/.nvm/versions/node/v15.6.0/lib/node_modules/@rsw/chasm

    rsw-error-link

Video

Examples

微信

群二维码已过期，关注公众号《浮之静》，发送“进群”，我将拉你进群一起学习。

wasm-wechat-qrcode fzj-qrcode

License

MIT License © 2021 lencx