没有更多推荐了，
不良信息举报
举报内容：
白鹭引擎-Egret使用一:从创建第一个html5程序到运行，及在centos上运行，发布等
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！没有更多推荐了，
不良信息举报
举报内容：
【Egret】里使用iframe标签达到内嵌多个web界面
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
Egret应用开发实践（01） Egret与WebPack
Egret引擎是一款使用TypeScript语言构建的开源免费的移动游戏引擎。Egret仅是纯粹的使用TypeScript语言来开发游戏，开发后可以使用Egret来打包为HTML5网页游戏和Android,iOS,WinPhone原生游戏。
webpack是一款模块加载器兼打包工具，它能把各种web开发中常用到的静态资源，包括JS（含JSX）、CoffeeScript、TypeScript、样式（含less/sass）、图片等都作为模块来进行统一的管理以及打包发布，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。 其官方主页用下面这张图来说明Webpack的作用：
TypeScript
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
TypeScript扩展了 JavaScript 的句法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。
开发环境搭建
首先还是要保证安装了 nodejs，然后通过 npm 安装程序。
项目初始化
创建项目目录
初始化 package.json
安装WebPack
npm install --save-dev webpack
安装 awesome-typescript-loader
npm install --save-dev awesome-typescript-loader
安装 strip-sourcemap-loader
npm install --save-dev strip-sourcemap-loader
Egret引擎的GitHub开源地址 ，可以在此获取到最新的Egret源码。
解压后将egret目录下build、src目录拷贝到项目目录的libs/egret下
安装http-server
npm install --save-dev http-server
配置TypeScript
在项目目录下新建tsconfig.json
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
"files": [
"exclude": [
"node_modules"
"compileOnSave": false,
"buildOnSave": false
创建HelloWorld应用
项目目录的apps下创建应用目录app_01_hello_world，并创建以下文件：
app/app.ts
/// &reference path="../../../libs/egret/build/egret/egret.d.ts"/&
/// &reference path="../../../libs/egret/build/tween/tween.d.ts"/&
/// &reference path="../../../libs/egret//build/res/res.d.ts"/&
class App extends egret.DisplayObjectContainer {
public constructor() {
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
private onAddToStage(event: egret.Event) {
this.createGameScene();
private createGameScene(): void {
var stageW: number = this.stage.stageW
var stageH: number = this.stage.stageH
var colorLabel: egret.TextField = new egret.TextField();
colorLabel.textColor = 0
colorLabel.textAlign = "center";
colorLabel.text = "Hello World!";
colorLabel.size = 40;
colorLabel.x = stageW - colorLabel.width && 1;
colorLabel.y = (stageH - colorLabel.height && 1) + 50;
this.addChild(colorLabel);
egret.registerClass(App, "App");
window["App"] = A
index.html
&!DOCTYPE HTML&
&meta charset="utf-8"&
&title&Hello World&/title&
&meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/&
&meta name="apple-mobile-web-app-capable" content="yes"/&
&meta name="full-screen" content="true"/&
&meta name="screen-orientation" content="portrait"/&
&meta name="x5-fullscreen" content="true"/&
&meta name="360-fullscreen" content="true"/&
html, body {
-ms-touch-action:
background: #888888;
padding: 0;
border: 0;
margin: 0;
height: 100%;
&script src="../../libs/egret/build/egret/egret.js"&&/script&
&script src="../../libs/egret/build/egret/egret.web.js"&&/script&
&script src="../../libs/egret/build/game/game.js"&&/script&
&script src="../../libs/egret/build/game/game.web.js"&&/script&
&script src="../../libs/egret/build/tween/tween.js"&&/script&
&script src="../../libs/egret/build/res/res.js"&&/script&
&script src="build/app.bundle.js"&&/script&
&div style="margin: width: 100%;height: 100%;" class="egret-player"
data-entry-class="App"
data-orientation="auto"
data-scale-mode="noScale"
data-frame-rate="30"
data-content-width="640"
data-content-height="960"
data-show-paint-rect="false"
data-multi-fingered="2"
data-show-fps="false" data-show-log="false"
data-log-filter="" data-show-fps-style="x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9"&
&script type=""&
egret.runEgret();
webpack.config.js
var path = require('path');
module.exports = {
path.resolve('app/app')
path: path.resolve('build'),
filename: '[name].bundle.js',
pathinfo: false // show module paths in the bundle, handy for debugging
loaders: [{
test: /\.ts$/,
loader: 'awesome-typescript',
'doTypeCheck': true
include: path.resolve('app'),
exclude: /node_modules/
noParse: [
resolve: {
extensions: ["", ".js", ".ts"]
plugins: [
编译及测试
编译，在app_01_hello_world下运行
..\..\node_modules\.bin\webpack
运行，在项目目录下运行
.\node_modules\.bin\http-server
浏览器打开
本文代码：
项目地址：
Guyoung Studio
Official Site:
0 收藏&&|&&6
你可能感兴趣的文章
19 收藏，6.2k
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。椤甸潰a涓庢湇鍔″櫒寤虹珛浜嗚繛鎺ワ紙鍦╦s涓?疄鐜帮級锛岀劧鍚庡垏鎹㈠埌浜嗛〉闈?锛屽?浣曞湪椤甸潰b涓?户缁?娇鐢ㄩ〉闈?鐨剆ocket锛}