Autor Zpráva
Kcko
Profil
Ahoj,

jen zkouším, bez transpileru ES 6 import / export a v Chromu dostanu hlášku " Uncaught SyntaxError: Cannot use import statement outside a module"

test.js
const test = () => {
    alert('test ES 6');
};

export default test;

all.js
import test from './test.js';
test();


Myslel jsem, že v Chromu to půjde rovnou bez transpileru (Babel.js), dělám něco špatně?

all.js je nalinkovaný do patičky webu.

==========================

EDIT

https://stackoverflow.com/a/58679392, zapomněl jsem (ani jsem to neveděl), že musím použít na nalinkovaný soubor atribut type="module"

Pro produkční nasazení (i když nechci podporovat žádné IE včetně 11) bude vhodnější to pak prohnat přes Babel ne?
Radek9
Profil
Kcko:
Pro produkční nasazení (i když nechci podporovat žádné IE včetně 11) bude vhodnější to pak prohnat přes Babel ne?
To záleží. Musíš si zhodnotit, jestli ti stačí aktuální podpora: caniuse.com/es6-module. Každopádně pokud chceš používat i novější věci, které třeba až tak podporované nejsou, tak se nějaké transpilaci stejně nevyhneš.
Kcko
Profil
Radek9:
Díky za rychlé info, namátkou jsem zkompiloval tyhle 2 soubory a výsledkem je.
Jinak ohledně podpory, budu používat standardní ES 6 věci + třídy a asi i novější smyčky typu for of takže transpiler asi bude vhodnější.

Jinak je vtipné, že na něco podobného jsem se ptal tak 2 roky zpátky (ptal jsem se jak vyvést bez kolize funkce, proměnné atd) a tys mi na to odpovídal ES 6 a modulama :-).

Nějakou dobu v tom dělám (hlavně ve Vue.js) a už si bez ES 6 a exportů/importů ten kód nedokážu představit. ( JS vlastní objekt - kolize - export?)

test.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var test = function test() {
  alert('test ES 6');
};

var _default = test;
exports["default"] = _default;


all.js
"use strict";

var _test = _interopRequireDefault(require("./test.js"));

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    "default": obj
  };
}

(0, _test["default"])();


Jen zopakuji, že výstupem na webu bude jen nalinkovaný all.js
Tento výstup je v pohodě? s requirem problém není?
Radek9
Profil
Kcko:
Tento výstup je v pohodě? s requirem problém není?
Tohle není v pohodě. To, co ti to vygenerovalo, jsou CommonJS moduly. Ty fungují jen v Node.js, nikoli v prohlížeči. Musíš Babel nastavit tak, aby tam nechal ty klasické importy/exporty. (Pravděpodobně nějaký target nebo preset, přesně nevím, už jsem s tím dlouho nepracoval.)
Kcko
Profil
Radek9:
No preset mám ;-), ten je snad doporučený i v dokumentaci.viz babeljs.io/setup#installation (CLI výstup)
Jak to má tedy vypadat?

babelconfig.js
{
    "presets": ["@babel/preset-env"]
}
Radek9
Profil
Kcko:
Nejspíš nastavit modules na false: babeljs.io/docs/en/babel-preset-env#modules
Kcko
Profil
Radek9:
Zkusil sem

all.js
import test from './test.js';
test();

test.js
var test = function test() {
  alert('test ES 6');
};

export default test;

Bez modulu, importy, ale to stejně IE 11 či nižší nepobere ne?

V package.json mám
    "browserslist": [
        "> 1%",
        "last 4 versions"
    ]

Tak bude potřeba tohle ještě snížit.
Radek9
Profil
Kcko:
Bez modulu, importy, ale to stejně IE 11 či nižší nepobere ne?
IE 11 podporuje jenom nějaké úplně základní věci z ES6 (ES2015). Ale myslel jsem, že o podporu IE ti nejde. Nebo ano? Každopádně tenhle output už vypadá dobře. To by v moderních prohlížečích mělo fungovat.

Tak bude potřeba tohle ještě snížit.
Proč?
Kcko
Profil
Radek9:
No mě IE 11 a níž už nezajímá, ale pro jistotu; aspoň pro tu IE 11, která import/export neumí, bude potřeba případně záchranná brzda, tak tedy jak to vyexportovat?
Radek9
Profil
Kcko:
V tom případě z toho ještě potřebuješ udělat bundle, aby se to načítalo jako jeden soubor. Takže musíš navíc použít např. Webpack nebo Parcel.js.
Kcko
Profil
Radek9:
OK mrknu na to, Webpack nesnasim, Parcel vypadá OK. Díky :)

Vyzkoušeno, generuje to sice takovej nelogickej kód (jako že když napíšu třeba

let state = true;
if (state) {
alert(1);
}

tak ve výstupu vidím jen ten alert a ne ten kód okolo, ale to je snad OK, uvidíme, až tam nasypu všechen js plus externí knihovny; každopádně díky moc za pomoc.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0