| madeas | 01.06.2018 19:26 |
Node.js и настройка npm
Ребята, кто уже работал с https://www.npmjs.com/ подскажите, какие команды надо вводить, чтобы подгрузить файл из репозитория git https://github.com/madeas/box-shadow...hadows.min.css на сайт?
Уже зарегистрировался, в консоли авторизовался, создал. npm publish и npm publish <box-shadows.css>[@<1.0.2>] не работают, через ссылку тоже пытался добавить. С Nodejs начал работать буквально пару часов назад, осваиваю по ходу чтения документаций, но мне не всё дается. Нужно создать package.json и разместить его в https://www.npmjs.com/~madeas |
Предполагается, что у проекта есть package.json
Напишите в вашем проекте с box-shadow. npm init Потом запушьте изменения с package.json в remote repository. npm умеет подтягивать ресурсы с гитхаба, для этого надо прописать npm i --save https://github.com/madeas/box-shadows.css.git Вы увидите что в вашем package.json в зависимости добавилось, что-то типо "box-shadows": "git+https://github.com/madeas/box-shadows.css.git", Ну и в коде импортировать файл:
require('box-shadows/box-shadows.min.css');
В коде выше я предполагаю, что у вас есть какой-то сборщик, типа webpack |
npm умеет с гитхаба даже так <githubname>/<githubrepo>
Код:
npm i madeas/box-shadows.csshttps://github.com/npm/npm/issues/17379 |
EmperioAf,
по сборщику я тоже ноль)) но хочу на выходных поработать с gulp. Если я правильно понял вас и документацию, сначала надо создать вручную подобный package.json в самом репозитории, забив туда свои данные. Далее - установка node.js Команды: npm install npm login npm init --yes npm install package.json npm install git+https://github.com/madeas/box-shadows.css/tree/1.0.2 (Далее должен подгрузиться созданный пакет, в котором я могу редактировать данные) npm i --save https://github.com/madeas/box-shadows.css.git (в нем я прописываю данные нужного мне файла - https://github.com/madeas/box-shadow...hadows.min.css) npm install <madeas/box-shadows.css>[@<1.0.2>] --save npm publish package.json Все верно? =) К сожалению, у меня нет знакомых, разбирающихся в этом и которые могут наглядно показать как настраивать. И еще вопрос. Я могу редактировать файлы с любой точки? Подключал вчера дома на вин10, но на работе стоит убунту. Если я подключу сюда nodejs, то смогу редактировать свой пак с работы? |
Прописал package.json вручную в репозитории:
{
"name": "box-shadows.css",
"version": "1.0.2",
"description": "A cross-browser collection of CSS box-shadow",
"keywords": [
"cross-browser",
"css",
"box-shadow",
"collection",
"stylesheets",
"inset",
"box-shadows-css",
"generator css box-shadow",
"library"
],
"homepage": "https://madeas.github.io/box-shadows",
"main": "box-shadows.min.css",
"format": "global",
"repository": {
"type": "git",
"url": "https://github.com/madeas/box-shadows.css.git"
},
"author": {
"name": "Andrej Sharapov"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/madeas/box-shadows.css/blob/master/LICENSE"
}
],
"dependencies": {
"express": "madeas/box-shadows.css",
"mocha": "box-shadows.css/box-shadows.min.css#v1.0.2",
"module": "madeas/box-shadows.css#box-shadows.min.css\/1.0.2"
}
}
Подскажите, что писать в dependencies? Если верить документации, то должны быть прописаны данные репозитория, но у других я наблюдаю версию галпа и т.пд данные.
"dependencies": {}
|
Да просто всё. Файл package.json лежит в папке проекта, сразу в корне. При первом же скачивании любого пакета -
npm install blablabla --save- во-первых сама создастся папка node_modules, и туда установятся пакеты, и во-вторых, этот пакет впишется в dependencies Флаг --save - это и есть указание менеджеру прописать его туда, флаг --save-dev - указание прописать в dev-dependencies Тут всё просто, не надо усложнять и заморачиваться. Кстати, файл package.json создаётся командой npm init- он там задаёт вопросы, трам-пам-пам и готово. Короче: 1. Выкидываете этот файл 2. Создаёте папку проекта и заходите в неё (mkdir blabla && cd blabla) 3. npm init (и отвечаете на вопросы) Всё. И наконец, эти какие-то таблицы стилей - нужно просто скачать zip с Гитхаба и распаковать в нужном месте (ну или git clone ...). К пакетам Node.js (и, соответственно, к npm) этот файл отношения не имеет. |
|
Да я же сказал, что этот css-файл - это css-файл. При чём тут Нода и её пакетный менеджер npm?
Эн-пи-эмом можно инсталлировать с гитхаба пакеты, которые там дублируются с репозитория NPM. А это - какая-то библиотека стилей. |
А, ну нашёлся какой-то такой пакет
npm install css-box-shadow --save https://www.npmjs.com/package/css-box-shadow |
так это его кто-то создал уже, получается. Я видимо не понимаю принципа работы с npm и как создать свой package.json
https://www.npmjs.com/package/animate.css это ведь тоже создано для одного css и все |
Видимо, чего-то не понимаете.
Платформа Node.js - это такая опен-сорс "экосистема", для которой любой придурок (даже такой как я) может напейсать пакет с какими-нибудь функциями и выложить его в общедоступный репозиторий NPM. Ну и есть программка-менеджер, с помощью которой любой ещё больший придурок может воспользоваться любым пакетом из репозитория - вся "экосистема" в его распоряжении. Вот и вся несложная механика. |
Audaxviator,
спасибо))) видимо я третий "тип", которому как раз и надо написать пакет функций и выложить его в npm, но не могу)) Можете тогда объяснить что это https://www.npmjs.com/package/animate.css ? Это ведь не css файл, а пакет с ним, или для него. Я вот как раз пытаюсь создать аналог с адресом https://www.npmjs.com/package/box-shadows.css, только для своего репозитория, который я смогу обновлять, а другие качать себе. |
Да откуда я знаю, чего это? Какой-то css, и как-то его использование завязано на javascript, но в любом случае - на фронт-энде. Это вам специалисты по фронтенд-сборщикам легко объяснят.
|
Если вы пройдете на гитхаб этого проекта animate.css, то увидите следующий package.json
{
"name": "animate.css",
"version": "3.6.1",
"main": "animate.css",
"repository": {
"type": "git",
"url": "https://github.com/daneden/animate.css.git"
},
"author": {
"name": "Daniel Eden"
},
"homepage": "http://daneden.me/animate",
"license": "MIT",
"style": "./animate.css",
"jspm": {
"main": "animate.css!",
"format": "global",
"directories": {
"lib": "./"
}
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"cssnano": "^3.5.1",
"eslint": "^4.11.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-header": "^1.7.1",
"gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2",
"gulp-util": "^3.0.7",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"prettier": "^1.9.1",
"run-sequence": "^2.2.0"
},
"lint-staged": {
"*.{js,json,md,css}": ["prettier --write", "git add"]
},
"prettier": {
"bracketSpacing": false,
"proseWrap": "never",
"singleQuote": true,
"trailingComma": "all"
},
"scripts": {
"start": "gulp",
"prettier": "prettier --write \"**/*.{js,json,md,css}\"",
"precommit": "lint-staged"
},
"spm": {
"main": "./animate.css"
}
}
Если коротко отвечать на ваш вопрос, то в вашем проекте box-shadow.css надо создать package.json, делается это обычно командой npm init. В package.json имя проекта(name) это, то с каким именем он будет паблишиться, если имя занято, то вы не сможете запаблишить пакет с таким именем. После того как у вас создан package.json вы можете написать npm publish после чего проекта выложиться в том registry, который у вас в конфиге прописан, по умолчанию это https://registry.npmjs.org/, но вам ничего не мешает поднять свой собственный локальный registry npm и туда паблишить свои проекты(это может быть полезно при совместной разработке, т.к. те у кого в конфиге ваш registry не прописан не смогут с него ничего забирать). Отвлекся. Мой комментарий на тему, того, что код предполагает у вас наличие сборщика касался конкретно куска
require('box-shadow/box-shadow.min.css');
В связи с тем, что node js из css конечно ничего не заимпортирует, а просто ругнется и упадет. Я вот не очень пока понимаю как вы собираетесь на сайт с репозитория выкладывать свой css. У вас сервер написан на nodejs? Вы собираетесь прописывать пути для статики сервера в папку ./node_modules/box-shadow? Зачем вам это все? Сборщик я упомянул, потому, что сборщики умеет бандлить решения, например webpack умеет склеивать отдельные файлы, которые вы эскпортировали в вашем коде для frontend приложения в отдельный файл вида bundle.css. |
В общем ответьте какую вы проблему решаете.
Если вы хотите чтобы у вас на сайте подключился этот css, то вам никакой npm и nodejs не нужен от слова вообще, вы можете на страницах вашего сайта добавить тэг: <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/madeas/box-shadows.css/1.0.2/box-shadows.min.css"> И у вас "подключится" ваш файл, ну или для надежности разместить этот файл поближе к серверу, что у вас кстати за сервер, вы не написали, обычно наружу торчит apache или nginx, просто положите ваш css куда вы обычно кладете статичные файлы, что-то типа /var/www/public/css. Ну а потом у тэга что я выше написал, href поменяйте на css/box-shadows.min.css |
EmperioAf, спасибо за пояснения. Понял, что затея того не стоит, хотя новые знания, уверен, пригодятся. Продолжу изучать работу нода потихоньку.
Что касается ссылки, то рав'у я не очень доверяю, поскольку нигде не видел ссылки на него, в отличие от cdnjs или jsdelivr. Я бы с радостью подключил проект на какой-нибудь cdn, чтобы пользователи могли не скачивать коллекцию, а ставить просто ссылку на cdn, но, у того же jsdelivr, нужны node.js и npm ))). Думал еще про яндекс, но сомневаюсь, что иностранные пользователи будут им пользоваться... |
| Часовой пояс GMT +3, время: 22:29. |
