Polymer2和Flask模板工程

起因

前段时间，我正在为我的新项目选择前端框架，无意中发现了polymer这个由Google推出的基于Web Component的框架，在仔细对比现有的一些框架后，决定采用它作为新项目的前端框架。选择它是基于下面的几个原因：

Google加成(:-D)
与React、Vue等相比，Polymer是面向未来的框架。
暂时还没想到……

注意：
本文不会过多讨论Polymer和Flask的技术细节！
最终的模板工程可以在Github上找到。

开始

首先本机要安装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