- Переклад
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.jstest.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.
Це цілком логічно, ми встановили 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.comgit 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.».
Як оновити Node.js?
Щоб його оновити, вам потрібно знову завантажити інсталятор і повторити весь процес з самого початку.