ES6 #18 Модули (Modules)

[@Indy_660]

Просмотрел весь плейлист. Спасибо большое, уже год в разработке и много чего подчерпнул и заполнил дыры.

[@YauhenKavalchuk]

Пожалуйста

[@yuriim7807]

Женя, огромную работу делаешь!!! Спасибо большое!!! Желаю успехов в твоём деле!!!

[@YauhenKavalchuk]

Спасибо большое за отзыв!

[@GGSoft2009]

Хорошо преподаешь, заставка тоже крутая!!!!

[@YauhenKavalchuk]

Благодарю

[@vladman856]

Большое спасибо за все уроки! Очень доступно.

[@ineptDev]

Видео воспринимать много легче, чем читать статьи, тем более по тем темам, в которых еще очень слаб. Спасибо за курс!

[@YauhenKavalchuk]

Спасибо за отзыв)!

[@Gavr-dev]

супер! первый плейлист который я посмотрел целиком, да еще и за 3 дня)

[@YauhenKavalchuk]

Отлично! Надеюсь понравилось)

[@nouchance]

Спасибо большое! Хорошо объясняете удачи вам!!!

[@YauhenKavalchuk]

Пожалуйста

[@marinakaryukova6231]

Как быть? нашла в примере: import productsModule from "./modules/products"; вот только products это папка в которой 2 под папки и 5 вложенных файлов что это за синтаксис такой?

[@Under_The_Sun]

Я вот как начинающий программист, читаю статьи, смотрю видео, на тему модулей, и понимаю, что опытные программисты нефига сами не понимают практическое назначение модулей или не могут его объяснить. В данном уроке не объяснено принципиальное отличие модулей от обычного js-файла, даже определение в стиле, что модуль - это файл показывает искреннее не понимание темы. Потому что работать с обыными js-файлами проще, и не нужно никаких импортов-экспортов и ограничений присущих модулям, кстати о них ни слова. В первых же строчках кода - непростительная ошибка - this не будет работать в модуле. Именно по этой причине я не стал переписывать свои классы под модули - не знаю как, а это критичный момент, и его никто не объясняет, потому что сами не понимают чего говорят. Заслуженный дизлайк.

[@YauhenKavalchuk]

Модуль - это отдельный файл с кодом. Не важно что в нём константа, функция, класс, или что-то ещё. Его задача хранить и экспортировать этот кусок. Модули нужны что бы весь JS код не хранился в одном файле, всё. Так что я понятия не имею о каком сокральном смысле модулей вы говорите

[@megabulk]

Ничего из сказанного в этом ролике не получается ошибка "Unexpected token '{'. import call expects exactly one argument". А в репозитории курса Js файл пустой.

[@YauhenKavalchuk]

В репозитории курса есть ветки, там весь код

[@Andrew-strong]

Спасибо! Лучшие уроки на Ютюб! А можешь сделать видос про замыкания?

[@YauhenKavalchuk]

Спасибо большое! Уже есть такое видео на канале, в плейлисте JavaScript

[@lerstq4132]

Привет)По какой причине может выходить ошибка Uncaught SyntaxError: Unexpected token 'export' и такая Uncaught SyntaxError: Cannot use import statement outside a module код точно такой же как у вас... браузер хром...

[@Venitch.]

Ошибка “SyntaxError: Cannot use import statement outside a module” возникает, когда интерпретатор JavaScript встречает оператор import вне модуля. В JavaScript модуль - это код, выполняемый в своей собственной области видимости, отдельной от глобальной области видимости. Операторы импорта могут использоваться только внутри модуля, но не в глобальной области видимости. Эта ошибка может возникнуть в средах, которые не поддерживают использование операторов импорта в глобальной области видимости, например, в старых JavaScript-движках или браузерах. фиксится добавлением в тег script аттрибута type="module" в index.html:

[@yuriy2109]

Смотрю уроки по модулям и пока не нашел, почему у меня перестают работать функции событий кнопок на интерфейсе html, после того как я объявил свой js файл модулем и в отдельный файл скинул для послед импорта модуль с числовыми массивами.

[@YauhenKavalchuk]

На тэг script атрибут type=“module” повесили?

[@olgapolskolg1112]

спасибо, искала такой урок)

[@YauhenKavalchuk]

Пожалуйста)

[@singlebw4065]

Странные вещи творятся. Консоль не выдавала ошибку с этим я разобрался, в подключаемом скрипте надо было указать атрибут type="module". Дальнейшая попытка выводить в консоль чё-то меня напрягает. Явление какое-то непонятное я предаю одну переменную, а отрабатывает весь файл. В консоль всё выводится. Получаемую переменную вывожу сразу в консоль, но не кто не мешает выводить разные данные в консоль в передаваемом файле и отображается это всё в переданном файле. Меня это и смутило. Конечно напрямую к не переданным переменным обратиться не могу.

[@Tiberiumgod]

Так какая разница между export default & export?

[@YauhenKavalchuk]

С помощью первого можно экспортировать одну основную сущность из файла. С помощью второго можно экспортировать множественные сущности. Export default - в файле может быть только один, а простых export может быть много

