Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2018, 12:39
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сборка скрипта разбитого на файлы
У меня большой скрипт, который разбит на 20 файлов (чтобы удобней было работать).
На данный момент все эти 20 файлов каждый по отдельности подключается к файлу .html по стандартным методом:
<script src="js/localStorage.js"></script>

Для продакшена я написал task для gulpа, который собирает в один файл в заданном порядке (каждый файл прописан), потом проходит бабелем, потом минимизирует. Тут проблем нет.

А вот можно ли все эти js файлы собрать в один файл app.js через import ?

Я создал файл app.js в нём все 20 файлов прописываю по такой схеме:
import * as localStorage from 'js/localStorage';
import * as preloader from 'js/preloader';
import * as sklonenie from 'js/sklonenie';


В html закомментировал все js файлы и добавил новый app.js - в консоли сразу выстреливает ошибка:
Uncaught SyntaxError: Unexpected token *

В доках https://learn.javascript.ru/modules из за того что несколько вариантов реализации (что то из прошлого, что то из будущего), я не понимаю что мне дальше делать и что я упустил.

В файлы js я ничего не дописывал. Нужно что то как экспорт прописывать или в ES6 не нужно?
Ещё вот мысль что нужно в гальпе написать таск которому отдавать только файл app.js и проходить его бабелем, потом минификатором. Может всё эти импорты для бабеля а не для браузера... я запутался.
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2018, 16:07
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Чтобы нативные модули (экспорт, импорт) работали надо type="module" скрипту указывать (<script type="module" src="..."></script>) и расширение указывать (import * as localStorage from 'js/localStorage.js'), но конечно надо учитывать поддержку, а всякие бабели это типа полифиллов.

Последний раз редактировалось Rise, 02.08.2018 в 16:21.
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2018, 17:40
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Rise,
я правильно понял что все файлы js нужно подключить в html и им указать type="module" ?
или можно только файл app.js подключить, в котором прописаны все импорты?
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2018, 18:01
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от MC-XOBAHCK
я правильно понял что все файлы js нужно подключить
Да нет конечно, иначе какой смысл в модулях) Есть еще такой атрибут как nomodule у скрипта, который не выполняется, когда браузер поддерживает модули. Вот статья свежая с картинками на тему нативных модулей.

Последний раз редактировалось Rise, 02.08.2018 в 18:22.
Ответить с цитированием
  #5 (permalink)  
Старый 03.08.2018, 16:58
Аспирант
Отправить личное сообщение для Ermite Посмотреть профиль Найти все сообщения от Ermite
 
Регистрация: 20.10.2015
Сообщений: 32

В таких случаях нужно использовать webpack и не мучиться)
Ответить с цитированием
  #6 (permalink)  
Старый 07.08.2018, 16:12
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от Rise Посмотреть сообщение
Да нет конечно, иначе какой смысл в модулях) Есть еще такой атрибут как nomodule у скрипта, который не выполняется, когда браузер поддерживает модули. Вот статья свежая с картинками на тему нативных модулей.
Я несколько раз читал эту статью, статью в учебнике, на мазиле...
Создал специально тестовый проект в отдельной папке - import у меня ни как не хотел работать.

Потом бесмыслено вглядываясь в страницу на developer.mozilla решил открыть в мазиле и чудо произошло - оказывается работает импорт.

А почему в гугл-хроме не работает я не знаю. Никаких настроек я не трогал, только когда то включил установку расширений для браузера с компьютера, а не с магазина.
Гугл-хром вот такую ошибку выводит в консоль:
Access to Script at 'file:///G:/app/import-test/js/app.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Гугл-хром обновил, кенаюз выдаёт что должно работать: https://caniuse.com/#feat=es6-module
Ответить с цитированием
  #7 (permalink)  
Старый 07.08.2018, 17:48
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от MC-XOBAHCK
Гугл-хром вот такую ошибку выводит в консоль
Хрому сервер нужен.
Ответить с цитированием
  #8 (permalink)  
Старый 07.08.2018, 18:13
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Rise, спасибо что прокомментировали. Я 4 дня потратил впустую из за хрома и раньше ещё пробовал (просто бросал разбираться и вникать в суть).

Да, действительно. Запустил вот так:
http://localhost:3000/import-test/index.html

теперь и в гугл-хроме заработало и ошибок больше нет.

Сама тема модулей ES-6 несложная и оч легко запоминается, но вот такие моменты как получилось у меня с хромом, это немного выбивает.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запуск скрипта во всех вкладках браузера через console Nyiann Javascript под браузер 3 07.02.2017 00:22
Удалить прикреплённые файлы Гробовщик Общие вопросы Javascript 13 11.09.2014 16:07
Оцените реализацию скрипта валидации данных формы pandasensey Ваши сайты и скрипты 0 05.07.2010 18:11
Круговорт скрипта.... Karl Общие вопросы Javascript 1 17.10.2009 15:37
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 12:03