Автор оригинала: Adrien Zaganelli.

Ранее на этой неделе я читаю Статья Объясняя, как CSS-In-JS замедляет рендеринг некоторых приложений реагирования и как статические CSS быстрее. Но CSS-in-js очень популярен, потому что, помимо прочего, вы можете стильно динамически использовать переменные JavaScript.

В этом руководстве я покажу вам, как воссоздать этот Perk в любом из ваших веб-проектов благодаря WebPack (и я полагаю, вы знаете, как его использовать). Чтобы начать, мы хотим, чтобы WebPack установить наши исходные файлы в статическую распад/ папка .

Вы можете проверить Исходный код здесь Отказ

1. Настройте наше приложение

Скучная часть

Создайте папку для этого учебника, откройте свой терминал и инимите проект:

npm init -y

Первые вещи сначала, если она еще не сделана, установите node.js и WebPack :

npm install webpack webpack-cli --save-dev

Давайте создадим сценарий в нашем Package.json Это говорит WebPack использовать наш файл конфигурации:

  "scripts": {
    "build": "webpack --config webpack.config.js"
  }

В корне вашей папки создайте Globals.js Файл, где будут сохранены наши общие переменные:

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

Файл конфигурации WebPack выглядит так ( WebPack.config.js ). Создайте его в корне вашей папки:

module.exports = {
  entry: __dirname + '/app/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
};

Наш исходный код будет расположен в приложение папка. Создайте это так:

mkdir app && cd app

Вам понадобится index.html. и index.js Файлы на данный момент. Создайте эти файлы в приложение папка:

touch index.html index.js

Идеально! Вы все набор. ?

Ваша папка должна выглядеть так:

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

2. Визуализируйте наши файлы HTML с помощью HTML-Webpack-Plugin

Это Приложение/index.html пустой. Давайте добавим некоторую разметку в нем, а затем добавить пользовательскую переменную:

  


  
<%= myTitle %>

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

Плагин будет генерировать действующий HTML-файл. Тем временем вы должны переименовать ваши Приложение/index.html файл на Приложение/index.ejs Отказ

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

Давайте вернемся к нашему файлу конфигурации. html-webpack-plugin Имеет интересную Шаблоныпараметры Опция, которая позволяет нам пройти объект в качестве параметра. Включите плагин следующим образом в webpack.config.js :

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

module.exports = {
	// ... previous config, entry, output...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.ejs',
      templateParameters: globals,
    })
  ]
};

Беги NPM запустить сборку и Ta-Daaaaaa «%>» Стал «Hello FreeCodeCamp»! Работа выполнена WebPack во время компиляции, когда он работает html-webpack-plugin Отказ

Видеть? Это было довольно просто с правильным инструментом: HTML ✅.

3. Используйте наши переменные в JavaScript

Феве, так много линий, просто для печати переменной! ? С учетом WebPack, вещи часто усложняются. Ну, это очень просто: в JavaScript просто импортируйте свой файл. В вашем Приложение/index.js :

import globals from '../globals.js'

document.write(
'
' +
  JSON.stringify(globals, null, 2) +
'
'
);

Это распечатает объект наших глобалей на странице. Теперь давайте перейдем к CSS.

4. Используйте общие переменные в наших CSS

Вот наш последний босс?

Хорошо, ребята, ты меня понял … Я лгал. Мы не можем использовать наши глобалы непосредственно в CSS – мы должны использовать предварительно процессор. В этом примере мы будем использовать Sass Отказ

На стороне WebPack плагин не будет достаточно. Мы должны использовать погрузчик Конвертировать SASS в CSS. В этом случае нам нужны Sass-Loader Пакет, поэтому установите его в соответствии с документами:

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

Вернуться к кодированию. Теперь, когда у нас Sass, создайте свой стиль листового файла, Приложение/style.scsss :

h1 {
  color: $myColor;
}

Наша SASS настроена – теперь, как мы можем вводить данные в нее? Sass-Loader Упаковка имеет prependdata вариант! Но он принимает строку в качестве параметра, что означает, что ваши данные должны выглядеть так: «$ MyColor: Red; MyTitle:« ... »; Отказ

Мы должны автоматизировать это и преобразовать объект JavaScript в строку. Я не нашел посылку на NPM Это удовлетворило меня, поэтому я написал Мой собственный конвертер Отказ Загрузите файл и добавьте его в свой проект (в моем примере это Utils/jstoscss.js ).

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

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

module.exports = {
  entry: __dirname + "/app/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "index_bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "app/index.ejs",
      templateParameters: globals
    })
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          {
            loader: "sass-loader",
            options: {
              prependData: jsToScss(globals)
            }
          }
        ]
      }
    ]
  }
};

Вот что вы должны увидеть:

Если вы все еще читаете это руководство, спасибо за внимание. Я надеюсь, что это поможет вам! WebPack – очень мощный инструмент, в котором вы должны больше копать?

NB: В вашем Dist/ Папка вы можете видеть, что не создается никаких CSS. Это потому, что я использую Стиль-погрузчик Чтобы сохранить эту демо просто просто. Чтобы генерировать файл CSS, посмотрите на Мини-CSS-экстракт-плагин Отказ

Оригинал: “https://www.freecodecamp.org/news/how-to-share-variables-across-html-css-and-javascript-using-webpack/”