Rollup&Drupal

18.01.2021
Drupal 8

Пишем нативный js в Drupal используя Rollup.
Это не так уж и сложно, достаточно создать проект Rollup и в настройках указать, что наши глобальные переменные как Drupal или drupalSettings будут внешними.

Первым делом инициализируем новый проект package.json

// @file MyModule/package.json
{
  "name": "MyModule",
  "version": "1.0.0",
  "main": "rollup.config.js",
  "license": "MIT",
  "scripts": {
    "build": "rollup -c --environment NODE_ENV:prod",
    "dev": "rollup -c -w"
  },
  "dependencies": {}
}

Создаем конфиг Rollup. rollup.config.js

// @file MyModule/rollup.config.js
export default [
  {
    input: 'assets/source/MyModule.js',
    external: ['drupalCore', 'drupalSettingsCore'],
    output: {
      file: 'assets/js/MyModule.js',
      format: 'iife',
      globals: {
        drupalCore: 'Drupal',
        drupalSettingsCore: 'drupalSettings',
      },
    },
  },
];

И последним шагом создаем наш исходный js файл

// @file MyModule/assets/source/MyModule.js
import Drupal from 'drupalCore';
import drupalSettings from 'drupalSettingsCore';

Drupal.behaviors.MyModule = {
  attach: function (context, settings) {
    context = context || document;
    settings = settings || drupalSettings;
    let count = (2/50)*52;
    console.log(`Result: ${count}`)
  }
};

И в итоге получится

// @file MyModule/assets/js/MyModule.js
(function (Drupal, drupalSettings) {
  'use strict';

  Drupal = Drupal && Drupal.hasOwnProperty('default') ? Drupal['default'] : Drupal;
  drupalSettings = drupalSettings && drupalSettings.hasOwnProperty('default') ? drupalSettings['default'] : drupalSettings;

  Drupal.behaviors.static = {
    attach: function (context, settings) {
      context = context || document;
      settings = settings || drupalSettings;
      let count = (2/50)*52;
      console.log(`Result: ${count}`);
    }
  };

}(Drupal, drupalSettings));