Pixi.js: HELP WANTED: ES6 변환 노력

let과 const를 사용하여 어떤 경로로 이동하시겠습니까? 기본값은 const이고 참조가 변경되어야 하는 속성에만 let을 사용합니다.
또는
기본값은 let이고 개발자에게 더 많은 힌트로 const를 사용하는 것입니다. 저는 진지합니다. 이것을 변경하지 마십시오.

이전 옵션. 기본값은 const를 사용하는 것입니다. 모든 내부 vars를 let으로 변환하고 명백한 범위 지정 문제를 수정했으며 var를 jshint와 함께 사용하는 것을 허용하지 않았습니다. const를 사용하여 다른 패스가 필요합니다.

내가 추천하고 싶은 것들:

• [x] babel-preset-es2015-loose 를 사용하면 babel-preset-es2015만으로도 성능이 좋지 않습니다.
• [x] eslint 로 전환하면 ES6 지원이 더 좋고 일반적으로 jshint보다 낫습니다. 여기 가 pixi 스타일의 좋은 출발점입니다. 또한 const 를 사용할 수 있지만 let 를 사용한 장소에 대해 불평합니다. const에 대해 수정해야 하는 모든 위치를 쉽게 찾을 수 있습니다.
• [x] jsdoc의 최신 마스터를 사용하십시오. 아직 릴리스되지 않은 ES6 수정 사항이 많이 있습니다.
• 웹팩으로 전환합니다.

@englercj 감사합니다. 좋은 목록입니다.

@englercj babel-preset-es2015-loose에는 사용 중단 경고가 있습니다. 제안한 것처럼 {"loose": true} 옵션과 함께 babel-preset-es2015를 사용해 보셨습니까?

나는 또한 몇 가지 유용한 링크인 browserify보다 webpack을 선호합니다.
https://github.com/webpack/webpack/tree/master/examples/multi-part-library
http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

내 기본 설정은 webpack을 기다리고 쌓지 않는 것입니다. 잠재적으로 다른 소규모 PR. 그 변경은 빌드 프로세스 변경을 나타내지만 반드시 ES6에 대한 개선은 아닙니다. 또한 소스 맵, 헤더 등이 작동하는지 확인해야 합니다. 나는 그것이 어떻게 더 나은지 이해하지만 지금은 그것을 기다리자.

babel-preset-es2015-loose에는 사용 중단 경고가 있습니다. 제안된 대로 {"loose": true} 옵션을 사용하여 babel-preset-es2015를 시도했습니까?

하, 그건 2주 전에 추가된 _그냥_입니다. 사용하기 시작할 당시에는 존재하지 않았기 때문에 시도하지 않았습니다.

안녕하세요 여러분,

느슨한 모드에 대한 Chad의 생각을 반영하고 여기에 내 2센트를 더하기 위한 간단한 외침입니다.
성능에 대해 정말로 주의를 기울여야 하기 전에 @GoodBoyDigital 과 논의한 것처럼 느슨한 모드가 좋은 출발점이라고 생각합니다.

또한 이 테이블이 얼마나 최신 정보인지 잘 모르겠습니다. https://kpdecker.github.io/six-speed/ 알고 계십니까?

여전히 그렇다면 우리는 ES2015 광기에 가지 않도록 조심해야 하고 필요하지 않은 것들을 변환해야 합니다. 예: for-of 가 여전히 테이블에 표시된 대로 성능을 저하시키는 경우 t 장면 그래프 자식을 반복할 때 사용합니다.

Babel은 이제 배열에 대해 for-of 를 최적화해야 합니다( Optimization 참조). 이러한 테스트는 꽤 오래된 것 같습니다.

어쨌든 @alvinsight 당신 말이 맞습니다. 모든 것이 ES2015일 필요는 없습니다.

좋은 목록 @englercj !

@alvinsight와도 동의했습니다. 우리는 이미 es6 구문을 사용하여 훨씬 더 깨끗한 코드를 보고 있으므로 모든 라운드에서 승리합니다. :)

다른 모든 결정은 성능을 기반으로 해야 합니다. '더 좋아 보이지만 느리게 실행됩니다. 하지 마세요.'

배열 루핑이 좋은 예입니다. 우리가 할 수 있기 때문에 이미 빠르고 읽기 쉬운 것을 대체할 필요가 없습니다.

웹팩도 예! @bigtimebuddy 가 맞습니다. 이는 es6으로의 이 전환의 두 번째 부분이어야 합니다.

