Setup Webpack, Rust dan wasm

Pada modul sebelumnya kita baru melakukan project setup untuk webpack untuk melakukan otomasi file html dan javascript.

Pada modul ini kita akan mengkonfigurasi webpack agar melakukan kompilasi otomatis file Rust menjadi WebAssembly.

Perhatian: tutorial ini untuk OS windows. Pastikan system terinstall Visual Studio C++ Build Tools.

Agar kompilasi ototmatis yang dilakukan webpack dapat berjalan dengan baik, tambahkan pada environment variables:

CARGO_HTTP_CHECK_REVOKE = false

Karena tutorial menggunakan window, pertama kita install wasm-pack dengan download dari https://rustwasm.github.io/wasm-pack/installer/

Kemudian wasm-pack-plugin dengan menggunakan perintah npm.

$ npm install -D @wasm-tool/wasm-pack-plugin

Setelah proses instalasi selesai, buka file webpack.config.js, kita update configurasi seperti berikut:

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin')

module.exports = {
  entry: './public/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './public/index.html'
    }),
    new WasmPackPlugin({
      crateDirectory: path.resolve(__dirname, '.')
    })
  ],
  experiments: {
    asyncWebAssembly: true
  }
}

Selanjutnya buka file Cargo.toml, modifikasi seperti berikut:

Informasi yang ditambahkan adalah table [lib] dan [dependencies].

[package]
name = "wa"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
wasm-bindgen = "0.2.81"

Terakhir buka file public/main.js, lalu ganti code sebelumnya menjadi seperti berikut:

async function init() {
  let rustApp = null

  try {
    rustApp = await import('../pkg')
  } catch(err) {
    console.error(err)
    return;
  }

  console.log(rustApp)

  const input = document.getElementById('upload')
  const fileReader = new FileReader()

  fileReader.onloadend = () => {
    let base64 = fileReader.result.replace(
      /^data:image\/(png|jpeg|jpg);base64,/, ''
    )
    let img_data_url = rustApp.grayscale(base64)
    document.getElementById('new-img').setAttribute(
      'src', img_data_url
    )
  }

  input.addEventListener('change', () => {
    fileReader.readAsDataURL(input.files[0])
  })
}

init()

Code javascript diatas berfungsi untuk memproses ketika tombol Upload image diclick, kemudian memanggil aplikasi rust (oleh karena itu kita install wasm-bindgen diatas, untuk menghubungkan antara javascript dan rust).

Sharing is caring:

Leave a Comment