• 旨在脱离后端环境的前端开发套件


    IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如。

    IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇。

    为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么办,可以让后端人员来协助搭建环境;但是项目是java,而html是velocity模板引擎呢?让后端人员来搭建java环境吧。。。好繁琐呀。而且,我想根据前后端的接口来自己mock数据怎么办?。。这些都是问题,IDT应运而生。

    适用于Django Template、PHP Smarty、Java Velocity、Java Freemarker的Integration Develop Tool [ 集成开发工具 ] 

    其实,IDT中的server使用的是grunt-conect组件,然后通过了middleware的概念,来处理各种类型的数据:

    例如:html middleware做的事情,就是把与请求的url相对应的html文件,与自己的mock数据的文件,通过对应的模板引擎渲染,呈现给浏览器:

    ajax middleware做的事情也是一样的。

    目前,IDT支持了Python Django、PHP Smarty、Velocity、Freemarker的模板引擎的渲染,大大提高了前端开发的效率。

    如何安装IDT:传送门

    在安装完成以后,就可以开始开发了,在终端输入:idt -V 有正常输出,则安装正常~

    在安装的源文件目录中,有一个:example-ws 目录,这里面就是示例目录,在这里可以切换各种模板引擎,进行测试:

    .

    ├── django

    │   ├── base.html

    │   └── test.html

    ├── freemarker

    │   ├── list.html

    │   ├── test.tpl

    │   └── view.html

    ├── idt-config.js

    ├── mock

    │   └── html

    │       ├── commonmock

    │       │   └── common.js

    │       ├── django

    │       │   └── test.html.js

    │       ├── freemarker

    │       │   └── test.tpl.js

    │       ├── smarty

    │       │   └── test.tpl.js

    │       └── velocity

    │           └── test.html.js

    ├── smarty

    │   ├── footer.tpl

    │   └── test.tpl

    └── velocity

        ├── dep.html

        ├── header.html

        └── test.html

    可以把这个目录拷出一份来,并且cd进入此目录,则可以直接执行:

    idt ws start

    那么这个例子就跑起来了,想结束server,只需要Ctrl+C。

    在切换引擎的时候,唯一需要修改的地方就是:

        // 模板引擎根目录【只需要修改最后一个参数即可】
        templates: path.join( webContent, secondary, 'velocity' ),
    
        // 模板引擎切换: smarty / django / velocity / freemarker [ 默认velocity ]
        /**
         * velocity模板引擎采用:
         * https://www.npmjs.com/package/velocity
         *
         * django模板引擎采用'A wrapper of Django's template engine'方式(桥接原理)
         * 详见:https://www.npmjs.com/package/django
         * 在启用之前请确保python环境已经ready,然后安装django:
         * # pip install -v Django==1.7
         * //or
         * # easy_install "Django==1.7"
         *
         * smarty模板引擎采用:
         * https://www.npmjs.com/package/nsmarty
         *
         * freemarker模板引擎采用:(桥接原理)
         * 在启用之前,请确保java环境,并且需要安装:http://fmpp.sourceforge.net/
         * https://www.npmjs.com/package/freemarker.js#readme
         */
        tplEngine: 'velocity',
    

    idt-config.js中的第50行,用来修改模板引擎的view的根目录,71行则是切换引擎的配置。

    还有需要注意的地方就是上面代码中的注释部分:

    django需要安装好python环境,并且,通过python安装好django,详细地则可以通过上面给出的链接去查看;

    同理,freemarker也需要java环境,并且下载fmpp这个东东,而且要把fmpp中的bin目录加入环境变量;

    django和freemarker的原理类似,node层次的代码,只是一层wrapper,它会通过命令行形式静默地去掉用python的接口或者java的接口,从而完成渲染。

    IDT的功能不止这些,还有反向代理、远程调试、Less的实时编译(通过less middleware,less在请求过程中,直接被编译成css),批量导出静态文件、Build构建(调用了Edp进行build)等等功能,接下来会慢慢的介绍它的每一个功能。

    感兴趣的可以看它的源代码就会了解~

  • 相关阅读:
    linux计划任务格式
    KVO监听数组的变化
    经典题目:输入半径求圆的面积
    /src/applicationContext.xml
    词法分析错题
    正规式与有限自动机
    词法分析程序的设计
    词法分析概述
    windows平台上 搭建 VisualSVN服务器 和 TortoiseSVN客户端
    maven error Failed to execute goal org.apache.maven.plugins:maven-assembly-plugin:3.1.0:single
  • 原文地址:https://www.cnblogs.com/catprayer/p/4338680.html
Copyright © 2020-2023  润新知