Установка через npm и подключение через CDN

Использование пакетного менеджера npm является основным способом подключения библиотеки Crypto-js в современных JavaScript-проектах. Такой подход обеспечивает контроль версий, удобное обновление и интеграцию с системами сборки.

Установка выполняется стандартной командой:

npm install crypto-js

После установки библиотека становится доступной в каталоге node_modules, а также фиксируется в package.json в разделе зависимостей:

{
  "dependencies": {
    "crypto-js": "^4.2.0"
  }
}

Импорт в проекте

В зависимости от используемой системы модулей (ES Modules или CommonJS) способы подключения отличаются.

ES Modules (современный стандарт):

import CryptoJS from 'crypto-js';

CommonJS (Node.js):

const CryptoJS = require('crypto-js');

Импорт отдельных модулей

Crypto-js поддерживает модульную архитектуру, что позволяет подключать только необходимые алгоритмы, снижая размер итогового бандла:

import SHA256 from 'crypto-js/sha256';
import AES from 'crypto-js/aes';

Такой подход особенно важен при работе с фронтендом, где оптимизация размера скриптов критична.

Использование после установки

Пример вычисления хэша:

import SHA256 from 'crypto-js/sha256';

const hash = SHA256('Hello, world!').toString();
console.log(hash);

Пример шифрования:

import AES from 'crypto-js/aes';

const encrypted = AES.encrypt('Secret message', 'password').toString();
console.log(encrypted);

Интеграция со сборщиками

При использовании сборщиков, таких как Webpack, Vite или Rollup, Crypto-js автоматически включается в сборку. Дополнительной настройки обычно не требуется.

Однако важно учитывать:

  • библиотека не использует нативные криптографические API браузера;
  • размер может увеличиваться при полном импорте;
  • tree shaking работает ограниченно, поэтому предпочтителен точечный импорт.

Подключение через CDN

Подключение через CDN удобно для быстрого прототипирования, учебных примеров или проектов без сборки.

Базовое подключение

Добавление библиотеки осуществляется через тег <script>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>

После загрузки в глобальной области становится доступен объект CryptoJS.

Использование в браузере

Пример вычисления SHA-256:

<script>
  const hash = CryptoJS.SHA256('Hello, world!').toString();
  console.log(hash);
</script>

Пример AES-шифрования:

<script>
  const encrypted = CryptoJS.AES.encrypt('Secret message', 'password').toString();
  console.log(encrypted);
</script>

Подключение отдельных компонентов

CDN также предоставляет доступ к отдельным модулям, что позволяет уменьшить объем загружаемого кода:

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/aes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/sha256.min.js"></script>

После этого доступны только соответствующие алгоритмы:

CryptoJS.SHA256('data');
CryptoJS.AES.encrypt('data', 'key');

Порядок подключения

При использовании отдельных файлов важно соблюдать порядок:

  1. базовое ядро (если требуется),
  2. дополнительные алгоритмы.

Однако в большинстве случаев достаточно подключить один файл crypto-js.min.js, который содержит все компоненты.

Сравнение подходов

npm:

  • подходит для production-проектов;
  • поддерживает контроль версий;
  • интегрируется со сборщиками;
  • позволяет использовать модульный импорт.

CDN:

  • не требует установки;
  • подходит для быстрого старта;
  • используется в статических HTML-страницах;
  • зависит от внешнего источника загрузки.

Практические особенности

  • При использовании npm предпочтительно импортировать только необходимые алгоритмы.
  • В браузере через CDN библиотека работает в глобальном пространстве имён, что может привести к конфликтам.
  • Для критически важных приложений рекомендуется избегать CDN без контроля целостности (SRI).
  • Crypto-js реализует криптографию на JavaScript, что уступает по безопасности и производительности нативным Web Crypto API.

Проверка корректности подключения

npm:

import CryptoJS from 'crypto-js';

console.log(typeof CryptoJS); // object

CDN:

console.log(typeof CryptoJS); // object

Если результат отличается, это указывает на проблему подключения (ошибка импорта или загрузки скрипта).

Частые ошибки

1. Неправильный импорт:

import { AES } from 'crypto-js'; // не работает

Правильно:

import AES from 'crypto-js/aes';

2. Отсутствие .toString() при выводе:

const hash = CryptoJS.SHA256('data');
console.log(hash); // объект, а не строка

Правильно:

console.log(hash.toString());

3. Подключение CDN после использования:

<script>
  CryptoJS.SHA256('data'); // ошибка
</script>
<script src="crypto-js.min.js"></script>

Правильно:

<script src="crypto-js.min.js"></script>
<script>
  CryptoJS.SHA256('data');
</script>

Рекомендации по выбору способа подключения

  • для учебных примеров и демонстраций — CDN;
  • для реальных приложений — npm;
  • при необходимости минимизации размера — модульный импорт;
  • при работе в браузере без сборки — единый CDN-файл.

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

Оглавление