Skip to content

esm-alpha.4

Latest
Latest
Compare
Choose a tag to compare
@pentamania pentamania released this 27 Sep 10:04
· 0 commits to develop since this release
esm-alpha.4
db07477

インストール方法

npmレジストリからインストール（常に最新版）

npm i phina.js@npm:@pentamania/phina-es
もしくは
yarn add phina.js@npm:@pentamania/phina-es
※npmの場合はv6.9以降必須

github releasesからインストール（バージョン固定）

npm install https://github.com/pentamania/phina.js/releases/download/esm-alpha.4/phina.esm-alpha.4.tgz
もしくは
yarn add https://github.com/pentamania/phina.js/releases/download/esm-alpha.4/phina.esm-alpha.4.tgz

下のほうのリンクからもダウンロード可能

使い方についてはこちらを参照。

🔧主な変更点・機能追加

  • 🚀Elementクラスのflickable, physicalのgetterアクティベート機能の復帰
  • 📝型定義・ドキュメントの大幅改善
    • 特にTween, Tweenerクラス周り強化
      • Tweener関係の一部型については細分化で削除・リネームを行っています
    • DisplayeEementにdrawとclip定義&ドキュメントを（無理やり）追加
    • アクセスレベルの見直し
    • JS Docの@link修正
    • …その他細かい継ぎ足し
  • 💥ビルドプロセスでbabelトランスパイルを行うように（後述）
  • 💥Scene.exitの内部処理でargumentsオブジェクトを使わないよう改変（非strict-mode対策、後述）
  • 🧰バージョン表記を一時的に変更
  • 🧰ブラウザ用ESMバンドルの追加（後述）

ブラウザ用ESMバンドルについて

今バージョンより拡張子がmjsのビルドファイルが追加されてます。
直接ブラウザのmodules読み込みで利用する際、今後はこちらのファイルを使用します。

例えば以下のようなディレクトリ構成のときは、

- phina.js
  - build
    - phina.esm.mjs
  - (...その他のフォルダ)
- index.html

このような感じでモジュール読み込みします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>phina esm sample</title>
</head>
<body>
<script type="module">
// mjsファイルからインポート
import { phina, GameApp } from "./phina.js/build/phina.esm.mjs";

phina.main(()=> {
  const app = new GameApp();
  app.enableStats();
  app.run();
})
</script>
</body>
</html>

なおwebpackなどのバンドラーを利用している場合、読み込み方法は今までと変わりません。

babelトランスパイルについて

使用者向け

今回よりビルド時にIE11をターゲットとしてbabelトランスパイルを行うようになりました。
これによりIE11相当のサポートが必要なプロジェクトでも使いやすくなりました。

ただちょっとだけ注意点があります。

  • babelヘルパーモジュールが必要
    • これはnpm install/yarn add時に自動でインストールされるので通常意識する必要はありません
    • mjsバンドルでは組み込み済みのため、不要です
  • 現段階ではバンドル後のスクリプトがstrict-mode下でないと挙動が変わる可能性がある
    • webpackはデフォルトでuse strictを出力してくれるためまず問題ないですが、parcelでは出力されないため若干注意が必要です
    • 違いが出ないよう現在修正中…

ライブラリ開発者向け

ビルドの際に自動的にes2015+構文をES5相当に変換するようになったため、ご自身でphinaに機能追加する際、let/constやarrow function, static propertyなどが心置きなく使えるようになりました。

ただしbabelはいわゆるpolyfill処理は行わないことに注意が必要です。
例えばPromiseはIE11ではサポートされてませんが、特に補完などされずそのままになります。

Assets 3
Loading