❤
npm
Sign UpSign In

br-bid

1.2.34 • 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进行开发。

Readme

Keywords

Package Sidebar

Install

npm i br-bid

Repository

github.com/Bairongs/br-fedtools

Homepage

github.com/Bairongs/br-fedtools#readme

Weekly Downloads

12

Version

1.2.34

License

ISC

Unpacked Size

193 kB

Total Files

51

Last publish

Collaborators

  • kelly_zj
  • yaya.com
  • spring.hehe.v5
  • dragonfly9977
  • bluelight598
  • hannahza
Try on RunKit
Report malware