Webpack 3 ve React Kullanarak Bir WordPress Eklentisi Nasıl Geliştirilir (Bölüm 1)

Son birkaç yıldır JavaScript ile çalışıyorsanız, muhtemelen Webpack'i duymuşsunuzdur. Günümüzün JavaScript iş akışında oldukça önemlidir ve Grunt ve Gulp gibi diğer oluşturma araçlarının yerini almıştır. WordPress çekirdek ekibi Webpack'e geçmeyi planlıyor, bu yüzden Webpack'in bir eklenti geliştirme iş akışına nasıl entegre edilebileceğini görmenin tam zamanı olduğunu düşündüm.

Bu makalede, Webpack ve tüm (çoğunlukla) çan ve ıslık kullanarak bir React eklenti arayüzünün nasıl oluşturulacağını gözden geçireceğiz. Canlı bir örnekle takip edebilmeniz için başlangıç ​​eklentisini Github'da yayınladım.

Yine de Web Paketi Nedir?

Tamam, o halde Webpack nedir? Kısacası, Webpack bir varlık paketleyicidir, yani JavaScript, CSS, resim ve diğer varlıklarınızı tek bir dosyada bir araya getirir.

Bir dakika ne?

Bunu neden isteyesin ki? Webpack'in amacı gerçekten kod bölme ve uygulama yapısı kavramına dayanmaktadır. ES2015 ile varlıkları ve bağımlılıkları oldukça kolay bir şekilde içe aktarabilirsiniz ve Webpack ve uygun yükleyici ile JavaScript'inizle CSS/Sass/Less ve görüntüleri içe aktarabilirsiniz.

Örneğin, stil ve css yükleyicilerle aşağıdaki gibi şeyler yapabilirsiniz:

 //App.css body{ background: blue; } //App.js import React from 'react'; import './App.css'; export default class App extends React.Component { render() { return ( <div> <h1>Hello World</h1> </div> ); } }

import './App.css'; line, stillerin sayfaya uygulanabilmesi için App.css içeriğini işaretlememize gömer.

Web paketi oldukça geniş bir konudur, bu nedenle özellikle WordPress ile çalışmak söz konusu olduğunda bazı ana kavramları ve yakalamaları gözden geçireceğiz.

Yapılandırma

Webpack hakkında bilmeniz gereken ilk şey, varsayılan olarak herhangi bir yapılandırma olmadan , sadece CLI arayüzünü kullanarak işlerin yürümesini sağlayabilmenizdir.

 ./node_modules/.bin/webpack src/index.js dist/bundle.js

Yukarıdaki komut, bağımlılıklarıyla birlikte src/index.js dosyasını alacak ve onu dist/bundle.js olarak derleyecektir.

Ancak, çoğu durumda Webpack ile bir yapılandırma dosyası kullanacaksınız, bu yüzden biz de bunu yapacağız. Varsayılan yapılandırma dosyası webpack.config.js , ancak gerekirse --config bayrağıyla diğer dosyaları belirtebilirsiniz. Webpack ile ilgili harika olan şey, JavaScript'te bağımlılıkları tanımlamanıza izin vermesidir. İhtiyacınız olan dosyayı yüklemek için ES2015'in import işlevini kullanabilirsiniz.

Yapılandırma dosyasında giriş nokta(lar)ını ve bir çıkış konumu tanımlamanız gerekir. Çıktı dosyasına herhangi bir ad verilebilir, ancak genellikle bu bundle.js 'dir. Örnek bir webpack.config.js dosyası şöyle görünebilir.

 const path = require( 'path' ); const webpackConfig = { entry: [ './src/index.js' ], output: { filename: 'bundle.js', path: path.resolve( __dirname, 'dist' ) } }; module.exports = webpackConfig;

Burada giriş dosyası ./src/index.js ve çıktı dosyası ./dist/bundle.js .

yükleyiciler

Önceki import './App.css' satırı JavaScript'imizdeki stillerimizi içerir. Güzel değil mi? Doğru yükleyiciyi eklediğiniz sürece, aynı şeyi resimler ve rastgele metin dosyalarıyla da yapabilirsiniz. Yükleyiciler, dosyaları diğer dillerden veya biçimlerden JavaScript'e dönüştürebilen 'ön işlemciler' olarak tanımlanır.

Şimdi yükleyicilerin nasıl çalıştığına bakalım. Stil örneği için birkaç NPM paketi kurmamız gerekecek.

 yarn add style-loader css-loader --dev

Burada Yarn kullanıyoruz, ancak düz 'ol npm'yi de kullanabilirsiniz. Bu paketler yüklendikten sonra, bu yeni yükleyicileri ekleyerek webpack.config.js dosyamızı güncellememiz gerekecek.

 module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } } ] } ] }

