La începutul acestei săptămâni, am citit un articol explicând modul în care CSS-in-JS încetinește redarea unor aplicații React și cât de CSS static este mai rapid. Dar CSS-in-JS este foarte popular deoarece, printre alte caracteristici, puteți stiliza dinamic folosind variabile JavaScript.

În acest tutorial, vă voi arăta cum să recreați acest avantaj în oricare dintre proiectele dvs. web datorită Webpack (și presupun că știți cum să îl utilizați). Pentru început, dorim ca Webpack să grupeze fișierele noastre sursă într-un static dist/ dosar.

Puteți verifica cod sursă aici.

1. Configurați aplicația noastră

Partea plictisitoare

Creați un folder pentru acest tutorial, deschideți terminalul și inițiați un proiect:

npm init -y

Mai întâi, dacă nu este deja făcut, instalați node.js și Webpack:

npm install webpack webpack-cli --save-dev

Să creăm un script în package.json care îi spune lui Webpack să folosească fișierul nostru de configurare:

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

La rădăcina folderului, creați un fișier globals.js fișier, unde vor fi stocate variabilele noastre partajate:

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

Fișierul de configurare Webpack arată astfel (webpack.config.js). Creați-l la rădăcina folderului:

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

Codul nostru sursă va fi localizat într-un app pliant. Creați-o astfel:

mkdir app && cd app

O să ai nevoie index.html și index.js fișiere în acest moment. Creați acele fișiere în app pliant:

touch index.html index.js

Perfect! Ești gata. ?

Dosarul dvs. ar trebui să arate astfel:

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

2. Redați fișierele noastre HTML cu html-webpack-plugin

Acest app/index.html este gol. Să adăugăm câteva markup-uri și apoi să adăugăm o variabilă personalizată:

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

După cum puteți vedea, încercăm să imprimăm o variabilă în HTML … ceea ce este imposibil! Pentru a funcționa, vom folosi html-webpack-plugin care ne oferă posibilitatea de utilizare EJS sintaxă și injectați date în el.

Pluginul va genera un fișier HTML valid. Între timp, ar trebui să redenumiți app/index.html trimiteți la app/index.ejs.

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

Să ne întoarcem la fișierul nostru de configurare. html-webpack-plugin are un interesant templateParameters opțiune care ne permite să trecem un obiect ca parametru. Activați pluginul după cum urmează în 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,
    })
  ]
};

Alerga npm run build și ta-daaaaa «<% = MyTitle%>» a devenit «Hello Routech»! Lucrarea este realizată de Webpack în timpul compilării când rulează html-webpack-plugin.

Vedea? Acest lucru a fost destul de simplu cu instrumentul potrivit: HTML ✅

3. Folosiți variabilele noastre în JavaScript

Uf, atâtea rânduri doar pentru a imprima o variabilă! ? Cu Webpack, lucrurile se complică adesea. Ei bine, acesta este foarte simplu: în JavaScript trebuie doar să importați fișierul. În dumneavoastră app/index.js:

import globals from '../globals.js'

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

Aceasta va imprima obiectul nostru global pe pagină. Acum să trecem la CSS.

4. Folosiți variabile partajate în CSS

Iată șeful nostru final?

Bine băieți, m-ați luat … Am mințit. Nu ne putem folosi globalii direct în CSS – trebuie să folosim un pre-procesor. În acest exemplu, vom folosi SASS.

Pe partea Webpack, un plugin nu va fi suficient. Trebuie să folosim un încărcător pentru a converti SASS în CSS. În acest caz avem nevoie de sass-loader pachet, așa că instalați-l conform documentelor:

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

Înapoi la codare. Acum că avem SASS, creați fișierul dvs. de foaie de stil, app/style.scss:

h1 {
  color: $myColor;
}

SASS-ul nostru este configurat – acum cum putem injecta date în el? sass-loader pachetul are un prependData opțiune! Dar ia un șir ca parametru, ceea ce înseamnă că datele dvs. ar trebui să arate astfel: "$myColor: red; myTitle: '...'";.

Trebuie să automatizăm acest lucru și să convertim un obiect JavaScript într-un șir. Nu am găsit un pachet npm asta m-a mulțumit, așa că am scris propriul meu convertor. Descărcați fișierul și adăugați-l la proiectul dvs. (în exemplul meu este utils/jsToScss.js).

Finalul tău webpack.config.js ar trebui să arate așa:

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)
            }
          }
        ]
      }
    ]
  }
};

Iată ce ar trebui să vedeți:

Cum sa partajati variabile intre HTML CSS si JavaScript folosind
https://glitch.com/edit/#!/shared-variables-webpack?path=webpack.config.js

Dacă tot citiți acest tutorial, vă mulțumim pentru atenție. Sper sa te ajute! Webpack este un instrument foarte puternic în care ar trebui să te sapi mai mult?

NB: În dist/ dosar pe care îl puteți vedea nu este generat niciun CSS. Asta pentru că folosesc style-loader pentru a păstra această demonstrație simplă. Pentru a genera fișierul CSS, aruncați o privire la mini-css-extract-plugin.