Pixi.js: 需要帮助：ES6 转换工作

你想用 let 和 const 走哪条路线？ 默认为 const，并且只对应该更改其引用的属性使用 let
或者
默认为 let，并且仅使用 const 作为对开发人员的更多提示，我是认真的，不要更改此设置。

前一种选择。 默认使用 const。 我将所有内部 var 转换为 let 并修复了明显的范围问题，并禁止将 var 与 jshint 一起使用。 需要再次使用 const。

我会推荐的东西：

• [x] 使用babel-preset-es2015-loose ，我只使用 babel-preset-es2015 的性能很差。
• [x] 切换到eslint ，它有更好的 ES6 支持，总体上比 jshint 更好。 这是 pixi 风格的一个很好的起点。 它还会抱怨您可以使用const但使用let的地方。 可以轻松找到需要为 const 修复的所有位置。
• [x] 使用最新的 jsdoc 大师，里面有很多 ES6 修复尚未发布。
• 切换到 webpack。

谢谢@englercj。 好清单。

@englercj babel-preset-es2015-loose 有一个弃用警告，您是否尝试使用 babel-preset-es2015 选项{"loose": true}像它建议的那样？

我也更喜欢 webpack 而不是 browserify，有几个有用的链接：
https://github.com/webpack/webpack/tree/master/examples/multi-part-library
http://krasimrtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

我的偏好是等待 webpack，而不是把它堆在上面。 可能用于另一个较小的 PR。 这种变化代表了构建过程的变化，但不一定是对 ES6 的改进。 此外，需要确保源映射、标题等工作。 我知道它是如何更好的，但让我们现在等待。

babel-preset-es2015-loose 有一个弃用警告，你是否尝试过 babel-preset-es2015 选项 {"loose": true} 像它建议的那样？

哈，那是 2 周前刚刚添加的。 我没有尝试过，因为在我开始使用它时它还不存在。

大家好，

只需快速呼喊一下即可呼应 Chad 关于宽松模式的想法，并在此处添加我的两分钱。
正如我们之前与@GoodBoyDigital讨论的那样，我们必须非常小心性能，所以我认为松散模式是一个很好的起点。

另外，我不确定这张表的最新情况： https ://kpdecker.github.io/six-speed/ 你们知道吗？

如果它仍然是，那么我们必须小心不要让 ES2015 变得疯狂并转换不需要的东西，即：如果for-of仍然会降低性能，正如它在桌面上所说的那样，我们应该'迭代场景图子项时不要使用它。

Babel 现在应该为数组优化for-of （请参阅：优化），这些测试似乎很旧。

无论如何， @alvinsight你是对的，一切都不需要是 ES2015。

好名单@englercj ！

也同意@alvinsight。 我们已经看到使用 es6 语法的更简洁的代码，因此赢得了全面的胜利 :)

其他所有决定都应该基于性能——“它看起来更好但运行速度更慢吗——不要这样做”

数组循环是一个很好的例子——没有必要仅仅因为我们可以替换已经快速且可读的东西。

对 webpack 也是肯定的！ @bigtimebuddy是正确的，这应该是向 es6 转变的第二部分。

同意！
终于能够读写class Sprite extends Container真是太好了！

更新

• 用eslint替换了jshint （并修复了 linting 错误， eslint获胜！）
• 将loose: true与babel-preset-es2015 一起使用

大家晚上好！

用我们的 mixins 打点小麻烦。

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"

将其复制粘贴到 chrome 控制台中，似乎工作正常。

有趣的！ 当前交互不起作用，并且似乎缺少交互属性。 也许是另一个原因？ 会继续挖...

啊哈！ 找到了

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

import interactiveTarget from './interactiveTarget';

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

或许？

对！

PR 1： https ://github.com/pixijs/pixi.js/pull/2960

它修复了一些位，例如 mixins 和文本。

明天我会看看过滤器...

虽然小伙子看起来真的很好！

干得好！ 是的，像这样使用 require() 将返回一个具有单个默认键的对象，其中包含您期望的所有其他内容。

过滤器现在看起来不错！ 在我正在处理的一个非常复杂的当前项目上运行这个 - 一切似乎都是 100% 的！

可能会在其他一些游戏上进行测试，但很快就可以合并！

@bigtimebuddy你用 pixi-animate 试过这个构建吗？

把它扔在那里.. traceur 似乎比 babel 更快？
值得研究吗？

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

这些测试是旧的，并且不能在 babel 松散的情况下运行。 此外，您还可以争辩说，在许多情况下，打字稿比两者都快:)

我会建议你们考虑使用 TypeScript 作为这个主要重写/改编的一部分。 关于 TypeScript 的几点说明：

• 在 JavaScript 中使用类型系统将成为新标准，这只是时间问题。
• 它是 JavaScript。 除了类型系统之外，语法没有区别。
• 提高代码质量。 您可能会发现大量代码需要稍作重组以匹配正确位置的类型。
• 增加拉取请求质量检查 - 如果存在某种类型问题，补丁根本无法合并。

我知道这不是一件容易的事，但我相信它可以为代码库和社区带来重大好处。
干杯!

@endel我正在将 pixi-spine 移动到 typescript，将有 pixi 的 TS 插件演示。

@endel只是好奇，但是 TS 是否解决了我上次查看它时遇到的问题：输出是全有或全无的情况，即 _everything_ 被转译回 ES5，或者什么都不是，基于目标?

我记得它根本没有使用 polyfill。 因此，如果你想让一个单一的代码库在各种浏览器上运行，从尖端到旧版，你仍然必须以 ES5 为目标，而现代浏览器现在原生支持的所有不错的新特性都被忽略了，因为无论如何它降级到ES5？ 还是仍然需要在 TS 输出之上使用 ES6 polyfill 来覆盖所有基础？

就输出而言，这是一个全有或全无的情况，即一切都被转译回 ES5，或者什么都不是，基于目标？

不知道你是什么意思。 如果你以 ES5 为目标，它会将语法转换为 ES5。 但 babel、tracuer 等人也是如此。 你指的是什么具体的东西吗？

我记得它根本没有使用 polyfill。

它没有，但同样也没有 babel、tracuer 或其他编译器； 所以我不确定你在开什么车？ 无论哪种方式（babel 或 TS），我们都必须使用 core-js polyfill。

我认为讨论是 babel 转换 ES6 -> ES5 或 TypeScript 转换 TS -> ES5。 无论哪种方式，我们都必须使用 ES5。 TS 可以针对 ES6，如果我们愿意，我们可以发布 ES6 构建，但这将是 ES5 构建的补充。

@photonstorm使用 TypeScript，据我所知，您无法像使用 Babel 那样挑选和选择要转换为 ES5 的功能。

我使用 TypeScript，觉得它很棒。 很想看到 Pixi 最终采用。 谷歌现在鼓励开发人员将 TypeScript 与 Angular 结合使用，这是广泛采用的一个好兆头。 对于像 Pixi 这样复杂的代码库，严格类型可以很好地服务。

需要使用 TypeScript 解决的一些问题包括 jsdocs（任何人都有这方面的经验吗？）和上游依赖项，他们可能在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

通常使用 ES5 作为目标，但将 ES6 作为库包含在内，以对诸如Symbol 、 Map等内容进行类型定义。

实际上，正如@englercj所说，无论您使用哪种编译器，您都需要在编译代码后包含垫片。 例如，Babel 不会自动为 IE9 包含Symbol polyfill。

我不知道你可以用 babel 做到这一点。 我不确定我是否看到了它对我们的好处，因为无论如何我们都必须以 ES5 为目标。 但这很整洁！

对于 Pixi，不是很有用，但是是的，您可以挑选 Babel 预设以仅选择某些要转换的功能。 如果您想构建到 ES6 但只想支持 Node 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）一起使用，它可以实现非常、_really_ 快速的工作流程。

在这里看到这么多的 TS 爱很有趣。 一年前肯定不是这样 :) 有一些方法可以对 ES2015 进行类型检查，这可能值得考虑。

@photonstorm没有找到 bubel，但是有“buble”

对对对，错别字。 http://buble.surge.sh/

BubleTape 是一个很好的测试工具https://github.com/snuggs/buble-tape

#2936 是会员放弃文档的原因吗？ 这有一个暴露的成员，其中有 25+。

现在是否需要将@memberof添加到它们中，或者是否有一些可以应用的魔法？

@staff0rd我认为我们仍在清理工作，一旦稳定一点，我们将考虑清理文档。 很可能只是因为我们使用的 jsdoc 版本存在 ES6 错误。 我们应该很快就能把它清理干净。

ES6 已合并到dev ，感谢所有提供帮助的人。 非常感谢！

暂时关闭这个。

该线程已被自动锁定，因为它关闭后没有任何最近的活动。 请针对相关错误打开一个新问题。