Buradaki yabani otlara fazla girmeden, module.rules işlevi, test normal ifadesine dayalı olarak yükleyicileri ve seçenekleri belirlememize olanak tanır. Bu durumda sadece .css ile biten her şeyi ele alıyoruz.

Ve gerçekten bu kadar, artık JavaScript uygulamanıza CSS'yi eklemek için import './App.css' kullanabilirsiniz. Serin fasulye!

Web Paketi Eklentileri

Ele alınacak bir sonraki öğe eklentilerdir. Webpack Eklentileri temelde daha fazla kas içeren yükleyicilerdir. Daha karmaşık olan ve genellikle derleme aşamasının sonunda çalışan diğer işlevleri eklemenize izin verirler. Yükleyicilerin yaptığı gibi tek tek dosyalar yerine genellikle derlenmiş paketle çalışırlar. Yükleyiciler ayrıca genellikle dosyalar yüklenmeden önce çalışır. Dolayısıyla bunu yükleyiciler = derlemeden önce olarak düşünebilirsiniz; eklentiler = derlemeden sonra + 💪.

WordPress ve BrowserSync

Bu örnekte BrowserSync Webpack eklentisini kullanıyoruz. BrowserSync, dosyalarımız her değiştiğinde sayfayı yeniden yükleyen 'canlı yeniden yükleme' aracımız olacak.

Ancak Webpack, (şaşırtıcı olmayan bir şekilde) webpack-dev-server adlı önerilen bir geliştirme sunucusuna sahiptir. Statik siteler için harika olsa da, yapılandırmak ve başka bir sunucuyla çalışmak oldukça zordur. Bizim durumumuzda, WordPress ve özellikle wp-admin, ayrı bir web sunucusu (Apache veya Nginx) altında çalışan PHP uygulamalarıdır. Yapmamız gereken, WordPress sitemizi proxy yapmak ve Webpack paketimizi enjekte etmektir. Webpack-dev-server'a adil bir şans verdim, ancak çok fazla sorunla karşılaştım. BrowserSync sadece çalışıyor, yani biz de bunu yapıyoruz!

BrowserSync'in Webpack ile çalışmasını sağlamak için sadece birkaç paket kurmamız gerekiyor.

 yarn add browser-sync browser-sync-webpack-plugin --dev

webpack.config.js BrowserSync'in çalışması için eklememiz gereken tek şey aşağıdadır.

 plugins: [ new BrowserSyncPlugin( { proxy: config.proxyURL, files: [ '**/*.php' ], reloadDelay: 0 } ), ]

config.proxyURL , WordPress eklenti yönetici sayfamızın URL'sidir, benim durumumda http://plugins.dev/wp-admin/tools.php?page=wp-react-boilerplate ama bu URL config.json içinde ayarlanabilir. Webpack bizim için JS ve CSS dosyalarını idare ettiğinden, PHP dosyalarını BrowserSync ile izliyoruz.

Webpack-dev-server'ı kullanmayarak React geliştirme açısından tahıla karşı geldiğimizi belirtmeliyim. webpack-dev-server ile ilgili en güzel şey, size Sıcak Modül Değiştirme (HMR) sağlamasıdır. HMR'nin satış noktası, tüm sayfanın yenilenmesini gerektirmemesidir. Sadece değişen bileşenler, sanki sihirle yenilenir.

Bizim durumumuzda, tam sayfa yeniden yükleme şimdilik sorun değil ve HMR'yi BrowserSync ile çalıştırmanın yolları var. Webpack 3 😩 ile çalışan mevcut herhangi bir eklentiyi alamadım.

Üretim için Bina

Web paketi yapılandırması açısından ele alınacak son öğe, üretim için inşa etmektir. React sıkıştırılmamışken oldukça ağır olabilir, bu yüzden mümkün olduğunca çabuk yüklenmesi için React'i ve kendi kodumuzu küçülttüğümüzden emin olmamız gerekecek. Neyse ki, Webpack bunu bizim için gerçekten kolaylaştırıyor. Bize biraz yazmaktan tasarruf etmek için derlemeyi çalıştırmak için bir komut dosyası ekleyeceğiz.

yarn build , NODE_ENV=production ./node_modules/.bin/webpack için bir takma addır. Bu komutun yaptığı, NODE_ENV ortam değişkenini üretime ayarlayarak herhangi bir modüle içe aktarmaları küçültme ve/veya optimize etme gibi 'üretim' işlemlerini yapmasını söylemektir.

webpack.config.js dosyamızda, bir derleme çalıştırdığımızda bazı şeyleri ayarlamak için biraz daha yapılandırma ekleyeceğiz.

 if ( process.env.NODE_ENV === 'production' ) { const buildFolder = path.resolve( __dirname, 'wp-react-boilerplate-built' ); webpackConfig.plugins.push( new webpack.optimize.UglifyJsPlugin( { "mangle": { "screw_ie8": true }, "compress": { "screw_ie8": true, "warnings": false }, "sourceMap": false } ) ); webpackConfig.plugins.push( new CleanWebpackPlugin( [ buildFolder ] ) ); webpackConfig.plugins.push( new CopyWebpackPlugin( [ { from: path.resolve( __dirname, 'server' ) + '/**', to: buildFolder }, { from: path.resolve( __dirname, 'wp-react-boilerplate.php' ), to: buildFolder }, ], { // By default, we only copy modified files during // a watch or webpack-dev-server build. Setting this // to `true` copies all files. copyUnmodified: true } ) ); webpackConfig.output.path = buildFolder + '/dist'; }

JavaScript'in tüm bu alanının yaptığı, Webpack'e yalnızca 'üretim' modundaysak aşağıdaki yapılandırmayı çalıştırmasını söylemektir. Yapılandırmamıza birkaç eklenti daha ekledik, webpack.optimize.UglifyJsPlugin() JavaScript'imizi daha performanslı hale getirmek için küçültecek ve çirkinleştirecek. Ardından, her yeni derlemede yeniden başlayabilmemiz için derleme klasörünü kaldırmak için CleanWebpackPlugin() 'i kullanırız. Ve son olarak, eklentimizi oluşturmayı tamamlamak için PHP dosyalarımızı kopyalamak için CopyWebpackPlugin() kullanıyoruz. Yalnızca bir PHP dosyasını ve sunucu dizinini kopyaladığımıza dikkat edin. Tüm JavaScript ve CSS dosyalarımız tek bir dosya olduğundan, derlemeden sonra diğer dosyaların tümüne ihtiyaç yoktur – bundle.js .

Tamamlanmış Webpack yapılandırması hazır, bu yüzden eklenti yönetici sayfamızı oluşturmaya hazırız.

WordPress ile entegrasyon

Şimdiye kadar tüm Webpack konularını ele aldık, peki ya bunu bir WordPress eklentisine dönüştürmeye ne dersiniz? Welp, bu kolay kısmı. wp-react-boilerplate.php dosyasını kontrol ederseniz, 'Araçlar' menü öğesi altında yeni bir yönetici sayfası kurmak için ne kadar mantık gerektiğini göreceksiniz.

 public function admin_menu() { $title = __( 'WP React Boilerplate', $this->plugin_domain ); $hook_suffix = add_management_page( $title, $title, 'export', $this->plugin_domain, array( $this, 'load_admin_view', ) ); add_action( 'load-' . $hook_suffix, array( $this, 'load_bundle' ) ); }

Yukarıdaki yöntemi çağıran sınıf yapıcısında admin_menu eylem çağrısını kullanıyoruz. Tek yaptığımız, React uygulamamızı barındıracak bir yönetim sayfası eklemek. Tereyağından kıl çeker gibi. Ardından, dist/bundle.js dosyasını bir wp_enqueue_script() ile yüklemek için bir add_action() çağrısı ekleriz.

 public function load_bundle() { wp_enqueue_script( $this->plugin_domain . '-bundle', plugin_dir_url( __FILE__ ) . 'dist/bundle.js', array(), $this->version, 'all' ); }

Ve WordPress tarafında hemen hemen hepsi bu (şimdilik). Ayrıca diğer PHP görünümlerini ve mantığını tutmak için bir ./server klasörü oluşturdum, ancak bunu kullanmak isteğe bağlı.

Sonraki adımlar

Birinci bölümü bitirdiniz ‎🎉 Bir sonraki bölümde, eklentinin React tarafının nasıl oluşturulacağını gözden geçireceğiz (görmek istiyorsanız aşağıdan abone olduğunuzdan emin olun).

Eklenti şimdi kullanıma hazır, ancak fazla bir şey yapmıyor. Bir dahaki sefere, REST API'nin nasıl kurulacağına ve React'in bu uç noktalarla konuşacak şekilde nasıl yapılandırılacağına bakacağız. Ayrıca CSS ön işlemcileri gibi şeyleri ve animasyonlar gibi diğer süslü şeyleri de ele alacağız.

Modern JavaScript ve WordPress'i entegre etmeyi başardınız mı? Webpack hakkındaki düşünceleriniz nelerdir? Yorumlarda bize bildirin!