Ninja:dev server made easy
Ninja是一款用于前后端分离开发的本地开发服务器，也被称为是前端容器。它有以下一些特性： HTML、CSS的热重载 根据配置文件自动生成路由 根据配置文件自动读取在线/本地的虚拟数据 支持Jinja2语法（以及其他Nodejs模板） 支持路由代理 支持webpack（通过webpack-dev-middleware） Ninja的前世今生 在木犀，之前我们的前后端分离开发方案是这样的：在本地运行一个简单的Flask应用，只包含路由，在路由中读取虚拟数据并渲染Jinja2模板，然后运行这个应用，进行开发。前端模板开发完成后和后端直接对接调试。 这种方案有一些明显的问题，首先是这个Flask应用没法规范化为一个命令或是一个包，这就需要我们每次在构建前端仓库时都手动写路由等逻辑，这显然是不现实的。还有一个问题就是，Flask的Python环境与目前前端工具生态的主流Nodejs格格不入，想要接入webpack等前端工具，我们必须使用Nodejs来构建我们的dev server。 于是我们需要一款能支持Jinja2语法，同时又能满足前端开发各种需要的dev server。Ninja就在这个节点上横空出世了！ 基本用法 Ninja的上手非常简单，首先安装Ninja npm install -g ninja_cli 下面以Ninja和Webpack一起使用为例，这个例子的源代码在Ninja仓库的example文件夹下可以找到。 首先我们需要一个ninja.conf.js配置文件，当然你也可以选择用命令行参数配置。在这个文件里我们要配置一些必要的参数： module.exports = { template: "swig", // 模板引擎名 mock: "/mock/mock.json", // 虚拟数据位置 webpack: true, // 启用webpack支持 templateDir: "/template", // 模板文件目录 } 然后在webpack的配置里要注意entry和output的配置： entry: [ path.resolve(__dirname, './index.js') ], output: { path: '/', publicPath: 'http://localhost:3000/', filename: 'bundle.js' }, webpack的中间件提供静态文件，我们可以在Ninja的3000端口访问到，所以在模板中的静态文件路径可以写/+文件名。如<script src="/bundle.js"></script>。 配置好Webpack之后，我们写两个简单的模板 // base.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ninja Test</title> </head> <body> <h2>I'm the head</h2> {% block content %}{% endblock %} <a href="/">index page</a> <a href="/second">second page</a> <script src="/bundle....