В моей предыдущей истории я использовал язык C и различные модули npm, доступные для создания модуля веб-сборки, который представляет собой небольшой калькулятор для работы на узле, а также в браузере с использованием той же кодовой базы с разницей в загрузке в зависимости от времени выполнения. Если вы не читали его, обязательно посмотрите C в браузере - Эксперименты с WebAssembly, или вы можете следить за серией, которую я делаю по веб-сборке Эксперименты с Webassembly.
C - хороший язык, но многие его не знают, и если вы хотите сделать что-то популярное в наши дни, это должно быть что-то в мире javascript, поэтому есть AssemblyScript
, который использует подмножество Typescript с небольшими обновлениями, чтобы заставить его работать с веб-сборкой.
Одна из основных целей создания AssemblyScript заключается в том, что вам не нужно изучать новый язык программирования для использования веб-сборки, а также создавать бесклеевые модули WebAssembly, которые очень малы и имеют приличную производительность.
Так много разговоров, давай что-нибудь закодируем. Я буду копировать ту же программу C, базовый калькулятор и тот же пользовательский интерфейс HTML, но на этот раз с другим модулем wasm, созданным с помощью Assemblyscript.
Вот шаги, которые вы должны выполнить, чтобы создать проект AssemblyScript, который хорошо документирован в репозитории и на веб-сайте, но я повторю их и здесь, чтобы вам не приходилось переключаться между вкладками, чтобы подготовиться к базовой настройке.
Настраивать
Создайте новую папку и инициализируйте проект узла, используя npm init
или yarn init
, в зависимости от того, что вы предпочитаете, затем установите Assemblyscript как dev-dependency в свой проект и asinit .
с помощью npx.
mkdir asmscript && cd asmscript
npm init -y
npm install --save-dev assemblyscript
npx asinit .
После этого вы найдете assembly/
каталог, в котором находится ваш код сценария сборки, и в нем будет файл index.ts
с базовым примером веб-сборки.
Код ассемблера для калькулятора
Обновите свой index.ts
следующим образом:
Этот index.ts
файл целиком представляет собой модуль веб-сборки. Если вы видите мой предыдущий код, который был на языке C с использованием модуля webassembly npm, и этот код имеют много общего. Мы экспортируем функции из веб-сборки, но есть различия между кодом C, который я написал, обычным Typescript и AssemblyScript.
Мы использовали double
в коде C, и мы можем использовать number
в Typescript для определения числа чисел с плавающей запятой с десятичными знаками. Где double
- это тип данных C, в котором хранятся числа с плавающей запятой или числа с десятичными знаками. В Typescript number
относится как к целому числу, так и к числу с плавающей запятой. AssemblyScript имеет разные типы данных в зависимости от того, что вы хотите использовать, которые согласованы с типами данных веб-сборки.
Тип данных должен быть в Assemblyscript, в отличие от Typescript. Это вызовет ошибку во время компиляции, если не указан тип данных для переменной или параметра функции.
Когда мы инициализировали проект Assemblyscript с помощью npx asinit .
, он добавил несколько сценариев npm в наши package.json
- asbuild:untouched
и asbuild:optimized
, которые не требуют пояснений. Когда вы запустите их, он создаст по 3 файла для каждого -
untouched.wasm
- Модуль Wasmuntouched.wat
- Текстовое представление wasmuntouched.wasm.map
- Исходная картаoptimized.wasm
- Оптимизирован wasm-модульoptimized.wat
- Текстовое представление оптимизированного модуля wasmoptimzed.wasm.map
- Исходная карта оптимизированного wasm
Запуск в Node.js
Модуль Assemscript легко загрузить в Node, поскольку они уже предоставляют модуль npm для этого @assemblyscript\loader
. Вот код для wasm_loader.js
-
const fs = require( "fs" );
const loader = require( "@assemblyscript/loader" );
module.exports = loader.instantiateSync( fs.readFileSync( __dirname + "/build/optimized.wasm" ), { } )
Использование wasm_loader.js
-
На бегу
> node index.js
1 + 2 = 3
1 - 2 = -1
1 X 2 = 2
1 / 2 = 0.5
1 % 2 = 1
Square root of 9 = 3
Запуск в браузере
Подобно тому, что мы сделали для кода C с использованием модуля npm webassembly, мы будем делать то же самое и здесь, и нет минимальных изменений в файле main.js, который фактически выполняет всю работу по получению событий и отображению. Изменен загрузчик wasm для браузера wasmloader.js
-
И следующее изменение в HTML:
Перейдите на github, чтобы увидеть полный код:
Полное репо с wasm-экспериментами
Источники
Удачного обучения, удачного кодирования!
Первоначально опубликовано на https://skylab.hashnode.dev.