使用jsx语法

通过配置babel，spritejs可以使用jsx语法

JSBin

  1. const {Group, Path, Scene, Sprite} = spritejs
  3. const scene = new Scene('#demo-quickStart', {
  4.   viewport: ['auto', 'auto'],
  5.   resolution: [800, 800],
  6. })
  8. const layer = scene.layer();
  10. const group = 
  11.   <Group
  12.     size={[300, 300]}
  13.     pos={[400, 400]}
  14.     anchor={[0.5, 0.5]}>
  15.     {
  16.         [...Array(6).keys()].map( i => <Path path={{
  17.           d: 'M0 0L 50 0A50 50 0 0 1 43.3 25z',
  18.           transform: {scale: 3, rotate: -15},
  19.           trim: true,
  20.         }} 
  21.         pos={[150, 150]}
  22.         anchor={[0, 0.5]}
  23.         strokeColor='red'
  24.         fillColor={`rgb(${i * 139 % 255}, 0, 0)`}
  25.         rotate = {i * 60}></Path> )
  26.     }
  27.   </Group>
  28. layer.append(group);
  30. group.animate([
  31.   {rotate: 0},
  32.   {rotate: 360},
  33. ], {
  34.   duration: 3000,
  35.   iterations: Infinity,
  36. })

这一段代码完全等价于分组 Group中的示例代码。

配置babel

spritejs提供了用于babel的preset，在配置babel前首先应确保babel-preset-spritejsx已经被安装到本地node_modules，推荐同时将其加入devDependency：

  1. npm install --save-dev babel-preset-spritejsx

在.babelrc文件中添加spritejsx这一preset即可：

  1. {
  2.   "presets": ["spritejsx"]
  3. }

根据babel文档，也可以用命令行来调用：

  1. babel --presets spritejsx input.js > output.js

更多参考

JSX格式的详细定义，可参考facebook的官方文档

https://facebook.github.io/jsx/