README.md
1# developtools_ace_js2bundle
2
3#### Introduction
4Provides syntax compilation conversion, syntax validation, rich and friendly syntax error tips.
5
6#### Tutorial
7
8Run `npm install` under `ace-loader` directory.
README_zh.md
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
