[babysteps]

Udało Wam się skonfigurować webpacka pod es7 features (async, await) dla node'a?
babel-node radzi sobie bezproblemowo, natomiast webpack wrzuca errorami przy funkcjach async
Kod:
http://pastebin.com/90JabSQS

#webpack #babel #es6 #es7 #javascript

[magic96]

@babysteps: a to babel nie miał jakiegoś pluginu do zrzucania async functions do generatorów? W sumie sporo ficzerów jest już zaimplementowanych w node, a transpilacja babela jest mimo wszystko mocno kaleczona :/

[babysteps]

@magic96: no właśnie te pluginy znajdują się w presecie stage-0 i one działają (na co wskazuje poprawne uruchomienie przez babel-node), natomiast gdy dodamy sobie do tego równania webpacka, to pojawia się problem (mimo, że same generatory działają, a async/await to w zasadzie syntactic sugar na to pierwsze)

[magic96]

@babysteps: to jest ten libek? https://github.com/epoberezkin/node-babel/blob/master/index.js

[babysteps]

@magic96: https://github.com/babel/babel/tree/master/packages/babel-cli

babel-node jest dostępne po zainstalowaniu babel-core oraz babel-cli do tego potrzebujesz jeszcze presetów oczywiście.

[magic96]

@babysteps: jak coś wołaj ( ͡° ʖ̯ ͡°)

[babysteps]

@magic96: nie opakowałem loaders w module, już wszystko śmiga, minimal setup wygląda tak: https://github.com/mnickkk/node-es7 (jeden terminal npm run watch, drugi npm start)

[larvaexotech]

@babysteps: Używam na codzień async/await dla node.js więc chętnie podziele się poradami:

Po pierwsze entry point w webpacku:

entry: './src/index.js',

zamień na:

entry: [ 'babel-polyfill' , './src/index.js' ]

I zainstaluj pakiet babel-polyfill poprzez NPM. Jest on potrzebny, aby async/await mogło działać w runtime.

Po drugie, stwórz w głónym katalogu projektu plik .babelrc i wklej w jego zawartość:

{ "presets": ["es2015", "stage-0"] }

Po trzecie, nie potrzebujesz generatorów jak używasz async/await. To

[babysteps]

@larvaexotech: dzięki za obszerne wyjaśnienie na temat async / await! Faktycznie miałem tu pewne braki.

Czy są jakieś korzyści z trzymania konfiguracji babel w pliku .babelrc anieżeli package.json? Z ESLintem sprawa jest prosta, bo część edytorów po prostu ignoruje konfiguracje projektu zawartą w pliku package.json, więc tutaj zawsze wrzucam to pliku .eslintrc.

Miałem zapytać o zasadność korzystania z biblioteki do Promises, ale i tutaj Twój snippet wyjaśnił wszystko.

[larvaexotech]

@babysteps: Odnośnie .babelrc to szczerze mówiąc nie wiem, wiem tylko że aktualizując babela na z wersji 5.ileśtam do wersji 6.ileśtam wymaga tego pliku więc po prostu go stworzyłem i nie wnikałem dalej :)

Co do promised-mongo to wg mnie lepiej korzystać z wrappera choćby z tego powodu, że BlueBird reimplementuje funkcje dodając do nich suffix "async" nie modyfikując istniejących. Czyli nie będzie findOne tylko findOneAsync itp itd. I w mojej opinii

[magic96]

@larvaexotech: design pattern dla async functions mogą stanowić promisy i generatory, tak jak Comandeer to opisał tutaj
btw. masz może takie cosik dla rollupa? ( ͡° ͜ʖ ͡°)

[larvaexotech]

@magic96: można, ale wg mnie async/await jest najlepszym rozwiązaniem. operuje natywnie na promise, bez zbędnego zamieszania, poprawnie działa zarówno z funkcjami zwracającymi promise jak i tymi ze słowem kluczowym async. oczywiście wadą tego rozwiązania jest to, że ono nie działa ( ͡° ͜ʖ ͡°) przynajmniej nie natywnie.

typescript potrafi kompilować async/await na postać generatorów a kod jest zgodny z ES6 ale niestety ten kod nie działa z

[magic96]

@larvaexotech: ano racja, a wiesz może dlaczego póki co niemożliwa jest deklaracja async functions jako metod? chodzi mi tutaj o klasy z ES6, a nie prototypy :D

[larvaexotech]

@magic96: można to robić dowolnie, tj.

class Test {

 async warnMe() {
 await this.showWarning( 2000 , 'hello!' );
 }

 async showWarning( delay , text ) {
 await this.sleep( delay );
 window.alert( text );
 }

 sleep( delay ) {
 return new Promise( resolve => setTimeout( resolve , delay ) );
 }

}

[magic96]

@larvaexotech: o kurcze, zawsze mi się wydawało, że babel sobie nie radził jeszcze z nimi, ale skoro są to ok :D

[larvaexotech]

@magic96: bardzi sobie bankowo bo używam na codzień :)

pamiętaj, że przy deklaracji metody nie stosujesz słowa kluczowego function, sądzę że stąd może wynikać błąd. przy metodie stosujesz po prostu: async nazwaMetody() { ... kod ... }

[magic96]

@larvaexotech: możliwe, że jak się bawiłem kiedyś to zrobiłem jakiś błąd w syntaxie i miałem dziwne przekonanie, że nie działa… xD ale tak czy siak - dzięki, przyda się ( ͡° ͜ʖ ͡°)

[larvaexotech]

@magic96: nie ma sprawy ( ͡° ͜ʖ ͡°)

[magic96]

@larvaexotech: a tak przy okazji, skoro pracujesz z najnowszymi ficzerami ecmascriptu - jak radzisz sobie z wielokrotnym dziedziczeniem? Są jakieś fajniejsze rozwiązania niż mixiny albo lukier składniowy do nich?

[larvaexotech]

@magic96: szczerze mówiąc to nawet nie wiem bo zwykle trzepie backendy w node a tam struktura jest raczej płaska bez dziedziczenia. w sumie to w niewielu przypadkach z oop wogóle korzystam, chyba tylko przy gamedevie ( ͡° ͜ʖ ͡°)