简单总结一下Ionic项目的手动打包与发布流程:
-
typescript/angular/ionic的关系
Typescript
: 是javascript的超集,也即包含了javascript所有的元素,同时它也是面向对象编程语言;Angular
: 除了AngularJs(1.0), 当前新版的angular是基于typescript构建的一个web前端框架;Ionic
: Ionic默认是基于Angular之上(也开始支持Vue/React)构建的一个UI框架,重点实现了UI库与交互方面的库。
-
代码打包
cd <工程根目录>
ionic build --prod --release
# 打包后会得到一个www目录,里面就是打包后的代码文件
# 正式发布用的代码需要加上参数--prod, 达到优化代码/减少发布文件的体积/代码混淆等效果。
- 代码部署
# 假设使用nginx作为反向代理,那么www下的文件可以配置到nginx的某个静态目录下, 比如:
server {
server_name some.example.com;
client_max_body_size 100m;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/octet-stream;
location / {
root /usr/share/nginx/your_directory/; # 打包好的www下的文件夹及文件放到其目录下
try_files $uri $uri/ /index.html =404;
index index.html;
}
}
- 浏览器访问
# 在浏览器中输入以下URL, 即可访问我们刚刚正式发布的网站。
http://some.example.com