Pull to refresh
38
0
Максим Карелов @xxxTy3uKxxx

Техлид frontend в Citilink

Send message

Думаю можно попробовать через инстанс бандлера провернуть


const Bundler = require('parcel-bundler');
let bundler = new Bundler('src/App.js');

Надо проверить в бою

Внедрить в цепочку пайпов нельзя, но можно просто подклбчить как модуль и вызвать на нужный файл

В официальной документации на этот счет ничего нет, поэтому скорее всего по старинке, ручным запуском команды. Но можно копнуть в сторону запуска Parcel через его экземпляр, как показано в этом примере внизу

Судя по логу ярна — все в порядке. У Вас корректно выставлена переменная PATH?

Согласен, но тут конечно вся прелесть в том, что инструмент из разряда «поставил, нажал, заработало». Примерно так же многий софт под macOS позиционируется :) Данный принцип здорово подходит, когда тебе не нужно искать шаблон для yeoman (или писать свой), а просто надо в полпинка запустить окружение и делать разные клевые штуки. Возможности вебпака больше, это бесспорный факт.

Я думаю дело в том, что комплексные и сложные проекты проще поддерживать, имея свой конфиг. Его можно вертеть и так, и эдак, кидать лоадеры и плагины из гитхаба (форки с доработками, например) и так далее по списку. Посмотрите репозитории angular-cli, react-create-app и их аналоги — все просят дать возможность расширять коробочные конфиги и так далее

Для типов, которые он не знает надо писать интерфейс для преобразования. А те, что знает — да, из коробки все без конфигов. Это покрывает многие мелкие проекты и задачи на 100%, как мне кажется

Не за что, рад что стало немного яснее :) Надо вынести в статью информацию о том, как происходит разрешение зависимостей.

Хотите LESS — импортируйте .less файл и он добавится в бандл. Хотите VueJS — импортируйте в бандл. Суть в том, что вы скармливаете в Parcel некую точку входа. Он начинает анализировать ее вглубь, строя дерево зависимостей. Поэтому, если в ваш импорт попадает тот или иной файл — он оказывается в итоговом бандле.
Возможно, я слишком вскользь упомянул это в данном абзаце:


У нас есть сущность — Asset. Ассет — это любой файл. Механика работы такова: реализуется интерфейс, который предоставляет логику для превращения файла в AST, разрешения всех зависимостей, применения нужных трансформаций и генерирования итогового кода.

CSS не нужно тянуть через JS, Вы можете импортировать его через другой CSS файл, подключить в HTML или, опять же, в JS. Пример использовал так называемые CSS Modules для наглядной демонстрации того, что в вебпаке потребовало бы конфигурации.


Свой сервер вы можете поднять, насколько я знаю, если хотите — я могу найти, как это сделать. Но опять же, я не предполагал, что к данному инструменту возниктнет так много базовых вопросов, ведь это обзорная статья, а не туториал.


Подводя итог — попробуйте создать обычный HTML, подключить в нем SCSS в теге <style> и свой JS-файл в теге <script>, в котором докиньте Vue и запустите команду parcel index.html. И все, никаких CSSinJS и прочего.

Давайте по порядку.


Откуда вы их взяли?

Из официальной документации и, самое главное, из документации Babel и PostCSS. Знаете как использовать — используйте. Не знаете — почитайте, попробуйте. Никто же не заставляет :)


Такое ощущение что в мире js ничего не имеет конфигов по умолчанию, нельзя просто сделать install и запустить всё на стандартных настройках

Можно, больше Вам скажу — на главной странице пример, который не требует ни одного конфига для Babel или PostCSS. Если они Вам не нужны — не пишите. Тут сыграло роль то, что статья носит чисто информативный характер, и если в нее вставить еще более простой пример, то Вы никак не увидите его главный плюс, заключающийся в отсутствии необходимости писать даже маленький сферический webpack.config.js


И в этом плане Parcel не выглядит чем-то сильно удобнее. Всё те же конфиги (у каждого свои), магия расположения папок, и необходимость несколько дней курить документацию для того чтобы сделать всё осознанно а не тупо скопировать команды как обезьяна.

Так в статье нет ни одного конфига для самого Parcel :)

Мне кажется, или даже для примера копирование в качестве селектора всей вложенности — это перебор? Малейшее изменение структуры повлечет за собой поломку. Статья не об этом, но все же. Ну и на правах зануды туда же можно присовокупить выборку всех заголовков h1, в которую могут попасть не только названия книг.
За статью спасибо, любопытный инструмент.

Я за разработку под андроид садился раз 5. В последний из них сел в обнимку с котлином да и понеслось как-то. Учился одновременно с разработкой модулей для Xposed.

Но это не отменяет того факта, что глупо спускать всех собак с формулировкой "это же мылору, опять говно впаривают". Стоило сделать комментарии от переводчика, согласен. Если он понимает косяки, допущеные в оригинале, конечно же.

Забавляют комментаторы про "мылору" и говнопрогрессивное приложение, которые даже не успевают заметить плашку "Перевод" в стремлении написать сообщение

Указываете lang в style и всех дел.
Документация


These specific languages are just examples. You could just as easily use Bublé, TypeScript, SCSS, PostCSS — or whatever other preprocessors that help you be productive. If using Webpack with vue-loader, it also has first-class support for CSS Modules.

Спасибо за статью. Стоит отметить, что авторы vue-resource как-то писали, что теперь эта библиотека более не является частью "официальной рекомендации" Vue и советовали смотреть в сторону других библиотек (например, Axios)

Oneplus 3T — 3400, правда там 5,5' экран. Но очень компактые.
Скидка на OnePlus 3T ни разу не палится — с $844 до $429. А ничего, что ему офф. цена на офф. сайте — $439?
Скрытый текст

vue-resource уже помечен как deprecated, советуют использовать любую стороннюю библиотеку. Например, axios

Извините, конечно же я пропустил метку "перевод". :)

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity

Specialization

Frontend Developer
Lead