node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

br-bid

百融金服-前端FED工具

br-fedtools

  • web开发工程化工具
  • dev 启动本地服务器
  • build 打包工程目录src/p中所有index.js文件 到 build目录中

安装及初始化工程

  • step.1 确保本机已经正常安装了NodeJS,以及npm可以正常使用。

    • 检测方法:请在bash下,输入

        node -v && npm -v  // 返回两个版本号即为安装正常
        
        例:
        bogon:br-fedtools leo.yy$ node -v && npm -v
        v4.4.4
        2.15.1
        node环境正常
      
    • 安装方法请见:NodeJS官网

  • step.2 全局安装

    • sudo npm install br-bid -g
    • sudo npm install gulp
  • step.3 创建新建工程目录并进入 mkdir project1 && cd project1

  • step.4 使用bid命令初始化工程 bid init

    • 如果安装依赖时出现问题,请使用 bid update命令重新安装。update命令具体使用方法请看下文。

开发调试

  • 启动本地开发环境: bid dev

  • 注意:一定要在项目工程目录下启动开发调试命令,否则将不能正确解析提取资源文件

编译打包

  • 本地编译打包: bid build -l (默认)

  • 云编译打包: 后续开发... bid build (暂时不可用)

  • 注意:使用打包功能前,请确认您已经全局安装了gulp模块: sudo npm install gulp -g

配置文件config.js(打包编译、js引用)

  • 示例说明:

    {
        "appName": "",
        "publish": {
            "daily": {
                "host": "192.168.180.10",
                "path": "/opt/www/build/"
            },
            "pre": {
                "host": "123.57.42.161",
                "path": "/opt/www/build/"
            },
            "online": [{
                "host": "101.201.199.232",
                "path": "/opt/www/build/"
            },{
                "host": "123.57.74.74",
                "path": "/opt/www/build/"
            }]
        },
        "remotes": "http://gitlab.100credit.cn/fed/xiaqiu.git",
        "version": "0.0.1",
        "cdnhost": "//cdn.shuquwangluo.cn",
        "publishAPI": "http://192.168.0.243:3000/api/awp/publishOnline.do",
        "alias": {
            "zepto": "webpack-zepto",
            "myslider": "@br/common/myslider",
            "myslider": "../../c/common/myslider"
        },
        "extract-common-to-path": "./src/p/library.min.js",
        "noParse": ['./src/p/index/index.js']
    }
    
  • "remotes" (git版本库地址):

    • 说明:
      • 发布时脚本需要拉取当前git仓库及相应分支,使用远端脚本发布必填字段。
  • "version" (string 版本号):

    • 说明:

      • 前端工程推荐采用git分支开发,开发分支命名规则为:daily/x.y.z

      • 约定 version 值为当前开发分支的分支号x.y.z

      • 约定HTML页面js入口资源引入方式:

          <script type="text/javascript" src="./@version/index.js"></script>
        
      • @version将会在进行bid build后,被替换为version字段;js打包路径/build/src/p/js入口文件名/@version/index.js的@version也同时会被替换为版本号。

      • 根据分支号设置路径,主要目的是便于发布后对代码进行管理、引用、回滚等操作。

    • 注意:每次启动bid dev时,如果当前处于daily/x.y.z分支,且config.json的version字段与当前分支号不一致,config.json的version字段将被自动替换为当前分支号。

  • "cdnhost" (前端js静态资源cdn域名):

    • 说明:
      • 用于在发布时,使用线上cdn地址,替换html中形如<script type="text/javascript" src="@cdnhost/src/p/feedback/@version/index.js"></script>的文件引用。
      • 替换规则:
        • 形如@cdnhost/src/p/feedback/@version/index.js将会被替换为//cdn.shuquwangluo.cn/xiaqiu/src/p/about/0.2.1/index.js
        • cdnhost将会替换@cdnhost
        • version将会替换cdnhost + appName +
        • 以上示例地址@cdnhost/src/p/feedback/@version/index.js将做如下转换:@cdnhost + appName + /src/p/feedback/ + version + /index.js
  • "publishAPI"(发布后台接口地址)

    • 说明:
      • 发布后台接口接收bid deploy命令生成出来的build.json,并根据build.json进行发布
      • 发布流程
        • api接收build.json并将其存储至本地$BuildJSONPath(存储后的路径)位置(作为shell读取配置之用)
        • 调用服务端shell脚本并传递生成的build.json路径$BuildJSONPath
        • shell根据build.json中的remoteversion检出相应git分支,并执行bid update更新依赖
        • 执行gulp deploy --entry $BuildJSONPath --env $BuildJSONPath.env进行构建
        • 同时shell将构建日志输出至指定文件中
        • 构建完毕后,根据build.json中的env及publish配置执行发布
  • "alias" (object):

    • 别名,通过别名约定,可以使我们在业务代码中直接require([key])引用js模块。

      ----- key[JS模块别名] value[模块npm名称 或 模块在项目中的地址]
      node模块别名 "zepto" "webpack-zepto"
      约定common模块别名(src/c/common) "myslider" "@br/common/myslider"
      上例等同于: "myslider" "../../c/common/myslider"
    • 通过别名的定义,我们可以在业务代码中直接使用require([别名])引用js模块

           var myslider = require("@br/common/myslider");
           // 等同于 var myslider = require("../../c/common/myslider");
           var $ = require("zepto");
      
  • "extract-common-to-path"(String,相对通用js打包输出路径)

    • 字段说明:是否需要提取全部的公共js模块

      示例 说明
      "extract-common-to-path":false 不对通用的js模块进行提取及单独打包
      "extract-common-to-path":"./src/p/library.min.js" 将通用的js模块提取并打包至/build/src/p/library.min.js文件
  • "noParse"(String或Array,不检查配置路径所指向js的依赖)

    • 字段说明:如果你确定一个模块中没有其它新的依赖就可以配置这项,webpack 将不再扫描这个文件中的依赖

      示例 说明
      "noParse":"./src/p/library.min.js" 不检查配置路径所指向js的依赖
      "extract-common-to-path":["./src/p/library.min.js","./src/p/lib.min.js"] 忽略检查"./src/p/library.min.js"和"./src/p/lib.min.js"的依赖
  • "appName" (string 工程名称):

    • 说明:
      • 项目名称将决定日常、预发及线上部署时的部署路径;
        • 日常地址:http://dym.100credit.com/工程名称/src/p/demo/index.html
        • 预发地址:http://pre.100credit.com/工程名称/src/p/demo/index.html
        • 线上地址:http://m.100credit.com/工程名称/src/p/demo/index.html
      • 进行日常发布时,请配置正确appName
  • "publish" (object 发布相关配置项)

    • "daily" (array 数组,其中每个元素为对象)

      • "host" (string 日常服务器Host(域名或IP地址)):

        • 说明:
          • 进行日常发布时,请配置正确信息
          • 错误的daily.host将导致日常发布失败
      • "path" (string 日常服务器发布路径):

        • 说明:
          • 默认为'/opt/www/build/',一般情况下无需修改此配置
          • 进行日常发布时,请配置正确path
    • "pre" (array 数组,其中每个元素为对象)

      • "host" (string 预发服务器Host(域名或IP地址)):

        • 说明:
          • 进行日常发布时,请配置正确信息
          • 错误的daily.host将导致日常发布失败
      • "path" (string 日常服务器发布路径):

        • 说明:
          • 默认为'/opt/www/build/',一般情况下无需修改此配置
          • 进行日常发布时,请配置正确path
    • "online" (array 数组,其中每个元素为对象)

      • "host" (string 线上服务器Host(域名或IP地址)):

        • 说明:
          • 进行线上发布时,请配置正确的信息
          • 错误的online.host将导致线上发布失败
      • "path" (string 日常服务器发布路径):

        • 说明:
          • 默认为'/opt/www/build/',一般情况下无需修改此配置
          • 进行线上发布时,请配置正确的online.path

