WordPress Editor (Gutenberg) -tiimin virallisella tuella voit nyt saada nopeasti käyttöön lohkolaajennuksen käyttämällä WordPress Create Block Script -pakettia (@wordpress/create-blocknpm-paketti).
Tämä artikkeli koskee Luo lohkokomentosarjan vanhempaa versiota
Vaikka teoriaa voidaan edelleen soveltaa, jotkin tämän artikkelin tiedoista eivät ehkä ole enää yhteensopivia uusimman luontilohkokomentosarjan kanssa. Voit tarkastella päivitettyä Luo Block Script -oppaamme täältä.
Meillä on myös päivitetty opas uusien sisääntulokohtien lisäämisestä webpackiin.
Tässä artikkelissa tutkimme, kuinka voit lisätä mukautetun webpack.configlaajentaaksesi wp-scriptslohkon luoman lohkon käännöstoimintoja.
Tällä voimme laajentaa npm startkomentoa suorittamaan lisätehtäviä. Tässä tapauksessa aiomme määrittää liitännäisen kääntämään Sass (sass, scss) kielelle css.
Käännämme Sassin /srckansiosta laajennuksen juuressa oleviin style.cssja tiedostoihin.editor.css
Luo Sass-tiedostomme
Ensimmäinen asia, jonka aiomme tehdä, on luoda uusi kansio osoitteessa /src/scss. Lisäämme tähän kaksi tiedostoa:
/src/scss/editor.scss/src/scss/style.scss
Kopioimme cssja -tiedostot uusiin tiedostoihin /editor.css./style.css
Sitten poistamme tiedostot /editor.cssja ./style.css
SCSS-tiedostot ja uusi kansiorakenne.
Tuo Sass sisään/src/index.js
Lisää viestisi yläosaan /src/index.jsseuraavat lausunnot:
import './scss/editor.scss';
import './scss/style.scss';
Tämä antaa webpackille mahdollisuuden poimia .scsstiedostot, jotta ne voidaan käsitellä.
Tuomalla tiedostomme yläreunassa olevan Sassin tällä tavalla, voimme kääntää Sassin useille lohkoille saman laajennuksen sisällä yhdeksi tiedostoksi. Tässä tapauksessa se kokoaa Sassin yhdeksi /editor.cssja /style.csskoko laajennuksen tiedostoiksi.
Asennawebpack.config
Luo uusi tiedosto nimisen laajennuksen juureen /webpack.config.js. Kopioi seuraava koodi kyseiseen tiedostoon:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
}
};
Kirjoita nyt terminaaliin seuraava komento cdlisäosan juureen:
Laajennuksen tulee kääntää JavaScript koontikansioon normaalisti.
Paketin asentaminen Sassin kääntämistä varten
Aiomme käyttää mini-css-extract-pluginnpm-pakettia tiedostojen luomiseen .cssSassistamme, tätä varten tarvitsemme myös pari lisäpakettia .scsstiedostojen käsittelemiseksi ensin CSS:ksi.
Asennamme scss-loadernpm-paketin, jotta voimme kääntää CSS:n Sassiin. tämä on riippuvainen node-scss.
Asennamme myös css-loadernpm-paketin, jotta voimme käsitellä @importlauseita CSS:ssä.
npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
Laajenna /webpack.config.jstiedostoa niin, että se näyttää seuraavalta:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Rivillä 2 olemme tuoneet mini-css-extract-plugin, rivillä 20 olemme ilmoittaneet sen laajennukseksi ja siirtäneet sen ../[name].cssnimellä filename. Tämä tarkoittaa, että käännetty tiedosto lisätään laajennuksen juureen.
Rivillä 10 olemme syöttäneet sisään objektin, jolla on testparametri, joka käyttää regex-lausetta osoittamaan, minkä tyyppistä tiedostoa tarkistamme, ja useparametrin.
Parametri usesisältää joukon kaikkia laajennuksia, joita aiomme soveltaa kyseiseen testiin. Se suorittaa laajennuksia luettelon alaosasta, joka päättyy yläosaan.
Jos nyt suoritamme, npm startse tuottaa .csstiedoston laajennuksen juureen.
CSS-tiedoston luominen.
Kun tarkastellaan tiedostorakennetta, meillä on kaksi lisätiedostoa:
/index.css/index.css.map
(Saamme myös pari JavaScript-tiedostoa /buildkansioon, mutta selitän kuinka käsitellä niitä myöhemmin).
Tiedosto .mapon osoitin, joka osoittaa JavaScript-konsolillesi, mihin tiedostoon jokin CSS tai Sass alun perin määritettiin, ja auttaa virheenkorjauksessa.
Kun /index.csstiedostoa tutkitaan, se sisältää koodin sekä tiedostoista /src/scss/editor.scssettä /src/scss/style.scsstiedostoista.
Tätä emme halua, koska tyyli- ja muokkaustiedostot on jonossa erikseen lisäosien php-tiedostossa.
CSS-tiedoston jakaminen
Tämän /index.csstiedoston jakamiseksi meidän on hyödynnettävä webpack 4:n optimization.splitChunksobjektia. Lisätietoja sen määrityksestä on splitChunks – dokumentaatiosivulla.
Lisää /webpack.config.jstiedostoosi seuraavat:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
enforce: true,
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
enforce: true,
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Poista aiemmin luodut tiedostot ja koontikansio ja suorita npm start.
Saamme nyt seuraavat tiedostot:
/build/editor.js/build/editor.js.map/build/style.js/build/style.js.map/editor.css/editor.css.map/style.css/style.css.map
Tarkastellaan /editor.cssja /style.cssnämä on luotu oikein, ja sisältävät haluamamme koodin!
Muokkausohjelman luominen ja CSS-tiedostojen tyyli.
Kansion tiedostoja /buildei tarvita asennuksessamme, tutkin kuinka voimme poistaa ne seuraavaksi.
Ei-toivottujen tiedostojen poistaminen
Poistaaksemme ei-toivotut tiedostot aiomme käyttää ignore-emit-webpack-pluginnpm-pakettia.
Tämä laajennus estää verkkopakettia tulostamasta (tai "lähettämästä" tiettyjä tiedostoja).
Asenna npm-paketti terminaalikomennolla:
npm install ignore-emit-webpack-plugin --save-dev
Muokkaa /webpack.config.jstiedostoa niin, että se sisältää Ignore Emit webpack -laajennuksen asetukset.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
enforce: true,
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
enforce: true,
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Huomaa uudet viittaukset rivillä 2, joka sisältää Ignore Emit -laajennuksen, ja rivillä 41, joka kertoo liitännälle, mitä tiedostoja ei lähetetä.
Nyt kun suoritamme (kansion npm startpoistamisen jälkeen ), , ja -merkkejä ei enää luoda./build``/build/editor.js``/build/editor.js.map``/build/style.js``/build/style.js.map
Vain tuotanto
Jos haluamme tuottaa vain tuotteen ja jättää .maptiedostot pois, voimme yksinkertaisesti siirtää devtool: falseparametrin module.exportsobjektiimme, jolloin .maptiedostot eivät muodostu.
Koska haluamme, että nämä tiedostot suljetaan pois vain tuotantopalvelimella, voimme tarkistaa process.env.NODE_ENVasetuksen nähdäksemme, mikä nykyinen ympäristömme on asetettu, ja välittää, devtool: falsejos ympäristö on asetettu tuotantotilaan.
Voit tehdä tämän lisäämällä seuraavat /webpack.config.jstiedot tiedostomme alkuun:
const production = 'development' !== process.env.NODE_ENV;
Lisää sitten tiedoston alaosaan:
if (production) {
module.exports.devtool = false;
}
Jos npm startkomento suoritetaan eikä solmuympäristöä ole asetettu tuotantoon, .maptiedostoja ei luoda.