В тази поредица от уроци ще научите как да създадете проста игра на тик-так-палеца, която никога не губи. Ще използваме HTML/CSS(SASS), за да изградим потребителския интерфейс, webpack за групиране на javascript, компилиране на SCSS и транспилиране на най-новите функции на ES6 (ES2015) към ES5 и алгоритъма minimax за кодиране на логиката зад компютърния плейър.

Вижте демо или посетете страницата в github на проекта.

Инсталиране на webpack

За да започнете, първо се уверете, че имате инсталиран npm на вашето устройство. Създайте нова папка където и да е на вашето устройство, след което отворете своя терминал/cmd и отидете до вашата папка, като използвате:

cd path/to/folder

Във вашата директория в терминала изпълнете:

npm init

Командата npm init ще ви зададе куп въпроси като име на проекта, описание, версия и т.н. Тя също така ще създаде файл package.json за вас. Този файл съхранява информация за вашия проект в допълнение към други зависимости на npm. Можете да прочетете повече за това тук.

Вече имаме npm, настроен в нашата папка, време е да инсталираме webpack. В нашата директория с папки ще инсталираме webpack V2, като стартираме:

npm install [email protected] --save-dev

Тази команда ще инсталира webpack в нашата папка и –save-dev ще добави webpack към списъка с npm зависимости във файла package.json.

След това добавете команда build към свойството на вашите скриптове във файла package.json, това ви позволява да изпълнявате конкретни команди, когато пишете npm run build.В момента ще настроим build да изпълнява команда webpack. Нашият файл package.json трябва да изглежда по следния начин:

{
  "name": "tic-tac-toe",
  "version": "1.0.0",
  "description": "Tic Tac Toe implementation with Javascript ES2015",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "themegasm",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.0-rc.0"
  }
}

Конфигуриране на webpack

webpack използва файл, наречен webpack.config в основната папка за своята конфигурация. Първоначално този файл ще съдържа входната точка и изходните файлове, както следва:

В горния код посочихме входна точка, наречена bundle, в webpack входните точки използват относителни пътища, така че './src/index.js'означава, че ще създадем папка в основната ни директория, наречена src вътре в него файл, наречен index.js. Пътят на изхода обаче ще получи абсолютен път, следователно ще използваме nodejs глобална променлива __dirname, за да получим абсолютния път до нашата папка на устройството.

Освен това ще ни е необходим възлов модул, наречен path, който ще използваме, за да създадем път, който е резултат от конкатенация между пътя на папката и папка, която ще наречем distкоято ще съдържа нашия компилиран js код. Така че path.join(__dirname, 'dist') ще доведе до абсолютен път до папка dist в основната ни директория, съвместима както с windows, така и с unix машини.

И накрая, filename: '[name].js' е името на файла, който ще съдържа нашия компилиран js код в папката dist, а[име] е контейнер за името на входната точка, което е пакетв нашия случай.

В нашата основна папка създайте файл, наречен index.html. В този файл ще импортираме нашия компилиран JS файл:

За да тествате нашата конфигурация, добавете израз alert(true) в src/index.js, след което в терминала въведете npm run build. Това трябва да стартира webpack, който ще създадеdist/bundle.js. Като отворим index.html в нашия браузър, трябва да намерим предупредителното съобщение.

Използване на Babel с webpack

webpack има функция, наречена loaders, loaders ви позволяват предварително да обработвате файлове, преди да бъдат вградени във вашата целева папка. Зареждащите програми могат да трансформират файлове от различен език като CoffeeScript в JavaScript. В този урок ще използваме програми за зареждане, за да трансформираме javascript ES2015 в ES5, за да можем да поддържаме по-широка гама от браузъри.

За да направим това, първо ще трябва да инсталираме babel-core и babel-loader, първият модул е ​​просто основната библиотека на babel, докато последният свързва babel core с webpack:

npm install --save-dev babel-loader babel-core

Второ, в нашия файл webpack.config.js ще дефинираме ново правило, което информира webpack да приложи babel-loader към всички js файлове с изключение на папката node_modules.

И накрая, трябва да уведомим babel коя предварителна настройка искаме да използваме. Има много предварителни настройки, налични за нашия случай, ние ще инсталираме preset-env, който включва всички най-нови js функции:

npm install babel-preset-env --save-dev

За да активираме предварително зададената настройка, трябва да създадем файл, наречен .babelrcв основната папка и след това да добавим следното:

{
  "presets": ["env"]
}

Компилиране на SASS файлове

За да компилираме css в webpack, можем да използваме css-loader и style-loader. css-loader ще разреши всички изрази @import и url() във вашия css файл, докато style-loader ще добави тези стилове вградени във вашия <head> таг. За да добавите няколко зареждащи устройства в едно правило, можете да зададете масив и зареждащите устройства ще се прилагат отдясно наляво:

npm install --save-dev css-loader style-loader

След това можете да добавите sass компилатор към този конвейер, като използвате библиотека на трета страна, наречена sass-loader. sass-loader ще компилира scss файлове, преди да влязат другите зареждащи програми. Този зареждащ изисква да бъде инсталиран node-sass:

npm install sass-loader node-sass --save-dev

При този подход може би сте забелязали, че ние добавяме стилове в HTML директно по редовен начин. Това може да не е най-добрият подход, особено за големи CSS парчета. За да се справи с това, webpack има функция, наречена плъгини. Добавките могат да се използват за извършване на някои операции извън конвейера за въвеждане и изход на webpack. В нашия случай се нуждаем от изхода на CSS зареждащите програми, за да компилираме в отделен файл. За да направим това, можем да използваме плъгин, наречен extract-text-webpack-plugin. Този плъгин ще вземе изхода от определено правило и ще го запише в отделен файл. Крайният файл webpack.config.js ще изглежда така:

npm install --save-dev [email protected]

Първо импортираме плъгина и дефинираме нов екземпляр с името на файла, което искаме (style.css) в нашия случай. След това добавяме екземпляра на приставката към свойство на масив от приставки в нашия експортиран обект. И накрая, уведомяваме плъгина кои зареждащи програми да използва чрез extractSass.extract, тъй като забелязвате, че вече не се нуждаем от зареждащия стил.

Накрая ще импортираме css файла в html файла:

Използване на сървър за разработка на webpack

Изпълнението на npm run build след всяка промяна очевидно не е добър подход за компилиране на нашия код. Отнема известно време и компилира всичко; ние обаче трябва само да компилираме файловете, които сме променили, когато ги запазим. За да направите това, webpack предоставя сървър Node.js Express. Този сървър ще ви позволи да видите промените за част от секундата в браузъра. За да го инсталирате, стартирайте:

npm install webpack-dev-server --save-dev

В package.json,добавете нов скрипт“serve”: “webpack-dev-server”за да можем да стартирамеnpm run serveза стартиране нашия сървър:

"scripts": {     
    "build": "webpack",     
    "serve": "webpack-dev-server" 
}

Също така webpack изисква свойство, наречено publicPath, което позволява на сървъра да знае къде са нашите статични файлове. За да добавите това, отворете webpack.config.js и актуализирайте обекта output, както следва:

Накрая стартирайте npm run serve и ще ви бъде даден URL адрес на локален хост на определен порт, който можете да отворите в браузъра си и да започнете да разработвате.

Добре, след като имаме всичко готово да започнем да кодираме, нека започнем да изграждаме нашата малка игра в следващата част!