起因
前段时间,我正在为我的新项目选择前端框架,无意中发现了polymer这个由Google推出的基于Web Component的框架,在仔细对比现有的一些框架后,决定采用它作为新项目的前端框架。 选择它是基于下面的几个原因:
- Google加成(:-D)
- 与React、Vue等相比,Polymer是面向未来的框架。
- 暂时还没想到……
开始
首先本机要安装node
、python
以及flask
,这个就不多说了。 我们新建一个目录存放代码:
$ mkdir flask-polymer2-boilerplate
$ cd flask-polymer2-boilerplate/
然后新建一个文件app.py
,这个就是我们的Flask启动文件了:
# -*- coding: utf-8 -*-
from flask import Flask
app = Flask(__name__)
@app.route("/")
def index():
return "Hello World!"
if __name__ == "__main__":
app.run()
我们运行app.py
:
$ python app.py
我们打开浏览器,输入地址:127.0.0.1:5000就能看见服务器返回的“Hello World”了。 接下来,我们新建一个文件夹:
$ mkdir static
$ cd static/
flask
的静态资源(js,css,image..)默认都会放在这个文件夹下。 polymer
官方提供了一个脚本可以让我们快捷在项目里集成polymer
,安装命令:
$ npm install -g polymer-cli
等待安装完成后,我们在static目录下执行:
$ polymer init polymer-2-starter-kit
这个命令会创建一个简单的polymer应用。这个时候我们的项目结构是这样的:
flask-polymer2-boilerplate
├── app.py
└── static
├── README.md
├── bower_components
├── index.html
├── package.json
├── service-worker.js
├── sw-precache-config.js
├── bower.json
├── images
├── manifest.json
├── polymer.json
├── src
└── test
index.html就是我们的前端入口文件,我们修改下 app.py:
# -*- coding: utf-8 -*-
from flask import Flask, current_app
app = Flask(__name__)
# 拦截所有的请求,并返回index.html文件
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return current_app.send_static_file("index.html")
if __name__ == "__main__":
app.run()
这个时候如果我们运行 app.py 并访问127.0.0.1:5000的话会报错,我们还需要修改一下index.html文件:
<!--所有加载的链接都需要修改修-->
<link rel="icon" href="static/images/favicon.ico">
<link rel="manifest" href="static/manifest.json">
<link rel="apple-touch-icon" href="static/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="static/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="static/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="static/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="static/images/manifest/icon-192x192.png">
<meta name="msapplication-TileImage" content="static/images/manifest/icon-144x144.png">
<script>
// Register the base URL
const baseUrl = document.querySelector('base').href;
// Load and register pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register(baseUrl + 'static/service-worker.js');
});
}
</script>
<script src="static/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="static/src/my-app.html">
好了,我们现在刷新一下页面,这个时候已经可以正常的显示了。 但是这还没有结束,现在的页面里js是使用es6语法的,在大多数浏览器里都无法正常运行,无法在生产环境中使用,还需要编译成es5。我们修改下static目录下的polymer.json文件,加入这一段配置:
"builds": [
{ "preset": "es5-bundled" }
]
然后执行:
$ polymer build
然后我们查看项目,这个命令会在static目录下创建一个build文件夹,里面存放的就是编译后也就是我们最终提供给用户浏览使用的文件。这个时候我们再次修改 app.py:
# -*- coding: utf-8 -*-
import os
from flask import Flask, current_app
static_folder_path = "static/build/es5-bundled" if os.getenv("FLASK_ENV") == "production" else "static"
app = Flask(__name__, static_folder=static_folder_path)
@app.route("/static/<path:path>")
def static_c(path):
return current_app.send_static_file(path)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return current_app.send_static_file("index.html")
if __name__ == "__main__":
app.run()
这个时候我们再次运行程序:
$ FLASK_ENV="production" python app.py
访问网页并查看其中的一个请求,发现它传输的内容已经是压缩并编译后的文件了。 至此整个模板已经搭建完毕了。
10 31, 2017