bid命令详解

----- 命令 参数 描述
项目初始化 bid init 在当前目录下,生成初始普通工程目录文件 及 完成相关依赖安装
.. -r|--react 在当前目录下,生成初始react+redux工程目录文件 及 完成相关依赖安装
依赖更新 bid update 更新当前工程中相关依赖node_module(当build出现依赖问题时,可尝试对依赖进行更新后重试)
.. -q|--quiet(可选) (开启安静模式进行升级)
.. -f|--force(可选) (对全局bid工具的依赖模块进行强制更新安装,用以解决bid依赖版本过低或安装不全的问题)
开发调试 bid dev 启动本地开发环境(默认端口号3333)
bid dev -p [端口号] | --port [端口号] 以指定[端口号]启动本地开发环境
.. -q|--quiet(可选) (开启安静模式进行本地开发,只会显示webpack警告和错误)
项目打包 bid build 进行本地编译打包
.. -d|--publishdaily (可选)进行编译打包并上传至【日常】服务器
.. -p|--publishpre (可选)进行编译打包并上传至【预发】阿里云服务器
.. -o|--publishonline (可选)进行编译打包并上传至【线上】阿里云服务器
.. -a|--buildall(可选) 对全部src/p/xxx.html进行构建)
.. -q|--quiet(可选) 开启安静模式
iconfont ttf base64 bid iconfont -i|--input 对指定文件中的iconfont ttf进行base64转换
.. -o|--output (可选) 将转换后的内容输出值output文件(若没有指定output则替换原有input文件)
.. 相关示例 bid iconfont -i src/c/less/iconfont.less -o src/c/less/iconfont.less
  • 进行日常构建发布时,会自动在项目根目录生成build.json文件

说明

  • 全部nodejs依赖均通过本模块的node_module进行加载。

  • 目前集成了zepto、underscore,可手动require进行加载:

    • var $ = require('zepto');
    • var _ = require('underscore');
  • 目前入口JS文件命名规则及路径必须约定为:/src/p/**/index.js

  • 为了确保线上多台机器同时发布,请预先将本机的密钥复制并命名为线上服务器相应用户的 ~/.ssh/authorized_keys文件

      # 【本地本地】运行:
          ssh-keygen -t rsa
      
      # 结果如下
          Generating public/private rsa key pair.
          Enter file in which to save the key (/home/.username/ssh/id_rsa):#回车
          Enter passphrase (empty for no passphrase):#回车
          Enter same passphrase again:#回车
          Your identification has been saved in /home/.username /.ssh/id_rsa.
          Your public key has been saved in /home/.username /.ssh/id_rsa.pub.
          The key fingerprint is:
          38:25:c1:4d:5d:d3:89:bb:46:67:bf:52:af:c3:17:0c username@localhost
          Generating RSA keys:
          Key generation complete.
    
      # 会在用户目录~/.ssh/产生两个文件,id_rsa,id_rsa.pub
    
      # 把【主机本地】上的id_rsa.pub文件拷贝到【线上主机】的该用户主目录下的.ssh目录下,并且改名为authorized_keys
    
      # 使用命令:
          scp 文件名 用户名@服务器:远端路径 进行拷贝
    

已经支持React,推荐使用React+Redux进行开发。