Dołączanie zewnętrznych plików JavaScript - Symfony WebPack

pytanie zadane 2 maja 2018 w JavaScript przez kevin Mądrala (5,010 p.)

Witam!

W jaki sposób robione są biblioteki JavaScript że w pliku js dołączam inne pliki za pomocą import "./other_file.js"; bez żadnego var xyz = import ""; etc. I mam wszystkie funkcje z tego pliku ? W Symfony używam WebPack'a a skrypty kompiluję za pomocą yarn encore dev. Za każdym razem jak szukam czegoś na temat dołączenia innego pliku JavaScript to znajduję:

nazwaPliku.exports = {
   funkcja: function() {
      return "Hello";
   }
}

Ale czy taka składnia jest ostateczna ? Nie może to wyglądać mniej więcej tak:

nazwaPliku.exports = ( function () {

    function init () {

    }

    function test() {
        aler("dziala");
    }

    return { init, test }
})();

Aby dołączyć taki plik to za każdym razem muszę użyć require i w każdym pliku ustawić nazwę modułu ? Nie można tego zrobić w dołączanym pliku ?

const moduleFromFile = require('./nazwaPliku');

komentarz 2 maja 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Zgubiłem się trochę Jaki masz problem dokładnie?

komentarz 2 maja 2018 przez kevin Mądrala (5,010 p.)

W jaki sposób dołączać/tworzyć pliki tak abym mógł je dodać do projektu poprzez import ""; a nie var plik = require(); Różnica jest taka że tworzę zmienną var która jest widziana w obrębie pliku i do niej przypisuje require("plik.js"); A jak to zrobić żebym miał wszystkie funkcje z tego pliku zaimportowane import "plik.js"; bez żadnego przypisania var funkcje_z_pliku = require("");

komentarz 2 maja 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Webpack, preset ES6 + babel.

2 odpowiedzi

odpowiedź 2 maja 2018 przez UltraSF Stary wyjadacz (11,740 p.)

odpowiedź 2 maja 2018 przez Merg Nowicjusz (140 p.)

Zainteresuj się Babel z presetami do ES6. Na githubie jest kilka przykładowych projektów babel + es6 + webpack.
Jedynym minusem jest fakt, że w chwili obecnej znacznie lepiej działają na backendzie niż na froncie.

Dlatego trzeba kombinować i w webpacku ustawić typ wynikowych pakietów na AMD ( przynajmniej takowy działał u mnie ).
Używałem tego w sumie w prywatnym projekcie we współpracy z Typescriptem, ale z Babelem powinno być podobnie.

Ostatecznie powinieneś dojść do takiej wersji składni

// w module my_math

export function pow2(x) {
    return x ** x;
}

import { pow2 } from "my_math";

Jak nieszczególnie trawisz babela, jest jeszcze buble + rollup. Wygodniejsze, fajniejsz, łatwiejsze w konfiguracji, ale mniej rzeczy z nimi współpracuje.

Tu masz wszystko ładnie wytłumaczony, jakby wujek Google nie był łaskawy.

ES6 + BABEL + WEBPACK with MODULES prosto z Githuba i to może jeszcze aktualny, bo z zamierzchłego 2017. Jest ryzyko, że będziesz musiał zaktualizować połowę webpacka, ale to standard ;)

MIłej zabawy