Dzięki oficjalnemu wsparciu zespołu edytora WordPress (Gutenberg) możesz teraz szybko rozpocząć pracę z wtyczką blokową za pomocą skryptu tworzenia bloku WordPress (@wordpress/create-blockpakiet npm).
Ten artykuł dotyczy starszej wersji skryptu tworzenia bloku
Chociaż teorię można nadal zastosować, niektóre informacje zawarte w tym artykule mogą nie być już zgodne z najnowszym skryptem tworzenia bloku. Tutaj możesz zapoznać się z naszym zaktualizowanym przewodnikiem tworzenia skryptów blokowych.
Mamy również zaktualizowany przewodnik dotyczący dodawania dodatkowych punktów wejścia do webpacka.
W tym artykule dowiemy się, jak dodać niestandardowe webpack.config, aby rozszerzyć wp-scriptsfunkcjonalność kompilacji bloku generowanego przez blok.
Dzięki temu możemy rozwinąć npm startpolecenie, aby uruchomić dodatkowe zadania. W tym przypadku skonfigurujemy wtyczkę do kompilacji Sass (sass, scss) do css.
Skompilujemy Sassa z /srcfolderu do plików style.cssi editor.cssw katalogu głównym wtyczki.
Twórz nasze pliki Sass
Pierwszą rzeczą, którą zrobimy, jest utworzenie nowego folderu pod adresem /src/scss. Tutaj dodamy dwa pliki:
/src/scss/editor.scss/src/scss/style.scss
Skopiujemy pliki cssz /editor.cssi /style.cssdo nowo utworzonych plików.
Następnie usuniemy pliki /editor.cssi /style.css.
Pliki SCSS i nowa struktura folderów.
Zaimportuj Sassa do/src/index.js
U góry swojego /src/index.jsdodaj następujące stwierdzenia:
import './scss/editor.scss';
import './scss/style.scss';
Umożliwi to webpackowi pobranie .scssplików w celu ich przetworzenia.
Importując Sassa na górze naszego pliku w ten sposób, umożliwi nam to skompilowanie Sassa dla wielu bloków w tej samej wtyczce w jednym pliku. W tym przypadku skompiluje Sassa do pojedynczych plików /editor.cssi /style.cssplików dla całej wtyczki.
Skonfigurujwebpack.config
Utwórz nowy plik w katalogu głównym wtyczki o nazwie /webpack.config.js. Skopiuj następujący kod do tego pliku:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
}
};
Teraz w swoim terminalu wpisz następujące polecenie cd’ed do katalogu głównego wtyczki:
Wtyczka powinna normalnie skompilować JavaScript do folderu kompilacji.
Instalowanie pakietu do kompilacji Sass
Zamierzamy użyć mini-css-extract-pluginpakietu npm do tworzenia .cssplików z naszego Sassa, w tym celu potrzebujemy również kilku dodatkowych pakietów, aby .scssnajpierw przetworzyć pliki na CSS.
Zainstalujemy scss-loaderpakiet npm, aby umożliwić nam kompilację CSS do Sass. ma to zależność node-scss.
Zainstalujemy również css-loaderpakiet npm, aby umożliwić nam obsługę @importinstrukcji w CSS.
npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
Teraz rozszerz /webpack.config.jsplik, aby wyglądał następująco:
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',
} ),
],
};
W linii 2 zaimportowaliśmy mini-css-extract-plugin, w linii 20 zadeklarowaliśmy ją jako wtyczkę i przekazaliśmy ../[name].cssjako filename. Oznacza to, że skompilowany plik zostanie dodany do katalogu głównego wtyczki.
W linii 10 przekazaliśmy obiekt, który ma testparametr, który używa wyrażenia regularnego do wskazania rodzaju sprawdzanego pliku oraz useparametru.
Parametr usezawiera tablicę wszystkich wtyczek, które zamierzamy zastosować do tego testu. Uruchamia wtyczki od dołu listy, kończąc na górze.
Teraz, jeśli uruchomimy npm start, utworzy .cssplik w katalogu głównym wtyczki.
Generowanie pliku CSS.
Patrząc na strukturę plików mamy dwa dodatkowe pliki:
/index.css/index.css.map
(Otrzymujemy również kilka plików JavaScript w /buildfolderze, ale wyjaśnię, jak sobie z nimi radzić później).
Plik .mapjest wskaźnikiem, który wskazuje konsoli JavaScript, w którym pliku został pierwotnie zdefiniowany jakiś CSS lub Sass, i pomaga w debugowaniu.
Analizując /index.cssplik, zawiera kod z obu plików /src/scss/editor.scssi ./src/scss/style.scss
To nie jest to, czego chcemy, ponieważ pliki stylów i edytorów są kolejkowane osobno w naszym pliku php wtyczek.
Dzielenie pliku CSS
Aby podzielić ten /index.cssplik, musimy skorzystać z optimization.splitChunksobiektu webpacka 4. Aby uzyskać więcej informacji na temat jego konfiguracji, przeczytaj stronę dokumentacji splitChunks.
Dodaj następujące elementy do swojego /webpack.config.jspliku:
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',
} ),
],
};
Usuń wcześniej wygenerowane pliki i folder kompilacji i uruchom npm start.
Otrzymujemy teraz następujące pliki:
/build/editor.js/build/editor.js.map/build/style.js/build/style.js.map/editor.css/editor.css.map/style.css/style.css.map
Patrząc /editor.cssi /style.csste zostały wygenerowane poprawnie i zawierają kod, który chcemy!
Generowanie edytora i stylów plików CSS.
Pliki w /buildfolderze nie są potrzebne do naszej konfiguracji, zbadam, jak możemy je później usunąć.
Usuwanie niechcianych plików
Do usunięcia niechcianych plików użyjemy ignore-emit-webpack-pluginpakietu npm.
Ta wtyczka uniemożliwia webpackowi wysyłanie (lub "emitowanie" niektórych plików).
Zainstaluj pakiet npm za pomocą polecenia terminala:
npm install ignore-emit-webpack-plugin --save-dev
Zmodyfikuj /webpack.config.jsplik, aby zawierał konfigurację wtyczki Ignore Emit webpack Plugin.
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',
} ),
],
};
Zwróć uwagę na nowe odniesienia w wierszu 2, który zawiera wtyczkę Ignore Emit, oraz w wierszu 41, który mówi wtyczce, które pliki nie mają być emitowane.
Teraz kiedy uruchamiamy npm start(po usunięciu /buildfolderu) /build/editor.js, /build/editor.js.mapi /build/style.jsnie /build/style.js.mapsą już tworzone.
Produkcja tylko produkcja
Jeśli chcemy mieć tylko wynik produktu i wykluczyć .mappliki, możemy po prostu przekazać devtool: falsejako parametr do naszego module.exportsobiektu, a to uniemożliwi .mapgenerowanie plików.
Ponieważ chcemy, aby te pliki były wykluczone tylko na serwerze produkcyjnym, możemy sprawdzić process.env.NODE_ENVustawienie, aby zobaczyć, jakie jest ustawione nasze obecne środowisko, i przekazać je, devtool: falsejeśli jest ustawione na produkcję.
Aby to zrobić, dodaj na początku naszego /webpack.config.jspliku:
const production = 'development' !== process.env.NODE_ENV;
Następnie dodaj na dole pliku:
if (production) {
module.exports.devtool = false;
}
Jeśli npm startpolecenie zostanie uruchomione, a środowisko węzła nie jest ustawione na produkcyjne, .mappliki nie zostaną utworzone.