Я не могу получить базовый импорт ES6 на работу

Question

Я не могу получить базовый импорт ES6 на работу

1

Извините, но какой основной тупой я делаю неправильно? Я следую этому примеру кода. Нужен ли мне специальный способ обслуживания кода? (Я использую http-сервер)

Chrome жалуется на

"неожиданный токен {" или
"Неожиданный идентификатор" соответственно

Минимальный код:

mini.js

import {doSomething2} from "mini2";
// import doSomething2 from "mini2";  also fails
// also tried ... from "./mini2"

function doSomething1(url, opts) {
   return "mini1 " + doSomething2(url);
}

mini2.js

export function doSomething2(url, opts) {
   return ("mini2 " + url);
}

mini.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <title>Test</title>
    <script src="mini.js"></script>
</head>

<body onload="console.log(doSomething1('hi there'))">

<header>
</header>
<main>
<h1> Test </h1>     
</main>
</body>

</html>

Обновление: я не использую транспилятор или связной. Следуя совету @MohammedWaleed, если файл.html использует type = "module" а mini.js импортирует mini2.js с подробным путем, import {doSomething2} from './mini2.js'; , вещи более или менее работают. Я могу запустить встроенный код из mini.js, который вызывает mini2.js. Проблема в том, что функции в mini.js, например dosomething1(), кажутся невидимыми.

Обновление 2 комментариев @loganfsmyth. Кажется, что если ваш скрипт имеет тип "модуль", вы должны настроить глобальные переменные вручную. Немного неудобно, но прекрасно. Чтобы не загрязнять глобальное пространство окна слишком много, возможно, лучше всего использовать свойство окна, здесь я просто использовал "mini":

window.mini = {
  doSomething1 :function doSomething1(url) {
     return "mini " + doSomething2(url);
  }
  anotherFunction: blah blah...
}

user949300 11 янв. 2018, в 19:48

Источник

0

какой упаковщик вы используете?
lankovova 11 янв. 2018, в 18:09
1

@lankovova если вообще есть;)
Alex 11 янв. 2018, в 18:09
0

импорт не поддерживается в ES6, для этого вам нужно добавить транспортер, например babel. Я считаю, что он поддерживается в Node v8.x LTS, но для браузеров он еще может не поддерживаться
Sterling Archer 11 янв. 2018, в 18:10
0

@SterlingArcher Полагаю, мне не следовало удалять мой комментарий о том, "поддерживает ли es6 импорт?" ха-ха
Cody Ｇ 11 янв. 2018, в 18:11
0

Кроме того, я не думаю, что это поддерживается в узле 8.x
Cody Ｇ 11 янв. 2018, в 18:12
0

Похоже, что экспериментальный флаг был добавлен в 8.5, но nodejs.org/api/esm.html#esm_supported этот документ esm_support должен дать больше подробностей о факторах поддержки
Sterling Archer 11 янв. 2018, в 18:13
0

Спасибо всем - это было просто! (Я не использую какой-либо транспортер или пакет и т. Д.). Но почему импорт описан как на этой веб-странице, так и в «ES6 и далее» Кайла Симпсона, где он не находится в «запредельной» части? Это было изменение в последнюю минуту?
user949300 11 янв. 2018, в 18:14
0

@SterlingArcher Да, именно так: stackoverflow.com/questions/37132031/…
Cody Ｇ 11 янв. 2018, в 18:14
0

@ user949300 использование транспортера сделало импорт настолько популярным, что некоторые люди связывают его с ES6
Sterling Archer 11 янв. 2018, в 18:15

Показать ещё 7 комментариев

Теги:

javascript

ecmascript-6

export

import

1 ответ

Ещё вопросы

импорт не поддерживается в ES6, для этого вам нужно добавить транспортер, например babel. Я считаю, что он поддерживается в Node v8.x LTS, но для браузеров он еще может не поддерживаться
@SterlingArcher Полагаю, мне не следовало удалять мой комментарий о том, "поддерживает ли es6 импорт?" ха-ха
Кроме того, я не думаю, что это поддерживается в узле 8.x
Похоже, что экспериментальный флаг был добавлен в 8.5, но nodejs.org/api/esm.html#esm_supported этот документ esm_support должен дать больше подробностей о факторах поддержки
Спасибо всем - это было просто! (Я не использую какой-либо транспортер или пакет и т. Д.). Но почему импорт описан как на этой веб-странице, так и в «ES6 и далее» Кайла Симпсона, где он не находится в «запредельной» части? Это было изменение в последнюю минуту?
@SterlingArcher Да, именно так: stackoverflow.com/questions/37132031/…
@ user949300 использование транспортера сделало импорт настолько популярным, что некоторые люди связывают его с ES6

Mohammad Waleed · Answer 1 · 2018-01-11T15-29-00.000Z

Ты пытался

import {doSomething2} from "mini2.js";

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Изменение: я нашел эту статью на среднем, это поможет вам

https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

Да, пробовал, те же проблемы. Но спасибо за среднюю статью, проверим это ...
попробуйте дать вашему сценарию тег type="module" и посмотрите, работает ли он
Да, type = 'module' работает! И мне нужно затем import {doSomthing} from "./mini2.js" За исключением того, что я не могу экспортировать какие-либо функции из mini.js, только встроенный код. Но спасибо, что начал меня.
Если вы хотите, чтобы что-то было глобальным, вам нужно создать глобальное window. doSomething1 = doSomething1; в вашем mini.js