Сборка с webpack и Browserify

Библиотека Synaptic является чистой JavaScript-реализацией нейронных сетей, что позволяет использовать её как в браузере, так и на сервере через Node.js. Для эффективной работы с современными инструментами сборки, такими как Webpack и Browserify, необходимо корректно настроить проект.

Установка через npm:

npm install synaptic

В Node.js модуль подключается стандартным способом:

const synaptic = require('synaptic');

Для использования в браузере через сборщик необходимо подготовить пакет и настроить точку входа.

Подключение с помощью Browserify

Browserify позволяет использовать модули CommonJS в браузере. Основные шаги включают:

  1. Создание файла входа, например app.js:
const synaptic = require('synaptic');

const { Layer, Network, Trainer } = synaptic;

const inputLayer = new Layer(2);
const hiddenLayer = new Layer(3);
const outputLayer = new Layer(1);

inputLayer.project(hiddenLayer);
hiddenLayer.project(outputLayer);

const myNetwork = new Network({
  input: inputLayer,
  hidden: [hiddenLayer],
  output: outputLayer
});

const trainer = new Trainer(myNetwork);

trainer.train([
  { input: [0, 0], output: [0] },
  { input: [0, 1], output: [1] },
  { input: [1, 0], output: [1] },
  { input: [1, 1], output: [0] }
]);

console.log(myNetwork.activate([1, 0]));
  1. Сборка скрипта для браузера:
browserify app.js -o bundle.js

В результате создается единый файл bundle.js, который можно подключить в HTML:

<script src="bundle.js"></script>

Подключение с помощью Webpack

Webpack предоставляет более гибкую систему сборки, поддерживающую модули ES и CommonJS. Для работы с Synaptic необходимо создать минимальный конфигурационный файл webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

После установки зависимостей:

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

Запуск сборки:

npx webpack

Особенности сборки Synaptic для браузера

  1. Размер бандла: Synaptic занимает относительно небольшое место, но при больших проектах с множеством зависимостей рекомендуется использовать Tree Shaking для исключения неиспользуемых модулей.

  2. ES-модули vs CommonJS: Synaptic распространяется как CommonJS-модуль, но Webpack позволяет импортировать его через синтаксис ES:

import synaptic from 'synaptic';
const { Layer, Network, Trainer } = synaptic;
  1. Совместимость с TypeScript: Хотя библиотека не имеет встроенных типов, их можно подключить через DefinitelyTyped:
npm install --save-dev @types/synaptic
  1. Горячая перезагрузка: Для Webpack удобно настроить webpack-dev-server с HMR, чтобы изменения в сети или обучающих данных сразу отражались в браузере.

Организация проекта

Рекомендуется использовать структуру:

project/
├─ src/
│  ├─ app.js
│  └─ neural/
│     └─ network.js
├─ dist/
│  └─ bundle.js
├─ package.json
└─ webpack.config.js

В network.js можно инкапсулировать конфигурацию сети:

import { Layer, Network } from 'synaptic';

export function createXORNetwork() {
  const inputLayer = new Layer(2);
  const hiddenLayer = new Layer(3);
  const outputLayer = new Layer(1);

  inputLayer.project(hiddenLayer);
  hiddenLayer.project(outputLayer);

  return new Network({
    input: inputLayer,
    hidden: [hiddenLayer],
    output: outputLayer
  });
}

Настройка оптимизации Webpack

Для продакшн-сборки полезно включить минификацию и оптимизацию:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  }
});

Это снижает размер bundle.js и ускоряет загрузку страницы.

Вывод

Сборка Synaptic через Browserify или Webpack обеспечивает удобное использование библиотеки в браузерных приложениях. Browserify подходит для простых проектов, где требуется быстрое объединение скриптов. Webpack обеспечивает гибкость, оптимизацию, поддержку модулей ES и интеграцию с современными инструментами разработки, что особенно важно при масштабных приложениях с нейронными сетями и сложной логикой обучения.

Оглавление