Передача данных с помощью Webpack

Оригинал: How to share variables across HTML, CSS, and JavaScript using Webpack, автор Adrien Zaganelli

Представим, что у вас в отдельном файлике есть какие-то глобальные значения, и вы хотите передать их при сборке проекта в JS, CSS или HTML код.

С Webpack это очень просто.

Инициализация проекта

Стандартное скучное начало:

Установите node.js, если еще не установили.
Создайте новую папку и инициализируйте проект командой npm init -y.
Установите webpack:

npm install webpack webpack-cli --save-dev

Добавьте в секцию scripts файла package.json команду для быстрой сборки проекта

"build": "webpack"

Вот так должна выглядеть структура файлов:

|-- node_modules/
|-- package.json
|-- webpack.config.js
|-- globals.js
|-- src/
    |-- index.html
    |-- index.js

В globals.js разместите все свои глобальные значения:

module.exports = {
  myTitle: 'Hello, world!',
  myColor: '#42ff87',
};

Конфигурация webpack — самая простая:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
}

Рендер HTML с html-webpack-plugin

Начнем с расшаривания глобальных значений в HTML-файлах. Сейчас src/index.html пуст, добавим туда базовую разметку:

<html lang="en">
<head>
  <title>Webpack shared variables!</title>
</head>
<body>
  <h1><%= myTitle %></h1>
</body>
</html>

Внутри тега h1 находится странная конструкция. Таким образом мы пытаемся вывести в нем глобальную переменную myTitle.

Конечно, это не совсем HTML, а синтаксис шаблонизатора — EJS. Чтобы webpack мог обработать его, нужно подключить плагин html-webpack-plugin. Он будет обрабатывать EJS и выдавать валидный HTML-код.

npm install --save-dev html-webpack-plugin

Теперь добавим его в конфигурацию webpack:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const globals = require('./globals.js')

module.exports = {
  // ... 
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      templateParameters: globals,
    })
  ]
};

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

Запустите команду npm run build — и вуаля! В папке dist сгенерировался файл index.html, где переменная myTitle заменена на строчку Hello, world.

Передача данных в JavaScript

На самом деле, этот пункт здесь просто «до кучи», чтобы дополнить «святую троицу» HTML-CSS-JS.

Разумеется, вы знаете, как использовать переменные из globals.js в JavaScript-файле — и никакие дополнительные настройки webpack для этого не требуются. Просто импортируйте их!

import globals from '../globals.js'

document.write(
'<pre>' +
  JSON.stringify(globals, null, 2) +
'</pre>'
);

Передача данных в CSS

Здесь все будет чуть сложнее. Нельзя просто так взять и передать JavaScript-объект в CSS. Для этого нам понадобится препроцессор, например, SASS.

Webpack из коробки не умеет работать с sass-файлами (впрочем, с css-файлами тоже), поэтому необходимо установить специальные лоадеры.

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

npm install sass-loader node-sass css-loader style-loader --save-dev

Чтобы использовать в коде глобальные переменные из globals.js, мы должны передать их SASS-лоадеру. У него как раз для этого есть опция prependData. Но ее значением должна быть строка, а не JS-объект, поэтому предварительно его нужно конвертировать в нужный формат: "$myColor: red; $myTitle: '...'".

Код конвертера можно взять с GitHub. Разместите его в файле utils/jsToScss.js.

Вот обновленная конфигурация webpack:

const globals = require("./globals.js");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const jsToScss = require("./utils/jsToScss.js");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      templateParameters: globals
    })
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              prependData: jsToScss(globals)
            }
          }
        ]
      }
    ]
  }
};

Теперь вы можете создать файл src/style.scss, использовать в нем глобальную переменную $myColor и импортировать этот файл в src/index.js.

h1 {
  color: $myColor;
}

import './style.scss';

После того, как вы снова соберете проект, откройте в браузере dist/index.html и убедитесь, что глобальная переменная отработала как нужно.

Вот так — довольно просто — можно передать какие-то данные прямо в сборку webpack.

Весь исходный код можно найти в GitHub.

Инициализация проекта

Рендер HTML с html-webpack-plugin

Передача данных в JavaScript

Передача данных в CSS

0 комментариев

Оставить комментарийОтменить ответ