Nicely Pointed Mandibles

    ftl-server

    1.1.25 • Public • Published

    ftl-server

    npm Build Status

    ftl-server 是一前端开发工具,支持解析freemarker模板,模拟后端接口,反向代理等功能。

    特性

    • 解析freemarker模板
    • 静态资源服务
    • mock请求
    • 代理请求
    • livereload
    • weinre
    • 自定义路由配置

    安装

    npm install ftl-server -g

    使用

    ftl-server -c ./config.js -p 8080

    或者

    fs -c ./config.js -p 8080

    ftl-server命令的选项不多,可以通过ftl-server help查看帮助

    • -c, --config 指定配置文件。但不是必需的, 如果没有指定,则寻找当前工作目录下的ftl.config.js作为配置文件
    • -p, --port 服务的端口,默认80
    • -l, --log 配置打印日志,指定要显示的日志,可以指定多个。比如-l mock proxy error表示只显示mock,proxy和error日志。默认为-l all,表示显示所有日志
    • --hot 开启livereload;开启后修改css会自动更新页面的样式,修改ftl/js/图片等会自动刷新页面
    • --https 启动https服务,默认是http服务。开启https后的默认端口为443
    • -h, --help 帮助
    • -v, --version 显示版本号

    配置文件

    配置文件是一个JSON或者export一个对象的module,配置文件配置所有功能。修改配置文件服务自动重启,下面是一个例子

    module.exports = {
      public: 'E:\\somedir\\public',
      port: '80',
      hot: true,
      watch: [require.resolve('./page.ftl'), 'E:\\ftlServer\page.mock'],
      remoteDebug: {
        browser: 'firefox'
      },
      urlMap:false, //默认不开启
      ftl: {
        urlMaps: { 
            '/': '/index'  //需要开启urlMap生效,例如: 对应访问index.ftl
        },
        base: 'E:\\somedir\\ftl',
        dataFiles: ['E:\\somedir\\data.ftl'],
        global: {
     
        },
        'ftlfile.ftl': function(req, res) {
          return {
            saleActivityMap: {
              "000008": {
                activityStatus: 'actived'
              }
            }
          }
        }
     
      },
      mock: [{
        path: '/request',
        method: 'get',
        status: '200',
        header: {
     
        },
        response: function(req, res) {
          return {
            a: 1,
            B: 2
          }
        }
      }, 'E:\\mock\\mock.js'],
      proxy: [{
        path: '/proxy1',
        target: 'http://localhost:3000'
        }
      ]
    }

    全局配置字段

    • public 静态文件目录,可以是一字符串,或者数组以指定多个静态目录
    • port 本地服务端口
    • hot 开启livereload,值为boolean
    • urlMap 是否开启urlMap,值为boolean,默认不开启
    • watch 需要监控的额外的配置文件,值为数组。比如watch: ['./page.ftl', './page.mock'],可以是绝对路径或相对路劲,相对路径相对于主配置文件(比如:ftl.config.js)
    • https 启动https服务,值为boolean, 开启后默认端口为443
    • remoteDebug 针对weinre的配置。该值若为true,表示开启weinre,并使用默认配置;或者为object, key支持weinre的所有配置字段。 还有一个key: browser,表示打开weinre client的浏览器,默认是chrome。还有目前weinre(20150911)是不支持https的,但是ftl-server使用proxy来支持https。

    ftl

    ftl 字段用来配置freemarker的解析,服务起来后访问根目录会列出base目录下的文件列表。

    • urlMaps 配置自定义路由,值为对象
    • base 配置freemarker模板目录
    • global freemarker共享的数据模型,即所有模板都会用到
    • dataFiles 值为数组。表示引入单独的ftl数据模型文件,文件实例如下:
    //E:\\dir\\data.ftl.js, 单独的ftl数据模型文件
    //key:ftlFile.ftl表示要渲染的ftl文件, value表示该渲染该ftl的数据
    module.exports = {
      'ftlFile.ftl': {
          data: ''
      }
    }

    其他就是特定模板的数据模型,字段的key是模板文件名(不包含目录路径),value可以是对象;也可以是函数且返回一对象(函数的参数是express中间件req,res)

    注意事项: freemarker用<#assign>定义的数据模型会屏蔽程序传入的数据模型,所以在dataModel.html中定义的数据模型会屏蔽这里定义的数据模型。

    mock

    mock 字段配置接口模拟,值是一数组,数组中的每个值是一个对象或者一个路径,对象表示模拟一个请求。

    • path 请求的path, 本来应该是严格的路由path(不包含querystring), 如果提供除path外的url的其他部分则会忽略。原来这个字段叫url,已废弃
    • method 请求的方法,get/post等等,默认get
    • status 请求的响应状态,默认200
    • delay 请求响应的延迟
    • contentType Content-Type响应头,默认application/json
    • header 其他响应头的配置
    • jsonp 该模拟是个jsonp。这个字段跟jQuery的jQuery.ajax([settings])中的设置字段jsonp是一个意思,默认的回调函数名字是callback, 即加在请求url后面的callback=?。如果该字段值设为true,则用默认的callback;如果设为一个具体的值(string类型),比如jsonpCallback, 则加在请求url后面的变为jsonpCallback=?
    • response 响应内容。可以是字符串,对象,函数,其中函数的入参是req、res(express的中间件的入参),函数中可以自己响应结束请求,或者返回一个响应对象。

    如果值是路径,则路径的文件为一export出mock数据,实例文件如下

    // /dir/mock.js
    // 可以export一数组,或者直接一对象
    module.exports = [{
      path: '/mock',
      method: 'post',
      response: function(req, res) {
          return {
              result: true
          }
      }
    }]

    proxy

    proxy 字段配置反向代理,也是一数组,数组每个对象表示一个反向代理的配置。该配置有一个规则:即,实际访问的路径除去配置中的path后的路径,会添加到target后面,成为代理请求的路径。 这样说可能不清楚,举个例子:

    {
      path: '/proxy',
      target: 'http://localhost:3000'
    }

    以上是其中一个配置,则:

    1. 只要匹配以/proxy开头, 都会反向代理请求,比如/proxy, /proxy/, /proxy/w/r?p=1等等
    2. 当访问/proxy/w?a=1的时候,代理请求的地址是http://localhost:3000/w?a=1

    下面是可配置字段的说明

    • path 表示需要反向代理的请求path
    • target 表示代理的目标地址
    • host 自定义请求target时请求头中的host字段,默认是target代表的host

    CHANGELOG

    License

    MIT

    Install

    npm i ftl-server

    DownloadsWeekly Downloads

    24

    Version

    1.1.25

    License

    MIT

    Unpacked Size

    2.74 MB

    Total Files

    34

    Last publish

    Collaborators

    • szmtcjm
    • xmllein