ഒരു ഹ്യൂഗോ സൈറ്റിലേക്ക് റസ്റ്റ് കോഡ് നിർമ്മിക്കുകയും വിന്യസിക്കുകയും ചെയ്യുന്നു

2024, ഏപ്രിൽ 22

ഒരു ഹ്യൂഗോ സൈറ്റിന്റെ ക്ലയന്റ് സൈഡിൽ റസ്റ്റ് കോഡ് പ്രവർത്തിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു ലഘുവായ ഉദാഹരണത്തിലൂടെ ഞങ്ങൾ പോകാൻ പോകുന്നു. റസ്റ്റ് കോഡ് വെബ് അസംബ്ലി (wasm) ആയി കംപൈൽ ചെയ്യാൻ പോകുന്നു, ഇത് ബ്രൗസറിൽ നേർ-നേറ്റീവ് പ്രകടനം നൽകും!

ഒരു പുതിയ Hugo സൈറ്റ് സൃഷ്ടിക്കുന്നു

ആദ്യം Hugo-യുടെ ക്വിക്ക്‌സ്റ്റാർട്ട് സൈറ്റ് ഇനിഷ്യലൈസ് ചെയ്യാം:

hugo new site quickstart_wasm
cd quickstart_wasm
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

നിങ്ങൾ ഇതുപോലെ എന്തെങ്കിലും കാണണം:

# ലോഗുകൾ ...
28 ms-ൽ നിർമ്മിച്ചു
പരിസ്ഥിതി: "development"
ഡിസ്കിൽ നിന്ന് പേജുകൾ സേവ് ചെയ്യുന്നു
ഫാസ്റ്റ് റെൻഡർ മോഡിൽ പ്രവർത്തിക്കുന്നു. മാറ്റങ്ങൾക്കായി പൂർണ്ണ റീബിൽഡുകൾക്ക്: hugo server --disableFastRender
വെബ് സെർവർ http://localhost:55802/ (ബൈൻഡ് വിലാസം 127.0.0.1) ലഭ്യമാണ്

നിങ്ങൾ localhost url തുറന്നാൽ, ഇതുപോലെ എന്തെങ്കിലും കാണണം:

ശൂന്യമായ hugo സൈറ്റ് — ഒരു ശൂന്യമായ Hugo സൈറ്റ്

ഒരു Rust പ്രോജക്റ്റ് സൃഷ്ടിക്കുന്നു

നമ്മുടെ wasm-ന്റെ സോഴ്സ് ഭാഷയായി Rust ഉപയോഗിക്കാൻ പോകുന്നു, പ്രാഥമികമായി അതിന്റെ മാക്രോകൾ ബൈൻഡിംഗുകൾ സൃഷ്ടിക്കാൻ വളരെ എളുപ്പമാക്കുന്നതിനാലാണ്. സൗകര്യത്തിനായി, നമ്മുടെ Hugo സൈറ്റിലെ assets ഡയറക്ടറിയിൽ ലൈബ്രറി ആരംഭിക്കാം.

# Hugo സൈറ്റ് ഫോൾഡറിൽ
cd assets
mkdir rust_app && cd rust_app
cargo init --lib

Cargo.toml തുറന്ന് ഇനിപ്പറയുന്നത് ചേർക്കുക

# ഇത് ചുവടെ ചേർക്കുക
[lib]
crate-type = ["cdylib", "rlib"]

ഇപ്പോൾ, wasm-bindgen ഒരു ഡിപെൻഡൻസി ആയി ചേർക്കേണ്ടതുണ്ട്, ഇത് ബൈൻഡിംഗുകൾ സൃഷ്ടിക്കാൻ ഒരു വരി പരിഹാരം നൽകും.

cargo add wasm-bindgen

src/lib.rs-ൽ, നമ്മുടെ വെബ് ആപ്പിൽ നിന്ന് വിളിക്കേണ്ട ഒരു പ്രകടന നിർണായക ഫംഗ്ഷൻ എഴുതാം

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn sieve_of_eratosthenes(n: usize) -> Vec<i32> {
    let mut primes = Vec::new();
    let mut is_prime = vec![true; n + 1];
    is_prime[0] = false;
    is_prime[1] = false;

    for i in 2..=n {
        if is_prime[i] {
            primes.push(i as i32);

            let mut j = 2 * i;
            while j <= n {
                is_prime[j] = false;
                j += i;
            }
        }
    }

    primes
}

ഇത് ബിൽഡ് ചെയ്യാം

wasm-pack build --target web

കംപൈൽ ചെയ്ത ഔട്ട്പുട്ട് pkg-ൽ കാണാം.

ls pkg

package.json  rust_app.d.ts  rust_app.js  rust_app_bg.wasm  rust_app_bg.wasm.d.ts

