1# developtools_ace_js2bundle 2 3#### 介绍 4 5提供类Web范式的语法编译转换、语法验证，丰富友好的语法报错提示。 6 7#### 软件架构 8 9* ace-loader/src: 编译构建框架源码 10* sample: 工程样例 11* test: 单元测试用例 12* third_party/parse5: hml标签语言解析器 13* third_party/weex-loader: css样式和javascript语言解析器 14* .eslintrc.js: eslint配置规则 15* babel.config.js: babel配置信息 16* main.product.js: 编译构建框架源码 17* package.json: 安装依赖软件版本信息 18* webpack.rich.config.js: 富设备编译构建框架脚本配置信息 19* webpack.lite.config.js: 瘦设备编译构建框架脚本配置信息 20 21#### 环境准备 22 23``` 24> npm -v 25 6.14.8 26> node -v 27 v12.18.3 28``` 29请安装最新稳定的node版本。 30 31#### 安装 32 33进入到ace-loader目录 34``` 35npm config set registry http://registry.npm.taobao.org 36npm config set strict-ssl false 37npm cache clean -f 38npm install 39``` 40 41#### 快速开始 42 43以编译`sample\rich`工程为例，进入到ace-loader目录 44``` 45npm run build 46npm run rich 47``` 48上述命令编译了ace-loader目录下的`sample\rich`工程，编译结果在`sample\rich\build`目录。 49 50#### 创建一个新工程 51 52##### 创建富设备工程 53 54假如创建富设备工程，进入到ace-loader目录，在ace-loader下创建一个`helloRich`的文件夹，文件夹内包含必要的`manifest.json`页面配置文件和应用创建销毁的生命周期函数`app.js`文件，并且包含至少一个页面，页面由hml、css、js文件组成。创建瘦设备工程`helloLite`同理。 55 56示例代码如下： 57 58index.hml 59```hml 60<div class="container"> 61 <div class="text-div"> 62 <text class="title">This is the index page.</text> 63 </div> 64 <div class="button-div"> 65 <input type="button" value="Go to the second page" class="button" onclick="launch"/> 66 </div> 67</div> 68``` 69index.css 70```css 71.container { 72 justify-content: center; 73 align-items: center; 74} 75 76.title { 77 font-size: 50px; 78} 79 80.button-div { 81 padding-top: 50px; 82 align-items: center; 83 justify-content: center; 84} 85 86.text-div { 87 align-items: center; 88 justify-content: center; 89} 90 91.button { 92 font-size: 30px; 93} 94``` 95index.js 96```js 97export default { 98 data: { 99 }, 100 launch: function() { 101 console.info('index page launch'); 102 } 103} 104``` 105app.js 106```js 107export default { 108 onCreate() { 109 console.info('Application onCreate'); 110 }, 111 onDestroy() { 112 console.info('Application onDestroy'); 113 } 114} 115``` 116manifest.json 117```json 118{ 119 "appID": "com.example.helloworld", 120 "appName": "HelloWorld", 121 "versionName": "1.0.0", 122 "versionCode": 1, 123 "minPlatformVersion": "1.0.1", 124 "pages": [ 125 "pages/index/index" 126 ], 127 "window": { 128 "designWidth": 750, 129 "autoDesignWidth": false 130 } 131} 132``` 133 134工程`helloRich`的目录结构: 135 136- helloRich 137 - pages 138 - index 139 - index.hml 140 - index.css 141 - index.js 142 - app.js 143 - manifest.json 144 145需要编译创建的`helloRich`工程时，在`package.json`的scripts里添加一行脚本 146``` 147"helloRich": "cd helloRich && webpack --config ../webpack.rich.config.js" 148``` 149**Note**: 如果编译创建的`helloLite`工程，需要使用瘦设备的打包框架脚本配置，即： 150``` 151"helloLite": "cd helloLite && webpack --config ../webpack.lite.config.js" 152``` 153然后在ace-loader目录执行 154``` 155npm run build 156npm run helloRich 157``` 158**Note**: 编译结果在`helloRich\build`目录。 159 160##### 创建卡片工程 161 162假如创建卡片工程，进入到ace-loader目录，在ace-loader下创建一个`helloCard`的文件夹，文件夹内包含必要的`manifest.json`页面配置文件，并且包含至少一个页面，页面由hml、css、json文件组成。 163 164示例代码如下： 165 166index.hml 167```hml 168<div class="container"> 169 <div class="text-div"> 170 <text class="title">This is the index page.</text> 171 </div> 172 <div class="button-div"> 173 <button value="Go to the second page" class="button" onclick="router"/> 174 </div> 175</div> 176``` 177index.css 178```css 179.container { 180 justify-content: center; 181 align-items: center; 182} 183 184.title { 185 font-size: 50px; 186} 187 188.button-div { 189 padding-top: 50px; 190 align-items: center; 191 justify-content: center; 192} 193 194.text-div { 195 align-items: center; 196 justify-content: center; 197} 198 199.button { 200 font-size: 30px; 201} 202``` 203index.json 204```json 205{ 206 "data": { 207 "show": true, 208 "display": false, 209 "card_name": "weather", 210 "temperature": "35°", 211 "city": "SH", 212 "date": "2020.09.04", 213 "weather_info": "cloud", 214 "image_src":"../../common/clouds.png" 215 }, 216 "actions": { 217 "router": { 218 "action": "router", 219 "bundleName": "com.example.helloworld", 220 "bundleAbility": "com.example.helloworld.MainAbility" 221 } 222 } 223} 224``` 225manifest.json 226```json 227{ 228 "appID": "com.example.helloworld", 229 "appName": "HelloWorld", 230 "versionName": "1.0.0", 231 "versionCode": 1, 232 "minPlatformVersion": "1.0.1", 233 "pages": [ 234 "pages/index/index" 235 ], 236 "window": { 237 "designWidth": 720, 238 "autoDesignWidth": false 239 }, 240 "type": "form" 241} 242``` 243 244工程`helloCard`的目录结构: 245 246- helloCard 247 - pages 248 - index 249 - index.hml 250 - index.css 251 - index.json 252 - manifest.json 253 254需要编译创建的`helloCard`工程时，在`package.json`的scripts里添加一行脚本 255``` 256"helloCard": "cd helloCard && webpack --config ../webpack.rich.config.js" 257``` 258然后在ace-loader目录执行 259``` 260npm run build 261npm run helloCard 262``` 263**Note**: 编译结果在`helloCard\build`目录。 264 265#### 创建一个新的页面 266 267以`sample\rich`工程为例，例如在`sample\rich\pages`目录创建一个`bar`页面,需要在项目的`manifest.json`文件的`pages`新增一行，如下所示： 268``` 269 "pages": [ 270 "pages/index/index", 271 "pages/bar/bar" 272 ] 273``` 274 275#### 编译工程 276 277进入到ace-loader目录 278``` 279$ npm run build 280$ npm run rich # 编译sample\rich工程 281$ npm run lite # 编译sample\lite工程 282$ npm run card # 编译sample\card工程 283``` 284**Note**: 编译结果在`sample\[rich|lite|card]\build`目录。 285
