bb

br-bid

百融-前端开发工具

Showing:

Popularity

Downloads/wk

53

Maintenance

No Maintenance Data Available

Package

Dependencies

69

Size (min+gzip)

1869.8KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

百融金服-前端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 工程名称):

  • "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 base64bid 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_rsaid_rsa.pub
    
    # 把【主机本地】上的id_rsa.pub文件拷贝到【线上主机】的该用户主目录下的.ssh目录下,并且改名为authorized_keys
    
    # 使用命令:
        scp 文件名 用户名@服务器:远端路径 进行拷贝
    

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial