Концепт модуларизације саставни је део већине савремених програмских језика. ЈаваСцрипт, међутим, није имао формални приступ модуларизацији до доласка најновије верзије ЕЦМАСцрипт ЕС6.

У Ноде.јс, једном од најпопуларнијих ЈаваСцрипт оквира данас, модули за скупљање модула омогућавају учитавање НПМ модули у веб прегледачима и библиотеке оријентисане на компоненте (попут Реацт) подстичу и олакшавају модуларизацију ЈаваСцрипт кода.

Вебпацк је један од доступних снопова модула који обрађује ЈаваСцрипт кода, као и сва статичка средства, као што су табеле стилова, слике и фонтови, у пакету. Обрада може обухватати све неопходне задатке за управљање и оптимизацију зависности кода, као што су компилација, спајање, умањење и компресија.

Међутим, конфигурисање Вебпацк-а и његових зависности може бити стресно и није увек једноставан процес, посебно за почетнике.

Овај пост на блогу пружа смернице, са примерима, како да конфигуришете Вебпацк за различите сценарије и указује на најчешће замке повезане са групирањем пројектних зависности помоћу Вебпацк-а.

Први део овог блога објашњава како поједноставити дефиницију зависности у пројекту. Даље, расправљамо и демонстрирамо конфигурацију за поделу кода на више страница и на једну страницу. На крају, разговарамо о томе како да конфигуришемо Вебпацк, ако желимо да у наш пројекат укључимо библиотеке независних произвођача.

Конфигурисање псеудонима и релативних путања

Релативни путеви нису директно повезани са зависностима, али их користимо када дефинишемо зависности. Ако је структура датотеке пројекта сложена, може бити тешко разрешити релевантне путање модула. Једна од најважнијих предности конфигурације Вебпацк-а је та што помаже поједностављењу дефиниције релативних путања у пројекту.

Рецимо да имамо следећу структуру пројекта:

- Project - node_modules - bower_modules - src - script - components - Modal.js - Navigation.js - containers - Home.js - Admin.js

Зависности можемо референцирати релативним путањама до датотека које су нам потребне, а ако желимо да увозимо компоненте у контејнере у нашем изворном коду, то изгледа овако:

Home.js

Import Modal from ‘../components/Modal’; Import Navigation from ‘../components/Navigation’;

Modal.js

import {datepicker} from '../../../../bower_modules/datepicker/dist/js/datepicker';

Сваки пут када желимо да увозимо скрипту или модул, морамо знати локацију тренутног директоријума и пронаћи релативну путању до онога што желимо да увозимо. Можемо замислити како овај проблем може ескалирати ако имамо велики пројекат са угнежђеном структуром датотека или ако желимо да преправимо неке делове сложене пројектне структуре.

Овај проблем можемо лако решити помоћу Вебпацк-овог resolve.alias опција. Можемо прогласити такозване псеудониме - име директоријума или модула са његовом локацијом и не ослањамо се на релативне путање у изворном коду пројекта.

webpack.config.js

resolve: { alias: { 'node_modules': path.join(__dirname, 'node_modules'), 'bower_modules': path.join(__dirname, 'bower_modules'), } }

У Modal.js датотеку, сада можемо много једноставније да увеземо датепицкер:

import {datepicker} from 'bower_modules/datepicker/dist/js/datepicker';

Подјела кода

Можемо имати сценарије у којима морамо додати скрипту у завршни пакет, или поделити завршни пакет, или желимо учитати засебне снопове на захтев. Постављање нашег пројекта и конфигурације Вебпацк-а за ове сценарије можда неће бити једноставно.

У конфигурацији Вебпацк, Entry опција говори Вебпацк-у где је почетна тачка за коначни пакет. Улазна тачка може имати три различита типа података: низ, низ или објекат.

Ако имамо једну почетну тачку, можемо користити било који од ових формата и добити исти резултат.

Ако желимо да додамо више датотека, а оне не зависе једна од друге, можемо користити формат Арраи. На пример, можемо додати analytics.js до краја bundle.js:

webpack.config.js

