| 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 |
#2 · Zasláno: 17. 3. 2022, 12:18:38
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 |
#4 · Zasláno: 17. 3. 2022, 13:50:52
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 |
#6 · Zasláno: 17. 3. 2022, 14:47:41
|
||
| Kcko Profil |
#7 · Zasláno: 17. 3. 2022, 16:52:00
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 |
#8 · Zasláno: 17. 3. 2022, 17:10:31
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 |
#9 · Zasláno: 17. 3. 2022, 19:26:32
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 |
#10 · Zasláno: 17. 3. 2022, 20:58:08
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. |
||
|
Časová prodleva: 4 roky
|
|||
0