Как использовать npm пакеты в браузере?
Господа, а поделитесь опытом.
Я правильно понимаю, что npm пакеты это прежде всего CommonJS модули?
Или к черту, опять всех запутаю, пытаясь пояснить подробнее.
Как вы понимаете, какие npm пакеты можно использовать для написания кода для браузера, а какие нет?
Я вот разбираюсь с ES6 модулями в javascript, создаю файлы, в них код и экспорт по стандарту ES6, они уже и в браузере неплохо работают, но я еще все собираю вебпаком в один файл, обработав babel и даже в одном файле это все работает.
Но ведь люди используют при разработке и пакеты устанавливаемые из npm? Решил взять chalk, установил, подключаю его (и как CommonJS и как ES6)
Но при этом axios установленный через npm будет работать и в браузере. Ну и вроде как это логично, ведь большинство npm пакетов (как я думаю) создаются для nodejs а значет все таки заточены под работу на сервере, а не в браузере. Например не должен работать в браузере пакет, который дает доступ к файловой системе.
Но я пытался погуглить список npm которые можно использовать в браузере и не особо нашел, даже не вижу упоминаний, что есть такое деление — на работающие только в nodejs и на работающие и там и в браузере.
Так все-таки? Есть такое деление? Или я чего-то не понимаю?
Спасибо.
Я правильно понимаю, что npm пакеты это прежде всего CommonJS модули?
Или к черту, опять всех запутаю, пытаясь пояснить подробнее.
Как вы понимаете, какие npm пакеты можно использовать для написания кода для браузера, а какие нет?
Я вот разбираюсь с ES6 модулями в javascript, создаю файлы, в них код и экспорт по стандарту ES6, они уже и в браузере неплохо работают, но я еще все собираю вебпаком в один файл, обработав babel и даже в одном файле это все работает.
Но ведь люди используют при разработке и пакеты устанавливаемые из npm? Решил взять chalk, установил, подключаю его (и как CommonJS и как ES6)
//const chalk = require('chalk');
import chalk from "chalk";Сборка проходит без ошибок, в результирющий файл bundle он тоже попадает, но свою функцию не выполняет и текст в консоли браузера не красит.Но при этом axios установленный через npm будет работать и в браузере. Ну и вроде как это логично, ведь большинство npm пакетов (как я думаю) создаются для nodejs а значет все таки заточены под работу на сервере, а не в браузере. Например не должен работать в браузере пакет, который дает доступ к файловой системе.
Но я пытался погуглить список npm которые можно использовать в браузере и не особо нашел, даже не вижу упоминаний, что есть такое деление — на работающие только в nodejs и на работающие и там и в браузере.
Так все-таки? Есть такое деление? Или я чего-то не понимаю?
Спасибо.
Комментарии: 3
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
У них же прям первой строкой написано:
Естественно, ведь npm — ничто иное, как node package manager.
Другой вопрос в том, что разные пакеты решают разные задачи. Chalk, например, создан для терминала и к фронту (браузеру) не имеет отношения, а условный vue-select, наоборот, не имеет отношения к серверу и должен использоваться исключительно в браузере.
«Деления» нет, есть разные пакеты для разных задач. Просто гуглишь пакет и смотришь, для чего он и где (как) используется.
Просто чисто по моей терминологии
означает что деление есть, просто оно не явное. Нельзя зайти на сайт npmjs.com и где то увидеть у пакета метку — это для браузера или это для сервера.
А подскажите пожалуйста еще, я правильно понимаю, что изза того что пакеты npm выполнены в формате модулей CommonJS то работать с ними в браузере без сборщиков, обработчиков невозможно? Потому что например модуль в формате ES6 вполне можно запустить в браузере и без всяких обработок, добавим атрибут type=«module» к тегу script.
- можно юзать CommonJS
- можно юзать ES6 + type: module в package.json
- можно юзать TypeScript или Babel (и даже Webpack при желании), которые будут при билде транспилировать синтаксис ES6 модулей в CommonJS (т.е. своего рода «фейковый» ES6)
В общем-то, CommonJS и настоящий ES6 работают совершенно по-разному, поэтому могу посоветовать почитать об этом, например, тут: redfin.engineering/node-modules-at-war-why-commonjs-and-es-modules-cant-get-along-9617135eeca1Неправильно, потому что пакеты для фронта никто не пишет на CommonJS модулях, они ж не на ноде работать будут, а в браузере.