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: 2 roky
|
0