Npm, Node, Webpack — как разобраться новичку?

Question

[nickolay1967]

Всем привет.

На моем компьютере на OS X развернуто несколько проектов, в которых я работаю ШТМЛ-верстальщиком. Многие из них использовали grunt и webpack, node-js, и прочие модные штуки.

Сейчас я бы хотел вплотную для себя заняться более углубленным изучением slim/slim/less/sass и прочими модными вещами, которые требуют grunt/webpack, но я не могу разобраться, как мне лучше запускать эти мини-проект.

У меня есть несколько вопросов.

1. Я знаю, что у меня установлен node. Я делаю node -v, получаю в консоли ответ 6.8.1, а также 7.0.0 в некоторых из проектов. То, что установлено несколько версий Ноды — это нормальная практика? Как глобально установить лучшую версию и удалить лишнее?
   
   
2. Я создал новую папку для своего тестового проекта, зашел в эту папку и через консоль вызываю команду npm install -g webpack-cli, но консоль отвечает, что команда npm не найдена, хотя она работает в каталогах сторонних проектов. Почему не найдена? Наверное, нужно как-то сделать, чтобы она работала глобально? Как? Или нужно делать это как-то иначе?
   
   
3. В новой папке с проектом я делаю brew install npm, но консоль отвечает мне следующее:
   
   

   You can link formula with `brew link node`
   Warning: node-7.1.0 already installed, it's just not linked

   
   
   Пока гуглил, нашел упоминания о символических ссылках, редактирование bash_profile и прочих непонятных для меня вещах. Как сделать символическую ссылку, чтобы команда npm работала везде и из всех каталогов? Правильно ли это? Нужно ли так делать? А если иначе, то как?
   
   
4. . Предположим, мы решили проблему, создали проект, и всё заработало. А завтра, допустим, мне потребовалось создать еще десять таких проектов с одним только вебпаком и версткой внутри. Как мне быть? Есть какой-то единый алгоритм для быстрого старта мини-проектов с использованием webpack?
   
   

Естественно, хотелось бы сделать это всё как можно более канонично (чтобы не плодить костыли на моем ПК), а также чтобы не поломались уже работающие проекты.

Буду рад за советы, ссылки на статьи и книги, где что почитать и как лучше понять всю эту систему.

Спасибо!

Answer 1

[Максим]

1. Странно, я до этого не встречал, чтобы node был разной версии в разных директориях. Давайте здесь поподробнее со скринами посмотрим.

2 и 3 - предлагаю полностью удалить node, а затем установить себе NVM, и когда он установится через него установить последнюю и другие нужные версии node, если будет нужно (обычно хватает последней, но для старых проектов может потребоваться иная).

4 - просто копируете конфиг вебпака из проекта в проекти пилите. Потом, например, вам приходит мысль: так, у этих пяти проектов были общие файлы такие-то, общая структура папок и вот такой параметр в конфиге. Как мне это обобщить? Как вынести в отдельную директорию, из которой я потом буду просто копировать готовый шаблон? (обычно нужно просто скопировать ;) ). Когда у вас будет готовый шаблон, вы приобщитесь к миру с возгласом: у меня есть свой boilerplate. Тогда можете глянуть на чужие (гуглите webpack boilerplate), но не берите сразу чужой просто так, а разберите по кусочкам.

p.s. мне еще ниразу не пригодилось брать "просто для верстки" webpack. Для этих целей использую gulp + browserify, а когда пишу на реакте - webpack.

p.p.s. что почитать? В кратце в гугле поищите следующее: что такое node.js, как npm с ним связан, что происходит когда вы выполняете npm install, как работает секция scripts в package.json.

Answer 2

[UsulPro]

Обратите внимание, что npm install -g webpack-cli, установит webpack-cli глобально а не в Ваш проект.
Могу посоветовать отличное свежее руководство: "JavaScript Stack from Scratch"
в Русском переводе: https://github.com/UsulPro/js-stack-from-scratch