WordPressi redigeerija (Gutenbergi) meeskonna ametliku toega saate nüüd plokkpluginaga kiiresti käivitada ja käivitada, kasutades WordPressi ploki skripti loomise (@wordpress/create-blocknpm pakett) abil.
See artikkel on mõeldud ploki skripti loomise vanemale versioonile
Kuigi teooriat saab endiselt rakendada, ei pruugi osa selles artiklis sisalduvast teabest enam uusima loomisploki skriptiga ühilduda. Meie uuendatud plokiskripti loomise juhendit saate vaadata siit .
Meil on ka uuendatud juhend veebipakki täiendavate sisenemispunktide lisamise kohta.
Selles artiklis uurime, kuidas saate lisada kohandatud ploki loodud ploki kompileerimisfunktsiooni webpack.configlaiendamiseks .wp-scripts
Selle abil saame laiendada npm startkäsku, et käivitada täiendavaid ülesandeid. Sel juhul konfigureerime plugina Sassi (sass, scss) kompileerimiseks css.
Kompileerime Sassi /srckaustast pistikprogrammi juurtes olevatesse style.cssja failidesse.editor.css
Looge meie Sassi faile
Esimese asjana loome uue kausta aadressil /src/scss. Siia lisame kaks faili:
/src/scss/editor.scss/src/scss/style.scss
Kopeerime cssja /editor.cssfailid /style.cssvastloodud failidesse.
Seejärel kustutame failid /editor.cssja ./style.css
SCSS-failid ja uus kaustastruktuur.
Importige Sass sisse/src/index.js
Lisage oma ülaossa /src/index.jsjärgmised avaldused:
import './scss/editor.scss';
import './scss/style.scss';
See võimaldab veebipaketil .scssfailid üles korjata, et neid saaks töödelda.
Sel viisil faili ülaosas oleva Sassi importimine võimaldab meil kompileerida Sassi sama pistikprogrammi mitme ploki jaoks üheks failiks. Sel juhul kompileerib see Sassi üheksaks /editor.cssja /style.cssfailiks kogu pistikprogrammi jaoks.
Seadistagewebpack.config
Looge pistikprogrammi juurtes uus fail nimega /webpack.config.js. Kopeerige sellesse faili järgmine kood:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
}
};
Nüüd sisestage oma terminalis cdplugina juure järgmine käsk:
Pistikprogramm peaks tavapäraselt JavaScripti ehituskausta kompileerima.
Sassi kompileerimiseks paketi installimine
Kavatseme oma Sassist failide loomiseks kasutada mini-css-extract-pluginpaketti npm.css, selleks vajame ka paari lisapaketti, et .scssfailid esmalt CSS-i töödelda.
Installime scss-loaderpaketi npm, mis võimaldab meil kompileerida CSS-i Sassile. sellel on sõltuvus node-scss.
Samuti installime css-loaderpaketi npm, mis võimaldab meil @importCSS-is avaldusi käsitleda.
npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
Nüüd laiendage /webpack.config.jsfaili nii, et see näeks välja järgmine:
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',
} ),
],
};
2 real oleme importinud mini-css-extract-plugin, real 20 oleme deklareerinud selle pistikprogrammina ja edastanud ../[name].csskui filename. See tähendab, et kompileeritud fail lisatakse pistikprogrammi juure.
Real 10 oleme sisestanud objekti, millel on testparameeter, mis kasutab regexit, et näidata, millist faili me kontrollime, ja useparameetrit.
Parameeter usesisaldab kõigi pistikprogrammide massiivi, mida me selle testi jaoks rakendame. See käivitab pistikprogrammid loendi allosast, lõpetades ülaosas.
Kui nüüd käivitame npm start, loob see .cssfaili pistikprogrammi juurtes.
CSS-faili genereerimine.
Failistruktuuri vaadates on meil kaks täiendavat faili:
/index.css/index.css.map
(Kausta saame ka paar JavaScripti faili /build, aga kuidas nendega toime tulla, selgitan hiljem).
Fail on .maposuti, mis näitab teie JavaScripti konsoolile, millises failis mõni CSS või Sass algselt määratleti, ja aitab silumisel.
Faili uurides /index.csssisaldab see nii failide kui /src/scss/editor.scsska /src/scss/style.scssfailide koodi.
See pole see, mida me tahame, kuna stiili- ja redaktorifailid on meie pistikprogrammide php-failis eraldi järjekorda pandud.
CSS-faili tükeldamine
Selle /index.cssfaili jagamiseks peame ära kasutama veebipaketi 4 optimization.splitChunksobjekti. Selle konfiguratsiooni kohta lisateabe saamiseks lugege splitChunksi dokumentatsiooni lehte.
Lisage oma /webpack.config.jsfailile järgmine:
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',
} ),
],
};
Kustutage varem loodud failid ja ehituskaust ning käivitage npm start.
Nüüd saame järgmised failid:
/build/editor.js/build/editor.js.map/build/style.js/build/style.js.map/editor.css/editor.css.map/style.css/style.css.map
Vaadates /editor.cssja /style.cssneed on õigesti genereeritud ja sisaldavad soovitud koodi!
Redaktori genereerimine ja CSS-failide stiil.
Kaustas olevaid faile /buildpole meie seadistamiseks vaja, ma uurin, kuidas saame need järgmisena eemaldada.
Soovimatute failide eemaldamine
Soovimatute failide eemaldamiseks kasutame ignore-emit-webpack-pluginpaketti npm.
See pistikprogramm ei lase veebipaketil teatud faile väljastada (või "emiteerida").
Installige pakett npm terminali käsuga:
npm install ignore-emit-webpack-plugin --save-dev
Muutke oma /webpack.config.jsfaili nii, et see hõlmaks veebipaketi Ignore Emit pistikprogrammi konfiguratsiooni.
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',
} ),
],
};
Pange tähele uusi viiteid real 2, mis sisaldab pistikprogrammi Ignore Emit, ja real 41, mis ütleb pluginale, milliseid faile ei tohi väljastada.
Nüüd, kui käivitame npm start(pärast /buildkausta kustutamist) /build/editor.js, ei looda enam, /build/editor.js.map, /build/style.jsja ./build/style.js.map
Ainult tootmine
Kui tahame, et toode väljastaks ainult toodet ja välistaks .mapfailid, saame lihtsalt devtool: falseoma module.exportsobjekti parameetrina edasi anda ja see takistab .mapfailide genereerimist.
Kuna me tahame, et need failid jäetaks välja ainult tootmisserveris, saame process.env.NODE_ENVsätteid kontrollida, et näha, milline on meie praegune keskkond, ja edastada, devtool: falsekui keskkond on seatud tootmisrežiimile.
Selleks lisage meie /webpack.config.jsfaili ülaossa järgmine:
const production = 'development' !== process.env.NODE_ENV;
Seejärel lisage faili allossa järgmine teave:
if (production) {
module.exports.devtool = false;
}
Kui npm startkäsk käivitatakse ja sõlmekeskkond ei ole tootmisrežiimile seatud, .mapfaile ei looda.