Sublime+iTerm2+EgretWing2.5+Webpack+ResDepot+chrome个人工作流

发表于 更新于 分类于

前言

上周广州和深圳的白鹭开发者聚会，很遗憾没有时间参加，现在补这篇博客吧。这篇也算是继之前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