ജാവാസ്ക്രിപ്റ്റിൽ നിന്ന് റസ്റ്റ് വിളിക്കുന്നു

ഇപ്പോൾ, rust_app ഫോൾഡറിൽ, നമുക്ക് ഒരു വെബ് ആപ്പ് സൃഷ്ടിക്കാം അത് നമ്മുടെ പ്രൈം സീവ് ഉപയോഗിക്കും.

# in assets/rust_app
mkdir www && cd www
touch index.js

ഇനിപ്പറയുന്നത് index.js ഫയലിൽ ഇടുക

import init, * as wasm from '../pkg/rust_app';

init(wasm_path).then(_ => {
    function computePrimes()
    {
        var inputNumber = parseInt(
            document.getElementById('inputNumber').value,
        );
        if (!isNaN(inputNumber) && inputNumber >= 1) {
            var primes = wasm.sieve_of_eratosthenes(inputNumber);
            document.getElementById('output').innerText = primes.join(', ');
        } else {
            document.getElementById('output').innerText =
                'ദയവായി ഒരു സാധുതയുള്ള പൂർണ്ണസംഖ്യ നൽകുക.';
        }
    }
    let button = document.getElementById('computeButton');
    button.addEventListener('click', () => {
        computePrimes();
    });
});

സൈറ്റിൽ WebAssembly എംബെഡ് ചെയ്യുന്നു

ഇപ്പോൾ, ഞങ്ങൾക്ക് wasm ഫംഗ്ഷന്റെ ഔട്ട്പുട്ട് സൈറ്റിൽ കാണിക്കണം. അതിനാൽ, ഒരു ചെറിയ വെബ് ആപ്പ് ഉപയോഗിച്ച് ഒരു ലേഖനത്തിൽ ചേർക്കാൻ കഴിയുന്ന ഒരു ഷോർട്ട്കോഡ് ഉണ്ടാക്കാം.

~/quickstart_wasm/layouts/shortcodes/wasm_app.html എന്ന ഫയലിൽ

<!doctype html>
<html lang="en">
  <head>
    <title>പ്രൈം നമ്പർ ഫൈൻഡർ</title>
  </head>
  <body>
    <input type="number" id="inputNumber" placeholder="ഒരു പൂർണ്ണസംഖ്യ നൽകുക..." />
    <button id="computeButton">കമ്പ്യൂട്ട് ചെയ്യുക</button>
    <div id="output"></div>

    <!-- rust_app /assets ഡയറക്ടറിയിൽ ഉണ്ടായിരിക്കണം! -->
    {{ $wasm_path := resources.Get "rust_app/pkg/rust_app_bg.wasm" }}

    <script>
      wasm_path = "{{ $wasm_path.Permalink }}";
    </script>

    {{ $index_js := resources.Get "rust_app/www/index.js" | js.Build }}

    <script type="module" src="{{ $index_js.Permalink }}"></script>
  </body>
</html>

ഇവിടെ പ്രധാനമായും ഞങ്ങൾ ജെഎസ് എൻവയോൺമെന്റിൽ ഗ്ലോബൽ wasm_path വേരിയബിൾ സജ്ജമാക്കുന്ന ഭാഗമാണ്. ഇത് രണ്ട് കാര്യങ്ങൾ ചെയ്യുന്നു:

ആ പാത fetch അഭ്യർത്ഥനകളിലൂടെ ലഭ്യമാക്കാൻ Hugo-യെ പറയുന്നു
JS സ്ക്രിപ്റ്റിന് wasm ബൈറ്റ്കോഡ് എക്സിക്യൂട്ട് ചെയ്യാൻ നൽകുന്നു

ഇപ്പോൾ ഞങ്ങൾക്ക് ഹോം പേജിൽ നിന്ന് പ്രൈം നമ്പർ ജനറേറ്റർ ഉപയോഗിക്കാൻ കഴിയും!

ഉപസംഹാരം

വെബ്‌അസം + ഹ്യൂഗോയെക്കുറിച്ച് ഓൺലൈനിൽ വളരെയധികം വിഭവങ്ങൾ ഉണ്ടായിരുന്നില്ല, അതിനാൽ ആദ്യത്തെ ട്യൂട്ടോറിയൽ ഉണ്ടാക്കാൻ ഞാൻ തീരുമാനിച്ചു. നിങ്ങൾക്ക് വെബ്‌അസം ഡിപ്ലോയ് ചെയ്യാൻ ഒരു ബദൽ/മികച്ച രീതി ഉണ്ടെങ്കിൽ, ദയവായി അഭിപ്രായങ്ങളിൽ എന്നെ അറിയിക്കുക.

←

Obsidian-ലേക്ക് മാറുന്നു

മാക്സിമം എ പോസ്റ്റീരിയോറി (MAP) എസ്റ്റിമേഷൻ

→