Модуль Javascript не работает в браузере?

Question

Хорошо, я заглянул на этот сайт и нашел несколько разных ответов, ни один из которых не помог мне. В основном был файл js, в котором было много функций, а также основной код приложения. Я хотел переместить все свои функции в другой файл js, чтобы немного очистить свой код. Я довольно новичок в js, но я знаю, что в python это было так же просто, как сказать "import (module) as (nickname) from (path)"

В любом случае, допустим, у меня есть функция с именем show message в моем модуле functions.js.

export function show_message(){
    alert("Hello");
}

и затем я вверху своего файла main.js сделал

import { show_message } from './functions.js'
//I have also tried to import like this:
import * as func from './functions.js'

//And then I call it
show_message();
//I have also tried
func.show_message();

Я знаю, что это что-то простое, но, как я сказал везде, где я смотрел, я видел разные ответы, ни один из которых не работает для меня. Я использую Firefox, кстати. Я также получаю сообщение об ошибке в консоли, в котором говорится, что мои объявления об импорте должны быть в верхней части моего модуля, я исправил это, указав тип в моей ссылке HTML (script src = "/ static / main.js" type = " модуль ") Ошибка исчезла, но теперь она говорит, что «та же самая политика происхождения запрещает чтение удаленного ресурса по файлу (пути) (причина: запрос cors не HTTP).»

А другая ошибка гласит: «URI источника модуля не разрешен в этом документе».

что заставляет меня думать, что, возможно, мой синтаксис для импорта правильный, а ошибка в моем HTML-коде?

Любая помощь приветствуется.

Answer 1

Использование модулей JS в браузере В Интернете вы можете указать браузерам обрабатывать элемент как модуль, установив атрибут type в module.

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

Подробнее о https://developers.google.com/web/fundamentals/primers/modules

Answer 2

Если вы используете webpack и babel и хотите импортировать код в ваш пакет, я думаю, это должно быть одно из следующих:

export default function show_message(){
    alert("Hello");
}

и затем в вашем коде:

import show_message from 'path/to/show_message.js'
// or 
import { default as someOtherName } from 'path/to/show_message.js'

Или, если вы хотите экспортировать несколько функций:

const show_message = function(){
    alert("Hello");
}
export { show_message };

и затем в вашем коде:

import { show_message } from 'path/to/show_message.js'
// or 
import { show_message as someOtherName } from 'path/to/show_message.js'

Надеюсь, это поможет.

Answer 3

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

Этот блог может быть ответом на то, что вы ожидаете.

Сначала вы должны проверить, принимает ли браузер type = "module", и использовать запасной вариант, если ему это не нравится:

<script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

Это может быть основной причиной ошибки CORS, как написано здесь:

В отличие от обычных скриптов, скрипты модуля (и их импорт) выбираются с CORS. Это означает, что скрипты модуля кросс-источника должны возвращать действительные Заголовки CORS, такие как Access-Control-Allow-Origin: *

Так что вам нужно добавить CORS-заголовок в файл модуля

Рассмотрим этот блог для решения проблемы CORS. Вы должны добавить CORS заголовок т.е. Access-Control-Allow-Origin: * к конфигурации сервера скорее всего.

Answer 4

JavaScript имеет модули в течение длительного времени. Однако они были реализованы через библиотеки, а не встроены в язык, т. Е. Вы не можете импортировать или экспортировать часть этих модулей в ваши js-файлы (необходимо загрузить всю библиотеку). ES6 - это первый раз, когда JavaScript имеет встроенные модули.

Пожалуйста, обратитесь Здесь для получения дополнительной информации о модулях ES.

Но все изменилось, и теперь модули ES доступны в браузерах! Они в ...

Safari 10.1+, Chrome 61+, Firefox 60+, Edge 16+ и т. Д.,

Теперь вам нужно создать JS-файл с новым расширением .mjs, например,

// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

и затем вы можете импортировать этот файл на свою HTML-страницу, например,

<script type="module">
 import {addTextToBody} from './utils.mjs';

 addTextToBody('Modules are pretty cool.');
</script>

Пожалуйста, обратитесь Здесь для получения дополнительной информации об использовании модуля ES в браузерах.

Answer 5

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

Тип = "модуль"

Это будет выглядеть следующим образом:

<script type="module>
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

utils.mjs:

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

Это если вы не используете такой пакет, как веб-пакет, а работаете непосредственно в браузере.

Источник кода: https://jakearchibald.com/2017/es-modules-in-browsers/

Answer 6

Возможно, вы захотите использовать broswerify . Он позволяет вам писать модули в стиле NodeJS, а затем компилировать их в один удобный для JavaScript файл JavaScript, что позволяет вам получить все преимущества производительности при загрузке только одного файла. Это также означает, что вы можете легко использовать один и тот же код как на стороне сервера, так и на стороне клиента.

Если вы хотите придерживаться отдельных файлов, похоже, вы уже в пути. В отличие от обычных файлов JavaScript, на модули распространяются ограничения на перекрестное распределение ресурсов ( CORS ). Они должны быть загружены из одного источника и не могут быть загружены из локальной файловой системы. Если вы загружаете их из локальной файловой системы, переместите их на сервер. Если вы уже размещаете их на сервере, добавьте заголовок Access-Control-Allow-Origin: * к ответу, который обслуживает файл модуля.

Гораздо больше ошибок и решений здесь и здесь .

Answer 7

function show_message(){
    alert("Hello");
}

export { show_message };

и

import { show_message } from './functions'

Я думаю, что это должно сработать. это названный метод экспорта / импорта . под этим именем вы можете найти дополнительную информацию, если хотите.