Feer
基于RollupJS 打造的前端工具集成环境. Github 🚀
命名灵感来自
F
ront-E
nd Engineer
, 即前端工程构建师FEer
, 类似PHPer
、JAVAer
安装 & 使用
命令行
全局安装
1
npm i feer-cli -g
默认使用
1
feer <project-name>
或者
1
npx feer-cli <project-name>
场景支持
在使用 feer
命令创建过程中,会提供模板选择功能, 支持 PC
和H5
:
1 | ? Which type do you want to create? (Use arrow keys) |
文件目录
1 | ├── .babelrc ---> babel配置文件 |
config 配置
1 | ├── build.js ----> nunjucks模板处理 |
src 代码资源
1 | ├── libs ---> 可存放引入的第三方库文件 |
views 模板文件
1 | ├── common ---> 存放公共模板, 如parent、header、footer等 |
build 编译输出
1 | ├── index.html ---> html模板文件 |
关键特性
- 基于
RollupJS
快速打包,让bundle最小化 - Tree-shaking帮助你移除无用代码
- 支持单/多页面开发
- 支持Proxy代理访问接口
- 基于MockJS 模拟 api
- 配置简单便捷、打包迅速
- Nunjucks, 功能丰富、强大的模板引擎
- 支持Sass、Less强大的CSS扩展语言
- 可灵活配置路由
- ES6书写优雅的JS代码
- 支持自动打开浏览器(自动获取本地的ip地址)
- 历经多个项目考验、不断改进升级
关于配置
Rollup 简介
Rollup是一个JavaScript模块打包利器,它使用的ES6模块标准,代替像CommonJS和AMD的模块加载方案,即意味着开发者可以直接使用import和export来优雅地书写代码,且无需要引入日常必备工具Babel了。Rollup可以优化ES模块,以现代浏览器中实现更快地加载。
另外,还有一个重要亮点叫做”Tree-shaking
“,通过这个特性可以帮助开发者从最终的编译文件中排除任何未使用的代码。该特性是基于ES6模块的静态分析,保证最终打包代码的纯净。且不会增加额外的依赖,Webpack虽然也可实现,但配置复杂且造成打包后臃肿。
插件使用
基础包
1 | rollup-plugin-node-resolve ----->帮助Rollup查找外部模块并导入 |
热选包
1 | rollup-plugin-postcss --> Rollup和PostCSS间的无缝集成 |
Web服务
Fastify
是一个高度专注于以最少开销和强大的插件架构为开发者提供最佳体验的 Web 框架。
Fastify 快速并且低开销,且专为 Node.js 平台量身打造,
它受到了Hapi和Express的启发, 是目前最快的Node框架之一。
见
config/server.js
,也可详细API文档
特性
- 高性能:每秒可以提供 76k+个请求
- 可扩展:Fastify 通过其钩子,插件和装饰器完全可扩展
- 基于模式:可使用 JSON Schema 来验证路由并序列化输出
- 日志记录:输出日志
- 对开发者友好:该框架构建非常有表现力,不牺牲性能和安全性
使用
重点在如下四个方面的使用:
- 模板渲染,借助插件point-of-view,除了 Nunjucks, 对ejs、pug、以及twig等,均可支持。
1 | fastify.register(require("point-of-view"), { |
- 启用静态服务,默认为4000端口
1 | // 启用静态服务,4000端口 |
- 路由配置,方便、灵活
1 | // 配置router方法 |
- Proxy 跨域代理接口
1 | // proxy |
模板引擎
Nunjucks
是 JavaScript 专用的功能丰富、强大的模板引擎。
由Mozilla
开发的一个纯JS编写的模板引擎,既可以用在Node环境下,又可以运行在浏览器端。
Nunjucks
的 API 包括渲染模板,添加过滤器和扩展,自定义模板加载器等等。
优点
- 功能丰富且强大,并支持块级继承(block inheritance)、自动转义、宏(macro)、异步控制等等。
- 快速 & 精简 并且高效。运行时代码经过压缩之后只有 8K 大小, 可在浏览器端执行预编译模板。
- 可扩展性超强,用户可以自定义过滤器(filter)和扩展模块。
- 随处可运行,无论是 node 还是任何浏览器都支持,并且还可以预编译模板。
使用
Nunjucks
内置了大量标签,它们是一些特殊的区块,可以对模板执行一些操作。
如:if、for 等分支语句,与 javascript 中的 if、for 类似。
小注: for 一样可以遍历数组 (arrays) 和对象 (dictionaries)。
1 | {% if variable %} |
模板继承 能让你以更强大的方式复用模板。通过定义父模板的基本结构然后由子模板来填充内容。1
2
3
4
5
6
7
8
9
10{% extends "parent.html" %}
{% block header %}
<h3>{{ subtitle }}</h3>
{% endblock %}
{% block content %}
<h1>{{ page.title }}</h1>
<p>{{ page.content }}</p>
{% endblock %}
宏 (macro) 可以定义可复用的内容,类似与编程语言中的函数,看下面的示例:
1 | {% macro field(name, value='', type='text') %} |
现在 field
可以当作函数一样使用了:
1 | {{ field('user') }} |
还有很多好玩又方便的api,更多详见 API文档