Noodles, Poodles and More!
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

br-bid

1.2.30 • Public • Published

百融金服-前端FED工具

br-fedtools

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

安装及初始化工程

  • 依赖及模块安装
    1. 确保本机已经正常安装了NodeJS,以及npm可以正常使用。
    2. 全局安装bid工具及构建依赖
      • sudo npm install br-bid -g
      • **sudo npm install gulp webpack -g **
  • 初始化工程
    1. 创建并进入新的工程目录 **mkdir myNewProject && cd myNewProject **
    2. 使用bid命令初始化工程目录 bid init
      • bid init会自动在为当前目录安装相关依赖,如果安装依赖时出现问题,请移除工程目录下的node_modules文件夹,并使用bid update命令手动进行安装。update命令具体使用方法请看下文。

开发调试

  • 启动本地开发环境: bid dev [-p 端口号]]

    • 注意:请在项目工程目录下启动开发调试命令
    • 默认端口号:3333,请使用http://127.0.0.1:3333启动页面
  • 目录结构约定

    • 注意:入口js和html文件,请存放至/src/p目录中,并使用index.js和index.html文件进行命名,否则将会影响发布构建
    /                   // 工程根目录
    ../deploy           // 构建文件存放目录
    ../node_modules     // 依赖模块目录
    ../src              // 开发目录
    ../src/c            // component组件存放目录
    ../src/p            // page页面目录
    ./config.json       // 构建配置文件(手动生成,自动更新version)
    ./build.json        // 云端发布配置文件(自动生成)
    ./gulpfile.js       // 构建gulp配置文件
    ./.gitignore        // git忽略文件
    ./.jshintrc         // lint代码检测配置文件
    

编译打包及发布

  • 远程发布: bid deploy
    1. 选择发布环境 [日常、预发、线上]
    2. 选择目标服务器组(日常1、2、3套、预发多套、线上服务器组)
    3. 输入awp前端发布系统的账号及密码
    4. 选择要发布的页面
  • 本地构建:bid deploy
    1. 选择发布环境 [本地构建]
    2. 选择构建方式 [日常方式、线上方式、Tag方式]
    3. 选择需要构建的页面
  • 构建方式介绍
    • 日常方式
      • 描述:[日常、预发]发布均采用此种构建方式。构建后,html及js文件夹同属一级目录存放,html通过相对路径来引用js文件,css将内联至html文件中。
    • 线上方式
      • 描述:[线上]发布采用此种构建方式。只构建html及css文件,html通过百融CDN路径来引用js文件(自动替换),css将内联至html文件中。
    • Tag方式
      • 描述:当gitlab中的前端项目收到git tag push请求时,会触发tag发布。tag方式构建,将会分别对html及js文件进行全量构建,并分别上传:html文件将发布至预发服务器,js文件将会发布至CDN源站。html通过百融CDN路径来引用js文件(自动替换),css将内联至html文件中。
  • 注意:
    1. 使用打包功能前,请确认您已经全局安装了gulp及webpack模块 sudo npm install webpack gulp -g
    2. 如果要使用远程发布,需要您可以访问到awp前端发布系统,否则请使用本地构建

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

  • 示例说明:

    {
        "appName": "fedceshi",
        "remotes": "http://gitlab.100credit.cn/fed/fedceshi.git",
        "version": "0.0.1",
        "cdnhost": "//cdn.fedceshi.com",
        "websiteHost": "//m.fedceshi.cn",
        "alias": {
            "zepto": "webpack-zepto",
            "myslider": "@br/common/myslider",
            "myslider": "../../c/common/myslider"
        },
        "noParse": ['./src/p/index/index.js'],
        "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/"
            }]
        }
    }
    
  • "appName" (string 工程名称):

    • 说明: 工程名称将决定日常、预发及线上部署时的部署路径;
  • "remotes" (git仓库地址):

    • 说明: Git仓库地址;若要使用远程发布,则必需填写该字段;
  • "version" (string 版本号):

    • 说明: Git开发分支号(可由bid工具根据当前所处分支自动获取)

    • 关于Git版本号的约定:

      • 为了便于发布、回滚及代码管理,推荐采用Git分支开发,开发分支命名规则约定如下:

        • $env/x.y.z*
        • $env: daily日常环境、pre预发环境、production线上环境
        • x.y.z: 大版本号.小分支号.bugFix版本号
      • 约定 version 值为当前开发分支的分支号x.y.z;

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

            <script type="text/javascript" src="@cdnhost/src/p/index/@version/index.js"></script>
        
      • 构建时将会根据不同的构建方式(日常、线上、Tag,),对script文件的src属性进行替换,关于构建方式的描述请参见上文;

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

    • 注意:每次启动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
  • "websiteHost"(线上域名)

    • 说明:
      • 在使用awp前端发布系统进行远程发布时,需要配置此项,用于在发布系统中关联此项目的线上地址
  • "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");
      
  • "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"的依赖
  • "publish" (object 发布相关配置项)

    • 此配置为旧版配置,当远端构建不可用时,仍可以使用该配置及bid build命令,在本地进行构建及上传,如果使用远端构建及发布,该配置可忽略

    • "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 在当前目录下,生成初始普通工程目录文件 及 完成相关依赖安装
bid init -r|--react 在当前目录下,生成初始react+redux工程目录文件 及 完成相关依赖安装
依赖更新 bid update 更新当前工程中相关依赖node_module(当构建出现依赖问题时,可尝试删除工程目录下的node_modules文件夹,并使用该命令,对依赖进行更新后再重试)
开发调试 bid dev 启动本地开发环境(默认端口号3333)
bid dev -p [端口号] | --port [端口号] 以指定[端口号]启动本地开发环境
bid dev -q|--quiet(可选) (开启安静模式进行本地开发,只会显示webpack警告和错误)
发布\构建(新) bid deploy (新版:云端构建发布)可选择日常、预发、线上环境的远程发布,或进行本地多种方式的打包构建操作
发布\构建(旧) bid build (旧版:本地构建发布)可选择日常、预发、线上环境的本地发布,并通过scp从本地进行上传发布
iconfont ttf base64 bid iconfont -i|--input 对指定文件中的iconfont ttf进行base64转换
bid iconfont -o|--output (可选) 将转换后的内容输出值output文件(若没有指定output则替换原有input文件)
bid iconfont 示例 bid iconfont -i src/c/less/iconfont.less -o src/c/less/iconfont.less
  • 进行日常构建发布时,会自动在项目根目录生成build.json文件

说明

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

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

  • 旧版bid build *为了确保线上多台机器同时发布,请预先将本机的密钥复制并命名为线上服务器相应用户的 ~/.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进行开发。

Keywords

install

npm i br-bid

Downloadsweekly downloads

267

version

1.2.30

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar