Какво са NPM, прежда, Babel и Webpack; и как правилно да ги използвате?

Повечето от нас, които се включиха в изграждането на интерактивни уеб приложения, започнаха от изграждането на нормални уебсайтове, използвайки библиотеки като jQuery. Докато вървим напред към започването на нашето приключение, първо се натъкваме на тези четири технологии. Създаването на проект React става болезнено преживяване.

В тази статия ще се опитаме да облекчим това болезнено преживяване, като обясним тези технологии една по една и как работят заедно.

NPM и прежда

Тези две технологии решават абсолютно същия проблем. За да бъдем по-конкретни, Преждата е набор от NPM, който решава много проблеми, които има NPM. И така, за какво са тези?

NPM означава Node Package Manager. Именно това е описаното от името му. Това е мениджър на пакети за базирани на Node среди. Той следи всички пакети и техните версии и позволява на програмиста лесно да актуализира или премахва тези зависимости. Всички тези външни зависимости се съхраняват във файл, наречен package.json. Първоначалният файл може да бъде създаден лесно с помощта на CLI npm init (при условие че NodeJS е инсталиран в системата). Когато инсталирате пакет с помощта на NPM, пакетите се изтеглят от специален регистър. Има много функции на NPM като публикуване. Ако искате да научите повече за NPM, разгледайте връзките в долната част.

Всеки език, който използваме, има някаква форма на мениджър на пакети, официален или трети. PHP има Composer, Python има PyPi, Java има Gradle и т.н.

Сега, нека да поговорим накратко за Прежди. Това е мениджър на пакети, който използва регистър на NPM като своя резервен. Преждата има две основни предимства пред NPM. Първо, Прежда създава файл на yarn.lock. Този файл съхранява точните версии на зависимостите до последната цифра. Когато инсталирате, Прежда първо проверява заключващия файл за версиите, след това проверява файла package.json. NPM има команда за свиване, която прави точно това. Преждата обаче създава и актуализира своя заключващ файл автоматично, когато зависимостите се инсталират / актуализират. Второ, Преждата е много бърза. Когато инсталирате зависимости за даден проект, NPM инсталира пакети последователно. Това забавя значително представянето. Преждата решава този проблем, като инсталира паралелно тези пакети.

Това е засега за NPM и Прежди.

Babel

Както всеки език, Javascript също има версии, наречени ECMAScript (кратко за ES). В момента повечето браузъри поддържат ES5. ES5 беше добър, въпреки че беше болезнено да се кодира в него. Не забравяйте, че това не се чете от вътрешните функции за обратно повикване? Новата версия на Javascript, ES6, известна още като ES2015 (спецификациите на езика бяха финализирани през юни 2015 г.) прави Javascript отново страхотен. Ако искате да научите за ES6, разгледайте връзките в края на тази статия. Всички страхотни функции на ES6 идват с един голям проблем - повечето браузъри не ги поддържат напълно. Тогава Babel идва да играе. Babel е JS транспилатор, който преобразува нов JS код в стари. Това е много гъвкав инструмент по отношение на транслипирането. Човек може лесно да добави предварително зададени настройки като es2015, es2016, es2017, така че Babel да ги компилира в ES5.

Ето един пример - код, написан в ES6:

клас тест {
  CalcuPowers () {
    връщане [1,2,3] .map (n => n ** 2);
  }
}

Babel ще преобразува този код в следното, предвид предварително зададените es2015:

