企业级前端应用开发平台：EDP、edp webserver、EDP Build

什么是EDP？

EDP是一个基于Node.JS与NPM的企业级前端应用的开发平台，主要通过命令行的方式使用。EDP提供了前端应用开发时常用的一系列工具：项目管理、包管理、调试、构建、代码生成以及代码检测等。（edp和FIS为百度开源前端构建工具）

EDP允许用户自定义自己的扩展。当默认提供的工具无法完全满足开发的需求时，用户可以开发自己的扩展命令。

• 下载地址
• Package的查找、导入与更新
• 项目管理
• 单元测试
• 对前端代码进行静态检测
• 使用WebServer进行调试
• 扩展自己的EDP命令
• 诊断工具

关于EDP更多详情， https://github.com/ecomfe/edp/wiki/Install

EDP是一个企业级前端应用的开发平台，提供了常用的项目管理工具、包管理工具、调试工具、构建工具、代码生成工具、代码检测工具等一系列开发时的支持，并允许用户自定义自己的扩展。

安装与更新

edp已经发布到npm上，可以通过下面的npm命令安装。-g选项是必须选项，使用-g全局安装后，可以获得command line的edp命令。在Linux/Mac平台下，全局安装可能需要sudo。

$ [sudo] npm install -g edp

如果想要升级当前edp的版本，请运行如下命令。在Linux/Mac平台下，升级可能需要sudo。

$ [sudo] npm update -g edp

准备

在使用之前，您需要先配置下个人的名字和邮箱。方法如下：(请替换掉[]部分)

$ edp config user.name [your_name]"user.name" is setted.$ edp config user.email [[e-mail]]"user.email" is setted.

使用

我们推荐通过命令行的方式使用edp。直接命令行下执行edp将显示可以调用的命令，包含内建命令和用户定制的命令。

$ edpUsage: edp <command> [<args>] [<options>]Builtin Commands:addhtml         添加html文件addjs           添加javascript文件beautify        格式化JS、CSS和JSON文件build           构建目录或项目config          读取和设置edp用户配置csslint         使用csslint检测当前目录下所有CSS文件extension       扩展管理相关功能help            显示帮助信息htmlhint        使用htmllint检测当前目录下所有HTML文件import          导入包jshint          使用jshint检测当前目录下所有Javascript文件minify          使用minify命令来让js、css、json文件获得最小化的输出project         项目管理相关功能search          查询现有的包update          更新依赖包webserver(ws)   用于开发时调试的WebServerUser Commands:riaprojectSee "edp help <command>" for more information.

--version将显示当前EDP的版本号。

$ edp --versionedp version 0.6.0

命令手册

在命令行下，我们可以通过edp help <command>查看命令的帮助信息。也可以通过下面的链接查看命令帮助：

• addhtml
• addjs
• beautify
• build
• config
• csslint
• extension
• help
• import
• jshint
• minify
• project
• search
• update
• watch
• webserver

EDP 扩展 edpx-zhixin

edpx-zhixin 是 edp 的一个扩展，提供给百度的FE开发搜索结果页模板的工具

启动edpx-zhixin

通过下面的命令，将根据默认的配置文件edpx-zhixin-config.js，启动edpx-zhixin，edpx-zhixin会在当前目录查找配置文件，如果没找到，会一直向上级目录查找，找到为止。在默认情况下，edpx-zhixin会使用8848作为默认端口，并且将当前目录作为 documentRoot

$ edp zhixin start10:45:21 [INFO] monitor -> /Users/sekiyika/Documents/work/src10:45:21 all plugins have been loaded.edp INFO EDP WebServer start, http://192.168.1.106:8848edp INFO root = [/Users/sekiyika/Documents/work/src/], listen = [8848]

指定配置文件

通过--config参数，可以指定edpx-zhixin的配置文件

$ edp zhixin start --config=src/edpx-zhixin-config.js10:52:26 [INFO] monitor -> /Users/sekiyika/Documents/work/src10:52:26 all plugins have been loaded.edp INFO EDP WebServer start, http://192.168.1.106:8848edp INFO root = [/Users/sekiyika/Documents/work/src/], listen = [8848]

目录结构

edpx-zhixin要求开发者遵循目录规范，如下：

edpx-zhixin-config.jssrc    page        ecl_ec_weigou            config.js            _page.tpl            page.tpl            page.html            data.json            ...

配置edpx-zhixin

运行edp zhixin start时，需要edpx-zhixin-config.js文件，下面是构成edpx-zhixin-config.js的默认配置

/** * @file edpx-zhixin-config.js *//** * edpx-zhixin的配置 */exports.server = {    documentRoot: './', // documentRoot以配置文件所在的目录来计算绝对路径，默认为process.cwd()    port: 8848 // edpx-zhixin的启动端口，默认为8848};/** * 用来配置开发环境依赖的结果页机器地址，可以配置线下机器 * 默认hostname是www.baidu.com，port为80 */exports.proxy = {    hostname: 'www.baidu.com',    port: 80};/** * 如果网页中有同名模板，默认干掉同名模板 */exports.removeSameTpl = true;/** * wise相关的host *///exports.proxy = {//    hostname: 'm.baidu.com',//    port: 80//};/** * 指定php可执行的路径 * @type {string} */exports.php = 'php'; // 指定渲染模板使用的php路径，如果path中有，写php即可/** * 指定依赖的base文件，默认会使用edpx-zhixin中自带的c_base.tpl和c_right_base.tpl文件 */exports.base = {    left: 'c_base.tpl',    right: 'c_right_base.tpl'};/** * wise相关的base文件 */// exports.base = 'wise';

开发模板

从新建模板到release，都提供了相应的命令和工具

edp zhixin init

在行业目录下运行edp zhixin init ecl_fn_demo，如下：

$ edp zhixin init ecl_fn_demo>> Do you really want to init `ecl_fn_demo` project in `/Users/sekiyika/Documents/work/src/finance` ?(y/n)y>> There is a exist project, cover it ?(y/n)yedp INFO >> `/Users/sekiyika/Documents/work/src/finance/page/ecl_fn_demo` create success....edp INFO >> `/Users/sekiyika/Documents/work/src/finance/page/ecl_fn_demo/config.js` create success.

这样就构建好了一个模板开发所需的基本文件

edp zhixin initwise

创建wise相关的模板命令:

edp zhixin initwise [--root|-r] [--platform|-p] [--data|-d]

目前支持的wise平台为 iphone,utouch,big，在访问的时候url后缀添加

&tn=iphone、&tn=utouch、&tn=big， 切换到相应的平台

例如：

http://m.baidu.com/s?word=%E7%94%B7%E7%A7%91%E5%8C%BB%E9%99%A2&sa=tb&st=111041&tn=utouch

会调用utouch版本的模板

使用 utpl 支持模板编写

集成utpl的模板功能，在_page.tpl中引入后，自动编译成相关的函数使用， utpl语法同underscore.js的模板语法类似，请参考underscore 获取更多信息

例如：

_page.tpl 内容：

{%*include file="./ajax-list.utpl"*%}

注：形如：ajax-list.utpl会被编译成ajaxListRender函数，可以在js中直接调用

ajax-list.utpl 内容：

/*utpl:innerFn=false,trim=false*/<!--列表项目--><ul>    {%each(tplData.list, function(item, index){%}        <li><a href="{%=item.link%}">{%-item.title%}</a></li>    {%});%}</ul><!--记录数-->{%len = tplData.list.length%}{%if (len!==0) {%}    {%=len%}条记录{%}%}

其中

/*utpl:innerFn=false,strip=false*/

为编译选项：

1. innerFn=false，表示each,escape等函数不会在模板中内置，需要外部提供

2. strip=false，表示不会自动去除空格、注释

config.js

config.js是每个模板目录下都需要的一个配置文件，主要包含和该模板相关的配置

exports.config = {    tpl: 'ecl_fn_demo', // 模板名    querys: [        'iphone',  // 命中该模板时的query，不指定data会默认使用data.json文件作为数据文件        {            query: '游戏',            data: 'data.json' // 指定渲染所需要使用的数据文件        }    ],    side: 'left', // 模渲染的位置，有left和right的取值    platform: ['ipad', 'pc'], // 该模板适用于ipad或者pc，根据url中的dsp参数来区分，可以为platform: 'pc'    //platform: ['iphone', 'utouch', 'big'], //wise相关的platform，根据url中的tn参数来区分，tn=utouch，会切换到简版模板    ajaxs: [ // 代理请求的数据，常用于代理/ecomui的请求        {            url: /a.js/,            file: 'a_1.js', // file和handler是互斥的关系，handler优先级更高            handler: function(request) {                return fs.readFileSync('data.json')            }        }    ],    //build: 'release', // 缺省相当于 edp zhixin build，加上相当于 edp zhixin release （下文提及）    watch: { // 监控源文件的变化并编译产出page.tpl文件        filters: [            '_page.tpl',            '*.less'        ],        events: [            'addedFiles',            'modifiedFiles'        ]    }};

edp zhixin start

edpx-zhixin启动时，会查找documentRoot目录下的所有config.js文件，然后根据config.js文件建立query到模板之间的索引

启动之后，可以通过http://127.0.0.1:8848访问

注意：在这里推荐配一个host，搜索结果页大部分静态文件都做了referrer过滤，非百度域可能会遇到403 forbidden，导致文件加载失败

edp zhixin build

build可以让用户手动编译生成page.tpl文件，代码不压缩

edp zhixin release

开发完成模板之后，需要发布压缩后的代码，release比build多做了一步就是编译压缩

项目配置 + tomcat使用/edp webserver

Q:如何知道端口号是多少呢？ 如何知道端口号后代表的相对路径是什么呢？

A:tomcat 的conf 里有一个server.xml;

  <Service name="lxb">      <Connector port="7018" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />      <Connector port="8029" protocol="AJP/1.3" redirectPort="8443" />      <Engine name="lxb" defaultHost="localhost">          <Realm className="org.apache.catalina.realm.UserDatabaseRealm"              resourceName="UserDatabase"/>          <Host name="localhost"  appBase=""              unpackWARs="true" autoDeploy="true"              xmlValidation="false" xmlNamespaceAware="false">              <Context path="" docBase="D:/code/yingxiao/yingxiao-zhichi" reloadable="true"/>          </Host>      </Engine>  </Service>

端口号7018在这里配置，

docBase就是本地浏览器中的 http://localhost:7018/

D:/code/yingxiao/yingxiao-zhichi中有webcontent，web-info文件夹

web-info中有channel.xml来配置 http://localhost:7018/index <——> webContent/web/index.vm的路径

tcom里的主模板里 有一句 

#set($webRoot=$!link.getContextPath())

这个是在tomcat中的conf/servel.xml 的配置。即

<Context path="" docBase="D:/code/yingxiao/yingxiao-zhichi" reloadable="true"/>

前端配置为空，但后端会在另外地方配置。

——————————————————————

如果想再开一个项目，得换一个端口号，并把加粗的地方更改下就ok了。

-------------------------------------

edp webserver用法

在要建立新端口的文件夹下运行cmd，输入命令  edp webserver start

会生成一个端口，如edp INFO root = [D:\bridgecode\oldcluster\front\site], listen = [8848] 为8848端口

要把此窗口一值开着，才可以打开本地环境

-----------------------------------------------------------------------------