동의!
마침내 class Sprite extends Container 를 읽고 쓸 수 있게 되어 훨씬 더 좋습니다!

업데이트됨

• jshint 를 eslint 로 교체했습니다(그리고 linting 오류를 수정했습니다. 승리를 위한 eslint !)
• babel-preset-es2015 와 함께 loose: true 사용하기

저녁 모두!

우리 믹스 인으로 약간의 속임수를 쓰십시오..

Object.assign(
    core.DisplayObject.prototype,
    require('./interactiveTarget')
);

위의 내용은 현재 ES6 분기에서 작동하지 않으므로 상호 작용과 같은 작업이 중단됩니다.

es6 클래스로 이 작업을 수행하는 좋은 방법이 있습니까?

엽서에 답을 주세요!

좋아 내가 처음 옳았어 - 위의 코드는 현재 작동하지 않습니다. (금요일 밤이라는 사실에 이것을 비난 할 수 있습니까?)

구성이 빛나는 것 같아요!

흠, 무엇이 작동하지 않습니까? 이것은 나를 위해 일했습니다.

class MyThing {}
Object.assign(MyThing.prototype, { newFn: function () { console.log('mix'); } });
var mything = new MyThing();
mything.newFn(); // logs: "mix"

복사하여 크롬 콘솔에 붙여넣고 제대로 작동하는 것 같습니다.

흥미로운! 현재 상호 작용이 작동하지 않으며 상호 작용 속성이 누락된 것 같습니다. 다른 이유가 아닐까요? 계속 삽니다...

아하! 그것을 발견

Object.assign(
    core.DisplayObject.prototype,
    require('./interactiveTarget') <--- this is a require!
);

import interactiveTarget from './interactiveTarget';

Object.assign(
    core.DisplayObject.prototype,
    interactiveTarget
);

아마도?

예!

여기에서 홍보 1: https://github.com/pixijs/pixi.js/pull/2960

믹스인 및 텍스트와 같은 몇 가지를 수정합니다.

내일은 필터를 봐야지...

그래도 정말 잘생겼어요!

잘 했어! 예, 이와 같이 require()를 사용하면 예상한 다른 모든 것이 포함된 단일 기본 키가 있는 객체를 반환합니다.

이제 필터가 좋아 보입니다! 내가 작업하고 있는 현재 프로젝트에서 이것을 실행했는데 꽤 복잡합니다. 모든 것이 100% 작동하는 것 같습니다!

다른 몇 가지 게임에서 테스트할 수 있지만 곧 병합하는 것이 좋습니다!

@bigtimebuddy pixi-animate로 이 빌드를 시도해 보셨습니까?

이걸 던지면.. traceur가 babel보다 빠른 것 같나요?
조사할 가치가 있습니까?

https://kpdecker.github.io/six-speed/

이러한 테스트는 오래되었으며 babel을 느슨하게 실행하지 않습니다. 게다가 많은 경우 typescript가 둘 다보다 빠르다고 주장할 수도 있습니다. :)

이 주요 재작성/적응의 일부로 TypeScript를 사용하는 것이 좋습니다. TypeScript에 대한 몇 가지 요점:

• JavaScript에서 유형 시스템을 사용하는 것은 새로운 표준이 될 것입니다. 시간 문제일 뿐입니다.
• 자바스크립트입니다. 유형 체계 외에 구문상의 차이는 없습니다.
• 코드 품질을 향상시킵니다. 적절한 위치의 유형과 일치하도록 약간 재구성해야 하는 상당한 양의 코드를 찾을 수 있습니다.
• pull-request 품질 검사 증가 - 어떤 유형 문제가 있는 경우 패치를 병합할 수 없습니다.

이것이 쉬운 일이 아니라는 것을 알고 있지만 코드 기반과 커뮤니티에 큰 이점을 가져올 수 있다고 믿습니다.
건배!

@endel pixi-spine을 typescript로 옮기고 있습니다. pixi용 TS 플러그인의 데모가 있을 것입니다.

@endel 은 그저 궁금하지만 TS는 내가 마지막으로 보았을 때 문제를 해결했습니다. 즉, 출력과 관련하여 _모든 것이_가 ES5로 다시 변환되거나 대상을 기반으로 하는 아무것도 없는 상황입니다. ?

폴리필을 전혀 사용하지 않았던 걸로 기억합니다. 따라서 최신 브라우저에서 기존 브라우저에 이르기까지 광범위한 브라우저에서 단일 코드 기반을 실행하려면 여전히 ES5를 대상으로 해야 하며 현재 최신 브라우저에서 기본적으로 지원하는 모든 멋진 새 기능을 무시해야 합니다. 어쨌든 ES5로 다운 그레이드합니까? 아니면 모든 베이스를 커버하기 위해 TS 출력 위에 ES6 폴리필을 사용해야 하는 경우가 여전히 있습니까?

출력과 관련하여 모든 것이 아니면 전무(all or nothing) 상황이라는 것, 즉 모든 것이 ES5로 다시 트랜스파일되거나 대상을 기반으로 하는 것이 아무것도 없다는 것입니까?

이것이 무엇을 의미하는지 잘 모르겠습니다. ES5를 대상으로 하는 경우 구문을 ES5로 변환합니다. 그러나 babel, tracuer 등도 마찬가지입니다. 구체적으로 말씀하시는 것이 있습니까?

폴리필을 전혀 사용하지 않았던 걸로 기억합니다.

그러나 babel, tracuer 또는 기타 트랜스파일러도 마찬가지입니다. 그래서 나는 당신이 무엇을 운전하고 있는지 확실하지 않습니다? core-js 폴리필은 어느 쪽이든(babel 또는 TS) 사용해야 합니다.

토론은 ES6 -> ES5를 변환하는 babel 또는 TS -> ES5를 변환하는 TypeScript라고 생각합니다. 우리는 어느 쪽이든 ES5로 가야 합니다. TS는 ES6을 대상으로 할 수 있으며 원하면 ES6 빌드를 출시할 수 있지만 ES5 빌드에 추가됩니다.

@photonstorm TypeScript 를 사용하면 내가 아는 한 Babel에서와 같이 ES5로 변환할 기능을 선택할 수 없습니다.

저는 TypeScript를 사용하고 있고 그것이 굉장하다고 생각합니다. Pixi가 결국 채택하는 것을 보고 싶습니다. Google은 이제 개발자가 Angular와 함께 TypeScript를 사용하도록 권장하고 있습니다. 이는 널리 채택되었다는 좋은 신호입니다. 복잡한 코드베이스의 경우 Pixi는 엄격한 유형으로 잘 제공됩니다.

TypeScript로 해결해야 할 몇 가지 문제에는 jsdoc(이와 관련된 경험이 있는 사람이 있습니까?) 및 require('pixi.js') 일 때 src를 사용할 수 있는 업스트림 종속성이 포함됩니다(이와 같이 필요한 사람이 있습니까?).

첫 번째 단계로 ES6으로 이동하는 것이 여전히 좋은 선택입니다. 어쨌든 클래스로 변환해야 하기 때문입니다. 모든 문제를 해결할 수 있다고 확신하면 TypeScript를 코드베이스 현대화에 대한 또 다른 "통과"로 고려할 수 있습니다.

내가 아는 한 TypeScript를 사용하면 Babel에서와 같이 ES5로 변환할 기능을 선택하고 선택할 수 없습니다.

나는 당신이 babel로 그렇게 할 수 있는지 전혀 몰랐습니다. 어쨌든 ES5를 대상으로 해야 하기 때문에 이점이 확실하지 않습니다. 그러나 그것은 깔끔합니다!

TypeScript로 해결해야 하는 일부 문제에는 jsdocs가 포함됩니다.

https://github.com/TypeStrong/typedoc

require('pixi.js') 시 src를 사용할 수 있는 업스트림 종속성(이와 같이 요구하는 사람이 있습니까?).

"main"은 원하는 모든 것을 가리킬 수 있으며 typescript를 사용하면 빌드된 파일(_bundle_ 아님)을 가리킬 수 있습니다. 예를 들어, TS 파일은 src/ 로 이동하고 각 파일을 js/ 로 변환한 다음 main을 그곳으로 가리킵니다. 그런 다음 우리는 그것을 모두 묶어 dist/ 또는 w/e에 넣습니다. npm 패키지는 js/tsd 파일과 함께 제공되지만 일반적으로 TS 소스는 제공되지 않습니다(논의 가능).

첫 번째 단계로 ES6으로 이동하는 것이 여전히 좋은 선택입니다. 어쨌든 클래스로 변환해야 하기 때문입니다. 모든 문제를 해결할 수 있다고 확신하면 TypeScript를 코드베이스 현대화에 대한 또 다른 "통과"로 고려할 수 있습니다.

👍

