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

Хорошо, я посмотрел на этом сайте и нашел несколько разных ответов, ни один из которых не работал для меня. В основном имелся файл 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 = " module ") Ошибка исчезла, но теперь говорится, что" та же самая политика происхождения запрещает чтение удаленного ресурса в файле (путь) (причина: запрос cors не HTTP). "

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

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

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

ОТВЕТЫ

Ответ 1

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

type="module"

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

<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/

Ответ 2

Подумайте о том, чтобы пройти через этот 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: * к конфигурации сервера наиболее вероятно.

Ответ 3

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

export { show_message };

а также

import { show_message } from './functions'

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

Ответ 4

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

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

Много больше ошибок и решений здесь и здесь.

Ответ 5

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

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

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

Safari 10. 1+, Chrome 6 1+, 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 в браузерах.

Ответ 6

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

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

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

Ответ 7

Если вы используете 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'

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