"използвайте строго";
var _createClass = function () {функция defineProperties (цел, подпори) {for (var i = 0; i 
функция _classCallCheck (instance, Constructor) {if (! (instance instanceof Constructor)) {хвърли нов TypeError ("Не мога да извикам клас като функция"); }}
var Test = функция () {
  функция Тест () {
    _classCallCheck (това, тест);
  }
_createClass (Тест, [{
    ключ: "CalcuPowers",
    стойност: функция CalcuPowers () {
      връщане [1, 2, 3] .map (функция (n) {
        върнете Math.pow (n, 2);
      });
    }
  }]);
тест за връщане;
} ();

Това е пример за това как Babel ни позволява да имаме чист, поддържаем код, използвайки най-новите спецификации на JS, без да се притесняваме за поддръжката на браузъра.

WebPACK

Сега, когато знаем какво са Babel и ES6 / 7, бихме искали да използваме това. Бихме искали също да използваме SASS за нашите стилове, PostCSS за автоматично префиксиране. Плюс това, бихме искали да сменим и унифицираме както нашия CSS, така и Javascript код. Webpack решава всички тези проблеми, използвайки един конфигурационен файл (наречен webpack.config.js) и един CLI команден уебпакет.

Webpack е модулен инструмент за изграждане, който има два набора функционалност - Loaders и Plugins. Товарачите преобразуват изходния код на модул. Например, стил-товарачът добавя CSS към DOM, използвайки тагове за стил. sass-loader компилира SASS файлове в CSS. babel-loader преобразува JS код, зададен от предварително зададените настройки. Приставките са ядрото на Webpack. Те могат да правят неща, които товарачите не могат. Например, има приставка, наречена UglifyJS, която минимизира и обезценява изхода на webpack.

Да ги сложим всички заедно

Сега ние знаем концепции, които стоят зад това, нека да изградим просто Hello Hello приложение, използвайки Babel, SASS, Webpack, Прежда и React. Това приложение просто ще покаже Hello World от компонент React. Не говорих за React, но следната верига от инструменти се използва много в приложенията React; затова избрах да покажа този пример, използвайки React.

Първо, нека инсталираме прежда в световен мащаб. Ако сте на Linux система и имате инсталиран NodeJS, въведете

sudo npm инсталирайте -g прежда

Ако използвате macOS и имате инсталирани NodeJS и Homebrew, въведете

варя инсталирайте прежда

Сега, когато имаме инсталирана Прежда, да отидем в работната ни директория. Веднъж ние сме в нашата работна директория (моята е ~ / пример-реакция-приложение), въведете прежда init --yes. Ако проверите вашата директория, сега ще видите, че файлът package.json е създаден.

Време е да инсталирате всички зависимости. Трябва да решим от какво се нуждаем за нашия проект - Webpack, Babel, синтаксис Babel JSX, Babel ES2015, SASS и всички необходими товарачи за уебпакет:

добавяне на прежда --dev webpack babel-core babel-loader babel-предварително зададена реакция babel-preset-es2015 node-sass css-loader sass-loader стил-loader

Ние също се нуждаем от React:

прежда добавете реагирайте реакция-дом

Може да попитате защо добавихме --dev флаг за зависимости от уебпакет. След като инсталирате и двете, ако проверите файла package.json, ще видите, че инсталираните с флаг --dev са в масива devDependences, докато тези без са в масив на зависимости. Ако инсталирате този проект в производствена среда, ще бъдат инсталирани само пакети с несъответствия.

След като зависимостите са инсталирани, нека създадем нашето примерно приложение. Структурата на приложението ще бъде както следва:

SRC /
   /index.jsx
   /index.html
   / компоненти
       /HelloWorld.jsx
   / стилове
       /app.scss
       / компоненти
           /hello-world.scss

В src / компоненти / HelloWorld.jsx добавете следния код:

import React, {Component} от 'react';
експортният клас HelloWorld разширява компонент {
    render () {
        връщане (
            
                

Здравейте, свят

                     );     }
}
експортиране по подразбиране HelloWorld;

В src / index.jsx ще включим компонента HelloWorld и ще го направим. Ще включим и нашия стил sass:

import React от 'реагира';
import ReactDOM от 'react-dom';
импортиране HelloWorld от './components/HelloWorld';
import "./styles/app.scss";
ReactDOM.render (
   ,
   document.getElementById ( "приложението")
);

В src / styles / app.scss ще включим компонентите / hello-world.scss:

@import 'компоненти / здрав свят';

В src / styles / компоненти / hello-world.scss, променете цвета на контейнера hello world на червен:

.Здравей свят {
    цвят: червен;
}

src / index.html ще зареди файла на пакета:



<Глава>
   
    Примерно реагиращо приложение 

<Тяло>
   
   

Сега, когато добавихме цялата структура на приложението, трябва да настроим Webpack. Първо създаваме webpack.config.js в корена на работната директория. Webpack се нуждае от входна точка и изходна директория. Нашата входна точка е src / index.jsx файл. Нека да зададем нашата изходна директория да бъде изходно и изходно име на файл bundle.js. Трябва също така да направим, че файловете, които започват с .jsx, не се нуждаят от разширението, което да се включва при импортирането му.

В конфигурационния файл на уебпакета нека добавим тези две важни полета:

// Тази библиотека ни позволява лесно да комбинираме пътеки
const път = изисквам ('път');
module.exports = {
   запис: path.resolve (__ dirname, 'src', 'index.jsx'),
   изход: {
      path: path.resolve (__ dirname, 'output'),
      име на файл: 'bundle.js'
   }
   разрешаване: {
      разширения: ['.js', '.jsx']
   }
};

Сега трябва да настроим нашите товарачи. За файлове, които завършват с разширение .jsx, ще използваме babel-loader с es2015 и ще реагираме на предварително зададени настройки. За файлове, които завършват с разширение .scss, ще използваме sass-loader, css-loader и style-loader. Ето как ще изглежда нашия webpack.config.js, след като добавим тези товарачи:

// Тази библиотека ни позволява лесно да комбинираме пътеки
const път = изисквам ('път');
module.exports = {
   запис: path.resolve (__ dirname, 'src', 'index.jsx'),
   изход: {
      path: path.resolve (__ dirname, 'output'),
      име на файл: 'bundle.js'
   }
   разрешаване: {
      разширения: ['.js', '.jsx']
   }
   модул: {
      правила: [
         {
             тест: /\.jsx/,
             използвайте: {
                товарач: „товарач-товарач“,
                опции: {предварително зададени настройки: ['реагира', 'es2015']}
             }
         }
         {
            тест: /\.scss/,
            употреба: ['style-loader', 'css-loader', 'sass-loader']
         }
      ]
   }
};

Сега трябва да стартираме webpack. Най-лесният начин да го направите е да го добавите в package.json. Добавете следното към корена на файла на JSON:

скриптове: {
    "build": "webpack -p"
}

Flag -p означава производство, което минимизира и обезличава кода, без да е необходимо да включвате плъгините в конфигурацията. След като запазите файла, отворете терминала и напишете изграждането на прежда. Ако проверите изходната директория сега, ще видите файла bundle.js, създаден вътре. Няма да говоря как да заредя създадения файл на пакет, тъй като той е извън обхвата на тази статия.

Webpack вече е настройка и пакетният файл се създава. Време е да улесним развитието. Нуждаем се от горещо зареждане за по-бързо развитие. Най-лесното и най-доброто решение е да използвате Webpack Dev Server. Първо трябва да актуализираме нашата конфигурация за уебпакети. Добавете следното към корена на конфигурацията на уебпакета:

devServer: {
   contentBase: './src',
   publicPath: '/ изход'
}

Тези два реда казват на webpack dev сървъра да чете съдържание от src директория, за да обслужва активите под / изходния URL адрес. Сега трябва да отидем до терминала и да инсталираме webpack dev сървър

прежда добавете --dev webpack-dev-сървър

След като webpack dev сървър е инсталиран, нека добавим още един скрипт към package.json, за да го стартирате. Под скриптове добавете следното:

"dev": "webpack-dev-server --hot --inline"

--hot флаг щандове за горещо зареждане, --вграден флаг означава, че не се показва лента с инструменти на webpack dev сървър. Харесва ми го по този начин, затова го настроих по този начин.

Сега нека го изпълним:

прежда тече dev

Webpack Dev Server работи по подразбиране в порт 8080. Отворете браузъра си и напишете http: // localhost: 8080 и всички сте готови.

Примерен проект, който създадохме, се намира на следния URL адрес: https://github.com/appristas/example-react-project

заключение

Целта на тази статия беше да обясни защо тези инструменти са необходими за бързо изграждане на интерактивни уеб приложения, използващи React (или всяка друга рамка за този въпрос) и как тези инструменти работят заедно, за да осигурят бързо развитие и разгръщане с едно кликване.

За мен е важно да спомена, че Facebook е създал страхотен инструмент за бързо реагиране на приложения, без да се нуждае от конфигурация за изграждане: create-react-app. Под предния капак, този стартов пакет също използва webpack и babel.

звена

НПМ: https://www.npmjs.com
Прежда: https://yarnpkg.com
Babel: https://babeljs.io
Webpack: https://webpack.js.org

Ревизиите

  • [10/03/2017] Добавени разделителна способност и разширения към основната ни конфигурация за уебпакет, която е необходима за импортиране на JS файлове без въвеждане на разширения.
  • [05/11/2017] Фиксирани някои граматически грешки. Незначителни промени в структурата.