[@РегимРагимов]

Еще добавлю, что при помощи default можно экспортировать даже анонимную функцию, что при обычном экспорте невозможно

[@carpet5924]

Евгений, интересует сборка модулей. Скажите, в какую сторону копать - gulp или webpack?

[@YauhenKavalchuk]

Gulp намного проще, но в последнее время сдаёт позиции. Webpack - стильно, модно, молодёжно. Но порог вхождения выше. Если решите начать с webpack - можете посмотреть курс Ильи Кантора

[@carpet5924]

Спасибо за ответ, я галп применяю на уровне слияния, сжатия файлов + css-препроцессоры и мне он нравится, но когда задался вопросом сборки ES6 модулей, гугл выдает решение этой задачи в 99% случаев с помощью webpack. Вот поэтому и интересно узнать ваше мнение на этот счет

[@MrLutor]

@@carpet5924 а еще есть parcell, его еще посмотрите

[@Vladimir-ww1be]

Кратко и ясно спасибо

[@YauhenKavalchuk]

Пожалуйста

[@dispeltr1183]

Четка! Спасибо Евгений!

[@YauhenKavalchuk]

Пожалуйста

[@web2905]

А как объекты экспортирются и импортируются?

[@YauhenKavalchuk]

Точно так же: export const obj ={}; import { obj } from ‘./file’;

[@web2905]

@@YauhenKavalchukспасибо

[@4sARy]

Тип файла не указывается же при импорте? Может я не прав, но в реакте так...

[@YauhenKavalchuk]

Можно и не указывать

[@sergepikovsky3385]

import {add, subtract, PI} from './justMyMath.js'; Остроконечными шляпками выделено слово "import". SyntaxError: Cannot use import statement outside a module. Вроде все правильно... :-( откуда это?

[@demik3106]

попробуйте у файла скрипта в котором используется импорт или экспорт указать тэг type со значение module. type="module"

[@mostbest88]

Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@foxf614]

Евгений, вопрос. Вы описывали простой экспорт с переименованием export { one as onse, two as twice } , а потом импортируете переменные import { one, two } from ... Правильно ли я понимаю что переименование подразумевает что в импорт one пойдет как once? Или все таки как one? Сейчас, к сожалению, нет времени собрать и посмотреть эмпирическим путем:)

[@YauhenKavalchuk]

Да, всё правильно

[@mostbest88]

Евгений, добрый день. Могу я вам задать вопрос по модулям? Я создаю глобальный объект с именем $. У него хочу сделать несколько методов, каждый из которых будет являться по сути плагином решающим какую-либо задачу. Например, $.modal будет отвечать за всплывающие окна. И для удобства я бы хотел глобальный объект $ сохранить в общем, главном файле main.js, а его методы вынести в отдельные модули. Если я так или создаю отдельный модуль, где храниться глобальный объект, то я получаю ошибку, что объект не определен ($ is not defined). Подскажите, пожалуйста, как лучше поступить в таком случае? Может лучше реорганизовать совой код отказавшись от глобального объекта?

[@YauhenKavalchuk]

Я бы не рекомендовал такую структуру. Намного лучше разбить всё на отдельные функции и импортировать выборочно. Так и тестировать будет легче, чем монолитный объект с методами

[@mostbest88]

@@YauhenKavalchuk спасибо за ответ.

[@philipshpen6191]

не совсем понял про default export для чего он, и в чем отличие от обычного экспорта?

[@YauhenKavalchuk]

default export - дэфолтный экспорт, предназначен, например, для экспорта больших сущностей из модуля, для примера компонент. В файле модуля может быть только 1 default export. Обычный экспорт - может экспортировать что-то маленькое: константы, утилиты и т.д. Таких экспортов в файле модуля, может быть сколько угодно.

[@philipshpen6191]

@@YauhenKavalchuk а если я сделал дефолтный экспорт, то после могу ли я ещё экспортировать какие переменные, классы и т.д.?

[@YauhenKavalchuk]

только с помощью простого экспорта

[@РегимРагимов]

@@YauhenKavalchuk На мой взгляд, Принципиальное отличие default от экспорт в том, Что при обычном Экспорт Вам нужно указать название функции переменных или объектов которые вам нужно экспортиповать. А с default вы можете экспортировать даже анонимные функции, массивы и классы без имени и указать их уже при импорте

[@antonbobrov6293]

Здравствуйте, подскажите, пожалуйста, а возможно сделать импорт целого файла в другой без использования вебпак (т.е не отдельные классы,функции импортировать, а целый файл? Задача в том, чтобы все переменные, функции и классы второго js файла видел первый js файл, и их использовал. Пока никакой магией не получается это сделать. Или здесь без сборщиков внешних не обойтись?

[@YauhenKavalchuk]

По идее, всё должно работать. Если вы не экспортируете эти файлы в какой-нибудь server.js - который запускается на node. И если вам не нужно поддерживать старые браузеры. Вроде как Хром всё это должен спокойно поддерживать.

[@erwererwrwr]

@@YauhenKavalchuk спасибо, а какой тогда синтаксис корректный для импорта целого файла? Это же не отдельный класс, переменная, функция, а разрозненное явление))