내가 아는 한 TypeScript를 사용하면 Babel에서와 같이 ES5로 변환할 기능을 선택하고 선택할 수 없습니다.

그들은 TypeScript 2.0에 이 기능을 추가했습니다: https://github.com/Microsoft/TypeScript/wiki/What 's-new-in-TypeScript#include-built-in-type-declarations-with---lib

Symbol , Map 등과 같은 유형 정의를 갖기 위해 ES5를 대상으로 사용하지만 ES6을 라이브러리로 포함하는 것이 일반적입니다.

실제로 @englercj 가 말했듯이 사용 중인 컴파일러에 관계없이 코드가 컴파일된 후 shim을 포함해야 합니다. 예를 들어 Babel은 IE9용 Symbol 폴리필을 자동으로 포함하지 않습니다.

나는 당신이 babel로 그렇게 할 수 있는지 전혀 몰랐습니다. 어쨌든 ES5를 대상으로 해야 하기 때문에 이점이 확실하지 않습니다. 그러나 그것은 깔끔합니다!

Pixi의 경우 그다지 유용하지 않지만 예, Babel 사전 설정을 체리 선택하여 변환할 특정 기능만 선택할 수 있습니다. 이것은 ES6으로 빌드하고 싶지만 노드 6, Electron 1 등에서 최첨단 V8 기능만 지원하려는 경우에 유용할 수 있습니다.

정말 흥미로운 역설입니다. ES6을 사용하여 빌드하세요. 깨끗하고 사랑스럽고 현대적인 브라우저에서 지원/내부적으로 최적화되어 있기 때문입니다. 그러나 1995년처럼 트랜스파일하면 그 힘든 작업이 모두 파괴됩니다.

나는 문제가 보편적이며 TS 또는 Pixi와 관련이 없다는 점에 감사합니다. 조금 이상한 상황에 처했을 뿐입니다.

@photonstorm 불행한 아이러니입니다 😞 ES6 및 ES5 빌드가 가능하여 전자와 같은 패키지 앱에 대해 ES6 빌드를 사용할 수 있기를 바랍니다.

여기에서 토론에 뛰어들기만 하면 됩니다. :) 사람들이 TS를 ES6으로 트랜스파일한 다음 Babel을 사용하여 ES5로 트랜스파일하는 것을 봤습니다. 특정 기능이 트랜스파일된 것과 같은 것이 아주 좋은 것 같나요?

또한 주변에 (또 다른...) 모듈 번들러가 있지만 이것이 여러 출력의 가능성과 함께 꽤 매끄러운 코드를 생성하는 것 같습니다.
http://rollupjs.org/ ES6/ES2015 모듈 구문에서 번들로 제공됩니다. 코드를 미래에 증명하려는 경우에 꽤 좋을 것 같습니다.

Typescript로 작성된 PIXI에 대해 +1입니다. 내 경험에 따르면 유형은 이와 같은 프로젝트의 구조에 많은 도움이 됩니다. 성능을 유지할 수만 있다면 :)

RollUp은 환상적입니다. 저는 그것을 사용하는 것을 좋아합니다. 나무를 흔드는 것은 매우 영리합니다. bubel(babel 대신)과 함께 사용하면 정말 _정말_ 빠른 워크플로를 만들 수 있습니다.

여기에서 많은 TS 사랑을 보는 것이 흥미 롭습니다. 확실히 1년 전에는 그렇지 않았습니다. :) ES2015를 입력하는 방법이 있습니다. 이 방법은 고려해 볼 가치가 있습니다.

@photonstorm 은 bubel을 찾지 못했지만 "buble"이 있습니다.

그래, 오타. http://buble.surge.sh/

BubleTape는 이를 위한 훌륭한 테스트 도구입니다. https://github.com/snuggs/buble-tape

#2936 멤버들이 문서를 포기한 이유가 무엇입니까? 여기 에는 노출된 멤버가 25개 이상 있습니다 .

@memberof 지금 추가해야 합니까, 아니면 적용할 수 있는 마법이 있습니까?

@staff0rd 아직 정리 중이라고 생각합니다. 조금 안정화되면 문서 정리를 살펴보겠습니다. 아마도 우리가 사용하는 jsdoc 버전에 ES6 버그가 있기 때문일 것입니다. 우리는 이것을 빨리 청소할 수 있어야 합니다.

ES6이 dev 로 병합되었습니다. 도와주신 모든 분들께 감사드립니다. 그것은 매우 감사합니다!

지금은 닫습니다.

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를 여십시오.