Прочтите Часть 1 этой серии здесь:



Использование модулей ржавчины для JavaScript / веб-разработки (часть I)
Одна из многообещающих причин, по которой я начал изучать ржавчину, заключается в том, что ее можно использовать для создания модулей для Интернета, используя ... medium.com



Часть 1 поста в первую очередь касалась интеграции модулей ржавчины с JavaScript с помощью wasm. Но это потребовало множества ручных процедур.

Ручные процедуры:

  1. Выполните сборку модулей ржавчины для генерации wasm вывода.
  2. Переместите сгенерированный файл web.wasm в каталог ресурсов.

Один из способов решить эту проблему - написать собственный сценарий оболочки, который делает это всякий раз, когда изменяется файл ржавчины.

Еще один более удобный способ - использовать webpack. 🧞‍♂️🎉

* Предварительное условие:

Настройте проект ржавчины из Части 1 этого поста. Следуйте за Setting up the rust project и Building wasm from rust частями сообщения.

Использование модулей ржавчины в интерфейсе с помощью Webpack

Настройка внешнего интерфейса на основе веб-пакета

Начнем с создания нового проекта

  1. mkdir webpackasm && cd webpackasm - создание директории проекта
  2. git init && yarn init или git init && npm init - инициализация git и npm / yarn
  3. yarn add --dev webpack webpack-cli webpack-dev-server - установка зависимостей.

Теперь создайте следующую структуру каталогов / файлов

webpackasm
├── index.html
├── package.json
├── src
│   └── index.js
├── webpack.config.js
└── yarn.lock

Измените содержимое webpackasm/index.html на

<html>
  <head>
    <title>Webpack WASM</title>
  </head>
  <body>
    Hello
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

Ваш webpack.config.js должен выглядеть так:

const path = require('path');
module.exports = {
  entry: './src/index.js',
  mode: process.env.NODE_ENV || 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Вы package.json должны выглядеть так:

{
"name": "webpackasm",
"version": "1.0.0",
"main": "index.js",
"author": "Atul R <[email protected]>",
"license": "MIT",
"scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack -p && cp index.html dist/index.html",
  "clean": "rm -rf ./dist/*"
},
"devDependencies": {
  "webpack": "^4.4.1",
  "webpack-cli": "^2.0.13",
  "webpack-dev-server": "^3.1.1"
 }
}

И наконец webpackasm/src/index.js должен выглядеть так:

console.log('I am alive!!!');

Давайте попробуем запустить это:

yarn start or npm start

Должно открыться окно браузера, которое будет выглядеть следующим образом.

Идеально! теперь у нас есть работающая настройка webpack с livereload.

Теперь давайте добавим секретные ингредиенты, чтобы модули ржавчины работали с webpack.

  1. yarn add --dev wasm-loader rust-native-wasm-loader - добавить нужные загрузчики
  2. Измените webpack.config.js на
const path = require('path');
module.exports = {
  entry: './src/index.js',
  mode: process.env.NODE_ENV || 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.rs$/,
      use: [{
        loader: 'wasm-loader'
      }, 
      {
        loader: 'rust-native-wasm-loader',
        options: {
          release: true
        }
      }]
    }]
  }
};

Также теперь добавьте следующий код в src/index.js

import loadWasm from 'path/to/the/lib.rs';
console.log('I am alive!!!');
loadWasm().then(result => {
  const {add, subtract, multiply} = result.instance.exports;
  console.log('4 + 2 = ', add(4, 2));
  console.log('4 - 2 = ', subtract(4, 2));
  console.log('4 * 2 = ', multiply(4, 2));
});

Давайте разберем приведенный выше код.

import loadWasm from 'path/to/the/lib.rs';

Это тот же lib.rs файл из созданного нами веб-ящика. Webpack обнаружит, что это файл ржавчины, и запустит загрузчики, указанные в конфигурации webpack. В данном случае это будут rust-native-wasm-loader и wasm-loader.. Эти загрузчики компилируют lib.rs в wasm, а затем инициализируют wasm в среде javascript.

Все ручные работы, которые мы делали в Части 1, теперь автоматизированы с помощью webpack.

Давай запустим!

yarn start должен открыться

Как это круто !! 🎉

Загрузка модулей ржавчины в серверную часть

Вы можете использовать ту же технику rust -> wasm для загрузки модулей ржавчины в узел бэкэнд. Но есть альтернативный метод, который значительно упрощает работу с модулями ржавчины на стороне узла. Кроме того, в большинстве случаев wasm для nodejs - это просто перебор.

Часть 3 расскажет, как загрузить модули ржавчины в бэкэнд (NodeJS) без Webassembly.

Ссылка на часть 3: https://medium.com/@atulanand94/using-rust-modules-for-javascript-web-development-part-3-3-nodejs-7c71e4ae23fe

Исходный код:

Https://github.com/master-atul/rust-module-in-javascript-blog-series

Использованная литература: