Переклад

npm - це пакетний менеджер node.js. З його допомогою можна керувати модулями та залежностями.
Невелика шпаргалка всіх моїх улюблених команд npm:

Встановлення npm

Оновлення npm

Є кілька способів оновити npm. Я віддаю перевагу:
curl https://npmjs.org/install.sh | sh
або
npm install npm -g

Пошук пакетів у npm

npm search hook.io
Підказка: Також можна використовувати search.npmjs.org
Друга підказка: Для пошуку необхідно знати ім'я потрібного пакету (Все чудово шукає за будь-яким словом як в імені пакета, так і в його описі, може неправильно переклав?)

Перегляд інформації про пакет

npm view hook.io

Локальна установка пакетів

Для демонстрації візьмемо пакет http-server.
http-server is a package we"ve written which provides an easy to use wrapper around node"s core http.Server class. Це module makes for good example, since it"s API забезпечується як CLI binary і requirable node.js module.
http-server - пакет, який ми написали, надає простіший інтерфейс у використанні базового модуля http.Server з node.js. Цей модуль є хорошим прикладом використання API як для бінарного CLI, так і для модуля node.js, що підключається.
npm install http-server
Так ми встановимо http-server у нашій робочій директорії.
Ви побачите нову папку у node_modules. Зараз можете не звертати на це увагу.

Встановлення пакета в наш додаток

mkdir mynewapp/ cd mynewapp npm install http-server touch test.js

test.js

var HTTPServer = require("http-server"); var httpServer = новий HTTPServer(( root: "./public" )); httpServer.start();
запустимо скрипт
node test.js
Зверніть увагу на те, як ми робимо: require("http-server")? Що то за магія? (автор молодець)
http-server не є базовим модулем node.js. Цей пакет ми тільки-но встановили з npm. Node.js та npm взаємодіють та автоматично підключають наші локальні модулі з node_modules директорії.

Розуміння різниці між глобальною та локальною установкою

За промовчанням npm встановлюватиме всі пакети в локальному каталозі, в якому ви зараз працюєте. Це правильно.Це може здатися трохи заплутаним, якщо ви раніше працювали з попередніми системами керування пакетами.
Наприклад: mkdir anotherapp/cd anotherapp/touch test.js

test.js

var HTTPServer = require("http-server");
тепер запустимо наш скрипт
node test.js
ми отримаємо цю помилку:
node.js:134 throw e; // process.nextTick error, або "error", а потім перший клік ^ Error: Cannot find module "http-server" на Function._resolveFilename (module.js:326:11) at Function._load (module.js:271: 25) at require (module.js:355:19) at Object. (/Users/maraksquires/dev/nodeapps/anotherapp/test.js:1:80) at Module._compile (module.js:411:26) at Object..js (module.js:417:10) at Module. load (module.js:343:31) у Function._load (module.js:302:12) у Array. (module.js:430:10) at EventEmitter._tickCallback (node.js:126:26)
Це цілком логічно, ми встановили http-server локально у "/mynewapp/", а не в "/anotherapp/".
Є два рішення у цій ситуації:
а) Встановити ще раз пакет, але локально в наш новий додаток
cd anotherapp/ npm install http-server
б) Встановити пакет глобально
npm install http-server -g

Глобальне встановлення пакетів

Якщо ви хочете, щоб пакет був доступний усім додаткам, його потрібно встановити глобально:
npm install http-server -g
Прапор -g означає, що http-server має бути встановлений глобально та бути доступним для всіх додатків.
Тепер ми можемо викликати його require("http-server") у будь-якому нашому додатку.

Крім того, оскільки http-server пакет має свій виконуваний файл, цей файл також буде встановлений як виконуваний http-server і доступний в командах.
Тепер ви можете просто запустити команду:
http-server

Видалення локально встановленого пакета

npm uninstall http-server

Видалення глобально встановленого пакету

npm uninstall http-server -g

Встановлення певної версії пакета

npm install [email protected]

Установка модуля з Github

Важливо. У деяких випадках будуть патчі, форки або гілки, які ви хочете використовувати, але ще не були опубліковані в npm. На щастя, вихідні коди для більшості npm модулів також доступна на www.github.com
git clone git://github.com/nodeapps/http-server.git cd http-server/ npm link
Тепер наша клонована версія http-server пов'язана локально.

Зв'язки будь-яких пакетів локально

Якщо у вас є окремий каталог, що містить пакет npm, то можна створити локальний зв'язок для нього. Це зручно у ситуаціях, коли ми не хочемо опублікувати наш пакет у сховищі npm.
cd http-server/ npm link
На нашу локальну версію http-server створено «пов'язану» для нашої локальної машини. (зв'язок створюється як «copy-paste», спочатку потрібно перейти в потрібний катало і зробити «copy», потім перейти в потрібний каталог і зробити «paste». Так ось зараз ми вивчили як робиться «copy», а нижче буде про « paste» цього модуля)

Зв'язки локальних пакетів для кількох програм

Як ми бачили раніше, npm встановлює пакети в локальний каталог за промовчанням. Так ось npm посилання працює майже так само.
mkdir newapp/ cd newapp/ npm link http-server
Ми вказуємо, що тепер створили зв'язок з http-server у наш новий додаток newapp. Якби ми не виконали npm link http-server, то отримали помилку про відсутній модуль. (а ось наш і «paste» про що я писав вище, тепер вам має бути зрозуміла логіка створення зв'язків)

Скасування зв'язку між пакетами програми

cd newapp/ npm unlink http-server
(тут ми просто скасовуємо наш «paste» для цієї програми)

У цьому посібнику я розповім: як встановити вебпак (webpack), його залежності та налаштувати об'єднання та мінімізацію скриптів через нього.
Це перша частина серії "Webpack у NetBeans проекті".

1. Навіщо все це потрібно?

1. Вже кілька разів у проектах мені знадобилося з кількох скриптів поєднувати в один. Причина такого поділу - кожен скрипт виконує своє завдання, а для зменшення http-запитів при релізі плагіна (або доповнення до WordPress WP-Recall) - потрібно все об'єднати в один. Руками це робити не хочеться.

2. Я люблю коментувати js (не те щоб маніакально, але на допомогу собі - коли повернуся до нього через тривалий час), а коментарі в js - це не каменти в php - у скрипті вони лягають мертвим вантажем у файлі і збільшують його розмір. А цей файл вантажиться у фронті.

3. Хтось не хоче, щоб js був прочитаний людиною. Ну мало... На допомогу приходить "Обфускація" (від лат. obfuscare - затіняти, затемняти; і англ. obfuscate - робити неочевидним, заплутаним, збивати з пантелику) - приведення вихідного тексту або виконуваного коду програми до вигляду, що зберігає її функціональність , але утруднює аналіз, розуміння алгоритмів роботи та модифікацію при декомпіляції.

Ідеальне рішення:

Пишеш скрипти у різних файлах;
Коментуєш їх "від душі";
Не скупишся на назви змінним (вони мають бути такими, що говорять).

При релізі:

Об'єднуєш автоматично вказані файли в один;
Автоматично відбувається мінімізація (видалення прогалин, переносів та коментарів) - скрипт йде в один рядок;
Автоматично файл обфусцірується - імена змінних скорочуються.

Все це призводить до зниження ваги файлу. Що в результаті позначається на швидшому завантаженні файлу.

Подивіться на приклад (всі скрини клікабельні):
Результат ваги файлу ~2 рази

Ну і час "рости далі" настав. Вибір упав на webpack. Але для того, щоб його поставити, доведеться встановити термінал Cygwin в NetBeans (далі: нетбінс, ide), поставити node.js з npm (node package manager) усередині, а потім тільки поставити сам вебпак.
На цьому пригода не закінчиться – у процесі запуску команди $npm run build доведеться доставити webpack-command та webpack-cli – т.к. у терміналі вилізе повідомлення, що їх немає. Рушити без цих пакетів далі буде не можна.

2. Глобальні установки та налаштування:

У житті ніколи через термінал та командний рядок не працював. Все на кнопочки тицяв. Але тут так не прокотить.

2.1. Ставимо термінал Cygwin:

У ide NetBeans є можливість роботи через термінал.
Відкриваємо будь-який свій проект і ось тут він знаходиться:
"Сервіс" -> "Відкрити в терміналі"

Відкриємо термінал

При відкритті терміналу ide попросить вас встановити його. Ви побачите повідомлення на кшталт цього:

встановіть Cygwin і перезапустіть ide

Cygwin – набір утиліт для роботи windows через unix команди. Пакет також містить термінал.

На цю тему мені цікаво вирішити ще кілька питань:
Мінімізація та об'єднання css через webpack;
Автопрефікси на основі сервісу caniuse;
Та звичайно компіляція jsx через babel.

Все, звичайно ж, через нетбінс. Тому цей урок вважатимемо першим із серії.

p.s. якщо ви помітили неточність або друкарську помилку, у вас з'явилися питання або ви хочете висловитися за поточною статтею - ласкаво просимо в коментарі.

Якщо ви працюєте з webpack, але в іншій ide - поділіться своїми враженнями в коментарях. Якщо ще не використовуєте, але придивляєтеся - теж напишіть з якою ide ви налаштовуватимете тісну роботу.

JavaScript все міцніше та міцніше закріплює себе на позиції мови go-to типу для веб-розробників. Front-end розробники використовують JavaScript для того, щоб додати інтерактивності користувачам, а також безпосередньо спілкуватися з back-end сервісами за допомогою AJAX.

JavaScript надає величезну кількість можливостей. Ви можете спокійно покращувати ваші навички і не хвилюватися, що не зможете розробляти повноцінні веб-додатки. Ключовим компонентом Node.js є революція Сhrome версії JavaScript V8, яка дозволяє використовувати JavaScript навіть на серверній частині.

Node.jsтакож може бути використаний для написання desktop додатків, а також для розробки інструментів, які роблять процес розробки веб-додатків ще швидше. Наприклад, за допомогою Node.js ви можете перетворити CoffeeScript на JavaScript або SASS на CSS, а також багато іншого.

NPMдопомагає зручно встановлювати різні модулі для Node.js.

Передмова

Node — це не звичайна desktop програма. Він не встановиться як Word або Photoshop, і у вас не з'явиться ярлика на робочому столі. Ним можна скористатися тільки за допомогою консольних інструкцій (з якими ви хоча б трохи повинні бути знайомі). Спочатку вам здаватиметься, що це не зручно, але незабаром ви звикнете і все стане на свої місця.

Опис установки

Установка Node.js та NPM дуже проста. Все, що вам потрібно зробити, це зайти на офіційний сайт розробника, завантажити файл і встановити його на своєму комп'ютері.

Етапи встановлення

Тестуємо

Для того, щоб переконатися, що все було правильно встановлено, слідуйте три простих етапи нижче.

Тестуємо Node.js.Відкрийте консоль Windows і введіть node -v .

Тестуємо NPM.Відкрийте консоль Windows і введіть npm -v .

Створіть файл.Створіть будь-який файл, я назву його hello.js і введіть console.log("Node.js is installed"); , після чого за допомогою node команди, я викликаю файл hello.js: node hello.js — це має вивести «Node.js is installed.».