想用ES6語法開發phaserjs游戲，是phaserCE，但是不知道怎么導入，總是報錯，后來經過多次嘗試，解決方法如下：
干脆不導入，直接暴露到window里，然后模塊化的代碼全部在window.onload后執行，即可跳過編譯時報錯問題，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="/stylesheets/reset.css"/> <link rel="stylesheet" href="/stylesheets/style.css"/> <link rel="stylesheet" href="/stylesheets/black.css"/> <script type="text/javascript" src="/javascripts/plugins/rem.js"></script> <title><%= mtitle %></title> </head> <body> <div id="game"></div> <script src="/javascripts/phaserDemo/plugins/phaser.js"></script> <script src="/javascripts/phaserDemo/plugins/phaser.min.js"></script> <script src="/javascripts/phaserDemo/Game.js" type="module"></script> <script src="/javascripts/phaserDemo/Main.js" type="module"></script> </body> </html>
html頁面的phaser的type不能設置'module'，設置的話會報錯，報錯原因其實是找不到root，暫且不管報錯原因，在Main.js模塊中，添加window.onload然后把游戲入口js模塊導入初始化即可
Main.js
import Game from './Game.js' window.onload = function(){ var game = new Game(); }
Game.js
export default class Game{ constructor(){ this.init(); } init(){ this.game = new Phaser.Game(1280,720,Phaser.AUTO); } }
或者
export default class Game extends Phaser.Game{ constructor(width=1280,height=720,renderer=Phaser.AUTO,parent=''){ super(width,height,renderer,parent); this.init(); } init(){ // this.game = new Phaser.Game(1280,720,Phaser.AUTO); } }
下一步就可以定義state，全部導入到Game里，初始化，繼續下一步了。
最后開發好的項目要用babel或者webpack打包一下
每個人的想法都不一樣，所以開發框架及架構肯定也不一樣，遵循自己的想法，不管怎樣，適合自己的就是最好，希望我的這個簡單到大道至簡的框架能給過客一點啟發。