module.exports = { // creates a bundle out of index.js and then append analytics.js entry: ['./src/script/index.jsx', './src/script/analytics.js'], output: { path: './build', filename: bundle.js ' } };

Управљање више улазних поена

Рецимо да имамо апликацију на више страница са више ХТМЛ датотека, као што је index.html и admin.html. Можемо генерисати више снопова користећи улазну тачку као тип објекта. Конфигурација у наставку генерише два ЈаваСцрипт снопа:

webpack.config.js

module.exports = { entry: { index: './src/script/index.jsx', admin: './src/script/admin.jsx' }, output: { path: './build', filename: '[name].js' // template based on keys in entry above (index.js & admin.js) } };

index.html

admin.html

CommonsChunkPlugin

webpack.config.js

Оба ЈаваСцрипт пакета могу да деле заједничке библиотеке и компоненте. За то можемо користити var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { entry: { index: './src/script/index.jsx', admin: './src/script/admin.jsx' }, output: { path: './build', filename: '[name].js' // template based on keys in entry above (index.js & admin.js) }, plugins: [commonsPlugin] }; , који проналази модуле који се јављају у више делова уноса и ствара дељени сноп који се може кеширати на више страница.

require.ensure

System.import

Сада, не смемо заборавити да додамо претходно упаковане скрипте.

Омогућавање лењег учитавања

Вебпацк може поделити статичка средства на мање делове, а овај приступ је флексибилнији од стандардног спајања. Ако имамо велику апликацију на једној страници (СПА), једноставно спајање у један пакет није добар приступ, јер учитавање једног огромног снопа може бити споро, а корисницима обично нису потребне све зависности од сваког приказа.

Раније смо објаснили како поделити апликацију на више снопова, повезати уобичајене зависности и искористити понашање кеширања у прегледачу. Овај приступ веома добро функционише за апликације на више страница, али не и за апликације на једној страници.

За СПА треба да пружимо само ону статичку имовину која је потребна за приказивање тренутног приказа. Клијентски рутер у СПА архитектури је савршено место за бављење поделом кода. Када корисник уђе у руту, можемо да учитамо само оне потребне зависности за резултујући приказ. Алтернативно, зависности можемо учитати док се корисник помера по страници.

У ту сврху можемо користити admin.jsx или import React, {Component} from 'react'; export default class Admin extends Component { render() { return Admin ; } } функције, које Вебпацк може статички открити. Вебпацк може генерисати засебан пакет на основу ове тачке раздвајања и позвати га на захтев.

У овом примеру имамо два Реацт контејнера; администраторски приказ и приказ контролне табле.

dashboard.jsx

import React, {Component} from 'react'; export default class Dashboard extends Component { render() { return Dashboard ; } }

/dashboard

/admin

Ако корисник унесе или index.jsx или if (window.location.pathname === '/dashboard') { require.ensure([], function() { require('./containers/dashboard').default; }); } else if (window.location.pathname === '/admin') { require.ensure([], function() { require('./containers/admin').default; }); } УРЛ, учитава се само одговарајући потребан ЈаваСцрипт пакет. Испод можемо видети примере са и без рутера на страни клијента.

index.jsx

ReactDOM.render( {props.children} }> { require.ensure([], function (require) { cb(null, require('./containers/dashboard').default) }, 'dashboard')}} /> { require.ensure([], function (require) { cb(null, require('./containers/admin').default) }, 'admin')}} /> , document.getElementById('content') );

style-loader

css-loader

Издвајање стилова у засебне снопове

У Вебпацк-у, утоваривачи , попут ExtractTextWebpackPlugin и webpack.config.js, унапред обрадите табеле стилова и уградите их у излазни ЈаваСцрипт пакет, али у неким случајевима они могу проузроковати Бљесак стилизованог садржаја (ФОУЦ) .

ФОУЦ можемо избећи са var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { loaders: [{ test: /.css/, loader: ExtractTextPlugin.extract('style', 'css’)' }], }, plugins: [ // output extracted CSS to a file new ExtractTextPlugin('[name].[chunkhash].css') ] } који омогућава генерисање свих стилова у засебне ЦСС снопове, уместо да их угради у коначни ЈаваСцрипт сноп.

$

jQuery

Руковање независним библиотекама и додацима

Много пута морамо да користимо библиотеке независних произвођача, разне додатке или додатне скрипте, јер не желимо трошити време на развој истих компоненти од нуле. Доступне су многе старе библиотеке и додаци који се не одржавају активно, не разумеју ЈаваСцрипт модуле и претпостављају присуство зависности глобално под унапред дефинисаним именима.

Испод су неки примери са додатцима јКуери, са објашњењем како правилно конфигурисати Вебпацк како би могао да генерише коначни пакет.

ПровидеПлугин

Већина независних додатака се ослања на присуство специфичних глобалних зависности. У случају јКуери-а, додаци се ослањају на $(‘div.content’).pluginFunc() или ProvidePlugin променљива је дефинисана, а јКуери додатке можемо користити позивањем var $ = require('jquery') у нашем коду.

Можемо користити додатак Вебпацк $ додати webpack.config.js сваки пут кад наиђе на глобални webpack.ProvidePlugin({ ‘$’: ‘jquery’, }) идентификатор.

$

require

Када Вебпацк обрађује код, тражи присуство $ и пружа референцу на глобалне зависности без увоза модула наведеног у this функцију.

Увоз-утоваривач

Неки јКуери додаци претпостављају window у глобалном простору имена или се ослањајте на imports-loader бити example.js објект. У ту сврху можемо користити $(‘div.content’).pluginFunc(); која убризгава глобалне променљиве у модуле.

$

imports-loader

Тада можемо убризгати require('imports?$=jquery!./example.js'); променљиву у модул подешавањем var $ = require('jquery');:

example.js

Ово се једноставно додаје webpack.config.js до module: { loaders: [{ test: /jquery-plugin/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' }] } .

У другом случају употребе:

=>

this

Коришћењем window симбол (не сме се мешати са ЕС6 функције стрелице ), можемо поставити произвољне променљиве. Последња вредност редефинише глобалну променљиву (function () { ... }).call(window); да укаже на this објект. То је исто као да цео садржај датотеке умотате са window и позивање // CommonJS var $ = require('jquery'); // jquery is available // AMD define([‘jquery’], function($) { // jquery is available }); функција са jquery-plugin.js као аргумент.

Такође можемо захтевати библиотеке које користе формат ЦоммонЈС или АМД модула:

(function(factory) { if (typeof define === 'function' && define.amd) { // AMD format is used define(['jquery'], factory); } else if (typeof exports === 'object') { // CommonJS format is used module.exports = factory(require('jquery')); } else { // Neither AMD nor CommonJS used. Use global variables. } });

Неке библиотеке и модули могу подржавати различите формате модула.

У следећем примеру имамо додатак јКуери који користи формат модула АМД и ЦоммонЈС и има зависност од јКуери:

webpack.config.js

module: { loaders: [{ test: /jquery-plugin/, loader: 'imports?define=>false,exports=>false' }] }

define

false

Можемо одабрати који формат модула желимо да користимо за одређену библиотеку. Ако изјавимо exports да буде једнако false, Вебпацк не рашчлањује модул у формату АМД модула, а ако прогласимо променљиву expose-loader да буде једнако webpack.config.js, Вебпацк не рашчлањује модул у формату модула ЦоммонЈС.

Екпосе-лоадер

Ако треба да изложимо модул глобалном контексту, можемо користити module: { loaders: [ test: require.resolve('jquery'), loader: 'expose-loader?jQuery!expose-loader?$' ] } . Ово може бити корисно, на пример, ако имамо спољне скрипте које нису део конфигурације Вебпацк-а и ослањају се на симбол у глобалном простору имена, или користимо додатке прегледача који требају приступити симболу на конзоли прегледача.

window.$ window.jQuery

externals

Библиотека јКуери је сада доступна у глобалном простору имена за друге скрипте на веб страници.

webpack.config.js

Конфигурисање спољних зависности

Ако желимо да укључимо модуле из скрипти споља хостованих, морамо их дефинисати у конфигурацији. У супротном, Вебпацк не може генерисати коначни пакет.

Спољне скрипте можемо да конфигуришемо помоћу externals: { react: 'React', 'react-dom': 'ReactDOM' } опција у конфигурацији Вебпацк. На пример, можемо да користимо библиотеку са ЦДН-а путем одвојене ознаке, док је и даље изричито декларишемо као зависност модула у нашем пројекту.

project | |-- node_modules | |-- react |-- react-plugin | |--node_modules | |--react

react-plugin

Подршка више инстанци библиотеке

Сјајно је користити НПМ менаџер пакета у фронт-енд развоју за управљање независним библиотекама и зависностима. Међутим, понекад можемо имати више инстанци исте библиотеке са различитим верзијама и оне се не играју добро у једном окружењу.

То би се могло догодити, на пример, са Реацт библиотеком, где можемо да инсталирамо Реацт са НПМ-а, а касније друга верзија Реацт-а може постати доступна са неким додатним пакетом или додатком. Наша структура пројекта може изгледати овако:

webpack.config.js

Компоненте које долазе из module.exports = { resolve: { alias: { 'react': path.join(__dirname, './node_modules/react'), 'react/addons': path.join(__dirname, '/node_modules/react/addons'), } } } имају другачију Реацт инстанцу од осталих компонената у пројекту. Сада имамо две одвојене копије Реацт-а и то могу бити различите верзије. У нашој апликацији овај сценарио може покварити наш глобално променљиви ДОМ, а поруке о грешкама можемо видети у евиденцији веб конзоле. Решење овог проблема је имати исту верзију Реацт-а током целог пројекта. То можемо решити помоћу псеудонима Вебпацк.

react-plugin

node_modules

Када console.log(React.version) покушава да захтева Реацт, користи верзију у пројекту

|_+_|

Ако желимо да сазнамо коју верзију Реацт-а користимо, можемо додати

|_+_|

у изворном коду.

Фокусирајте се на развој, а не на конфигурацију Вебпацк-а

Овај пост само огребе површину моћи и корисности Вебпацк-а.

Постоји много других Вебпацк-а утоваривачи и додаци то ће вам помоћи да оптимизујете и поједноставите ЈаваСцрипт групирање.

Чак и ако сте почетник, овај водич вам даје солидну основу за почетак коришћења Вебпацк-а, што ће вам омогућити да се више усредсредите на развој, а мање на конфигурацију пакета.

Повезан: Одржавајте контролу: Водич за Вебпацк анд Реацт, Пт. 1