[@YauhenKavalchuk]

не совсем понял о чём вы, но есть 2 вариант это export default и просто export. Просто отличается синтаксис импорта: в первом случае он буде import file from './path', а во втором import { file } from './path'

[@erwererwrwr]

@@YauhenKavalchuk спасибо большое!

[@MrLutor]

@@erwererwrwr у вас получилось? что нужно прописать в экспортируемом файле для того, чтобы его полностью экспортнуть? с импортом понятно. достаточно будет в конце экспортируемого файла прописать export default ? какой синтаксис в итоге?

[@dmitrijponkin]

Спасибо огромное за Ваш труд!!! А данный синтаксис поддерживается нодой?

[@YauhenKavalchuk]

На сколько я знаю - нет

[@dmitrijponkin]

@@YauhenKavalchuk Спасибо!))

[@YauhenKavalchuk]

Пожалуйста

[@p_levin]

а что будет дальше?

[@YauhenKavalchuk]

Курс по React & Redux, начинается 16 октября. Все темы курса, длительность а так же планируемые уроки можно смотреть здесь: trello.com/b/R6rD7qq8

[@kott8888]

без экспорт импорт почему то не работают

[@sayatly]

type="module", а не style

[@YauhenKavalchuk]

¯\ _(ツ)_/¯

[@annaa7679]

Это все написано на learn.javascript.ru. Только вот я делаю все как в учебнике = как в этом видео - но ничего не работает. Самое важное не показали: как правильно связывать файлы, и нужны ли еще какие-то доп.настройки

[@YauhenKavalchuk]

вам скорее всего нужно добавить только module для js файла:

[@annaa7679]

@@YauhenKavalchuk Это нужно добавить к тому скрипту, который импортирует в себя модули? Я это уже пробовала. Я файл html локально запускаю.

[@6sha-altyn]

Такая же проблема. В консоли выходит ошибка, что импорт вне модуля невозможен. Пробовал в тег script добавить type="module", не помогло

[@jenyaspace]

Не получается импортировать, выдает ошибку Uncaught SyntaxError

[@YauhenKavalchuk]

Скорее всего, допустили ошибку. Должно работать, т.к. сам недавно проверял

[@jenyaspace]

@@YauhenKavalchuk нет по синтаксису все верно как у вас на видео

[@jenyaspace]

@@YauhenKavalchuk как-будто браузер не понимает синтаксис импорта, хотя странно т.к. бабель к проекту подключен

[@YauhenKavalchuk]

Chrome вообще должен поддерживать всё из коробки!

[@jenyaspace]

@@YauhenKavalchuk так почему тогда Хром выдает ошибку Uncaught SyntaxError: Unexpected identifier

[@torodinson5260]

сделал все точно как ты сказал и вот что получилось main.js:86 Uncaught SyntaxError: Unexpected token { newjs.js:17 Uncaught SyntaxError: Unexpected token export

[@YauhenKavalchuk]

Значит что сделали не так. В описании есть ссылка на репозиторий, можете сверить

[@egoist2956]

like

[@ТоксичнаяАлександра]

Как коротко перед 1 рабочим днем запихнуть в себя гору инфы

[@АйПад-Два]

А как удалось пройти собеседование без этой горы?)

[@YauhenKavalchuk]

👍

[@ChoVasche]

Ключевое слово as - это не эсс, нужно произносить эз.

[@YauhenKavalchuk]

👍

[@checkTM]

ни слова о том, что так не заработает если не прописать в теле вашего html в тег script - type module :)

[@YauhenKavalchuk]

Да, про это сказать забыл(

[@checkTM]

@@YauhenKavalchuk да все ок) главное вовремя сказать людям, прежде чем у них сгорит жопа от боли)))

[@brend8c]

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

[@YauhenKavalchuk]

Я вообще не понял в чём ваша проблема

[@brend8c]

​@@YauhenKavalchuk Вот так вот составил запись и это не работает для меня. Я импортирую переменную в main.js из other.js HTML main.js import test3232 from './other'; console.info(test3232); other.js export default test3232; let test3232 = 'Hello!'; Когда запускаю консоль ругается Uncaught SyntaxError: Unexpected token 'export' export default test3232; Uncaught SyntaxError: Cannot use import statement outside a module import test3232 from "./other";

[@brend8c]

Я попробовал записать по другому, это так-же не сработало. HTML main.js import { test3232 } from './other'; console.info(test3232); other.js export let test3232 = 'Hello owl'; Те-же ошибки, что и тогда. Значит дело не в записи а вчём-то другом. В HTML я пробовал подключать по другому (ну а вдруг) но это так-же не сработало.

[@AronBergman]

Четка! Спасибо Евгений!

[@YauhenKavalchuk]

Пожалуйста!

[@andrewdnistriansky3719]

Четка! Спасибо Евгений!

[@YauhenKavalchuk]

Пожалуйста!