前言

上周广州和深圳的白鹭开发者聚会,很遗憾没有时间参加,现在补这篇博客吧。这篇也算是继之前gulp的补充。

如果你的目标是打包runtime和使用官方打包成移动app的方式,那么这篇文章可能不是很适合你。当然也欢迎你阅读。

这里是打造个人个性的开发工作流,如果你喜欢折腾欢迎来尝试,毕竟官方的EgretWing 集成度已经是非常高的了。

需求

  1. 发布代码的版本控制
  2. 代码编辑器个人偏好
  3. egret命令有时候gg

工具说明:

​ sublime text 3 代码编辑

iTerm2  终端工具

​ EgretWing2.5 UI编辑器,集成开发环境

​ ResDepot 资源编辑器

​ chrome 调试和预览工具

​ web pack 代码构建工具

工作流配置

  1. sublime + egret + webpack + chrome + iTerm开发环境配置

  2. EgretWing2.5 + ResDepot UI编辑+资源管理

sublime 插件配置

sublime+iTerm 视窗配置

sublime+iTerm

webpack+egret 改造项目

  1. 创建项目
  2. npm,git初始化
  3. 依赖库安装
  4. webpack+tsconfig配置
  5. 修改原项目

1.创建项目

egret create web pack-egret - -type eui

2. npm init & git init

/webpack-egret npm init

/webpack-egret git init

3. cnpm install

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.9.2",
"awesome-typescript-loader": "^0.15.10",
"http-server": "^0.9.0",
"strip-sourcemap-loader": "0.0.1",
"typescript": "^1.8.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0",
"webpack-validator": "^2.2.2",
"html-webpack-plugin": "^2.22.0"
}

4.webpack+tsconfig配置

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"compilerOptions": {
"target": "ES5",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource",
"node_modules",
"bower_components"
]
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var webpack = require('webpack');
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var paths = require('./webpack.paths')
var loaders = require('./webpack.loaders')
module.exports = {
entry: {
main: paths.app
},
resolve: {
root: paths.app,
extensions: ['', '.js', '.ts']
},
output: {
path: paths.build,
filename: 'bundle.js',
publicPath: 'build/'
},
devtool: 'eval-source-map',
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
module: {
loaders: loaders
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
BUILD_MODE: JSON.stringify('development')
})
]
};

这里给出的webpack配置的不全,后面会给出整个项目的github地址

1
2
3
4
5
6
7
8
9
...
<script src="libs/modules/egret/egret.min.js"></script>
<script src="libs/modules/egret/egret.web.min.js"></script>
<script src="libs/modules/game/game.min.js"></script>
<script src="libs/modules/game/game.web.min.js"></script>
<script src="libs/modules/tween/tween.min.js"></script>
<script src="libs/modules/res/res.min.js"></script>
<script src="build/bundle.js"></script>
...

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|----index.html
|----src
| |---- Main.ts
| |---- LoadingUI.ts
| |----Configure.ts
|
|----build
|
|----libs
| |----modules
|
|----node_modules
|
|----resource
| |----assets
| |----config
| |----default.res.json
|
|----tsconfig.json
|----package.json
|----webpack.config.js
|----webpack.loaders.js
|----webpack.paths.js
|----webpack.production.config.js

开发

1.npm run start

这样就不用egret命令啦。这里是热更新的,只需要修改代码,保存一下,然后在浏览器中刷新就可以看到最新的效果。

2. npm run build

发布之后需要上传的目录结构

1
2
3
4
5
|----index.html
|
|----src
|----build
|----libs

参考链接:

sublime+iterm

webpack+egret

sublime+jsFormat

sublime+typescript

webpack-cn

webpack

推荐一下切图工具pxcook