项目构建工具saga-cli、Dawn、feflow-cli、ideploy介绍

以下为你介绍的项目构建工具都可用在Linux系统上:saga-cli(快速生成 React Redux-saga 项目)、Dawn(前端构建和工程化工具)、feflow-cli(改进前端工作流程的命令行工具)、ideploy(简单易用的持续交付平台)。

1、saga-cli(快速生成 React Redux-saga 项目)

Saga-Cli用于快速创建React Saga项目。

安装命令:

npm install -g saga-cli

开始:

直接开始:初始化一个纯净的项目(只有核心代码、推荐大神使用):

saga-cli init TestProject

或者:

(推荐) 初始化一个带默认示例的业务项目(saga、router、bundle都集成了):

saga-cli demo TestProject

查看帮助:

saga-cli --help

例子:

随便进入到一个目录:

$ saga-cli init SagaTest

执行完成后:

$ cd SagaTest

$ npm install

启动项目:

$ npm run dev      //开发环境

或者:

$ npm run build    //用于生产环境代码打包

saga-cli 默认模板项目:

项目集成:

//webpack

npm install --save-dev webpack

npm install --save-dev webpack-dev-server

//react 

npm install --save react react-dom

//router v4版本

npm install --save react-router react-router-dom

//redux

npm install --save redux react-redux redux-saga

//babel

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-0 babel-preset-stage-3

项目结构:

项目构建工具saga-cli、Dawn、feflow-cli、ideploy介绍

说明:

部分代码说明。

1]、初始化saga:

/**

* 我封装的常用工具方法

* 1 axios封装的fetch

*/

import wish from 'src/common/wish';

/**

* 我封装的SagaCore模块

* 1 创建Store

* 2 创建Saga

* 3 内置默认reducer信息

*/

import SagaCore from 'src/saga/core';

/**

* 接口url和action type的映射关系模块

*/

import urls from 'src/common/api/index';

/**

* 所有模块的reducer

*/

import AppReducer from 'src/router/reducer';

import HomeReducer from 'src/router/home/reducer';

const reducer={

app:AppReducer,

home:HomeReducer

}

wish.bindUrls(urls);

wish.create();

//通过SagaCore模块直接生成Store

var Store=SagaCore.init(reducer,function(action={data:{}}){

return wish.fetch({name:action.type,...action.data},action.method).then((res)=>res);

})

2]、新增reducer:

在main.jsx中直接引入,如:

import AppReducer from 'src/router/reducer';

import HomeReducer from 'src/router/home/reducer';

+import UserReducer from '...'

const reducer={

app:AppReducer,

home:HomeReducer,

+ user:UserReducer

}

3]、按需加载:

/**

* 加载模块的根业务组件

*/

import HomeContainer from 'bundle-loader?lazy!src/router/home/index';

import AboutContainer from 'bundle-loader?lazy!src/router/about/index';

/**

* Bundle加载业务组件

* @Author   WangBing

* @DateTime 2017-11-24

* @param    {[type]}   props [description]

* @returns  {[type]}         [description]

*/

const RouterHome=(props)=>{

return <Bundle load={HomeContainer}>

{(Container) => <Container {...props}/>}

</Bundle>

}

const RouterAbout=(props)=>{

return <Bundle load={AboutContainer}>

{(Container) => <Container {...props}/>}

</Bundle>

}

/**

* 按照正常路由配置、配置组件

* @Author   WangBing

* @DateTime 2017-11-24

* @returns  {[type]}   [description]

*/

export default () => {

return <Switch>

<Route exact path="/"  component={RouterHome}/>

<Route path="/home"  component={RouterHome} />

<Route path="/about"   component={RouterAbout} />

</Switch>

}

下载地址:https://gitee.com/daoxiaozhang/saga-cli

2、Dawn(前端构建和工程化工具)

Dawn 取「黎明、破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源。它通过 pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作,简化并统一了开发人员的日常构建与开发相关的工作。

特点:

采用中间件技术,封装常用功能,易于扩展,方便重用。

支持 pipeline 让多个 task 协同完成构建任务。

简单、一致的命令行接口,易于开发人员使用。

支持基于「中心服务」管理中件间和工程模板。

支持搭建私有中心服务,并统一下发构建规则,易于团队统一管理。

安装或更新 Dawn:

$ [sudo] npm install dawn -g

使用:

# 1. 创建 & 初始化

$ dn init -t front

# 2. 开发 & 实时编译

$ dn dev

# 3. 语法检查 & 测试

$ dn test

# 4. 构建 & 打包

$ dn build

示例(.dawn.yml 或 .dawn 目录):

# 启动开发服务

dev:

- name: webpack

entry: ./src/*.js

template: ./assets/*.html

watch: true

- name: server

port: 8001 

# 直接构建

buid:

- name: webpack

entry: ./src/*.js

template: ./assets/*.html

执行自定义任务:

init/dev/build/test/publish 这几个命令可以直接作为「子命令」写在 dn 后边,对于其它名称的 pipeline 需要使用 run 命令。

编辑 .dawn/pipe.yml 或 .dawn.yml:

demo:

- name: shell

script:

- echo demo

可以通过如下方法执行 demo:

dn run demo

下载地址:https://gitee.com/mirrors/Dawn

3、feflow-cli(改进前端工作流程的命令行工具)

项目构建工具saga-cli、Dawn、feflow-cli、ideploy介绍

feflow-cli 是一个旨在改进前端工程师工作流程的命令行工具,基于 Node.js。是腾讯NOW直播IVWEB团队工程化解决方案。

具有以下特性:

强大的插件系统,易于扩展。

与 Yeoman 集成,易于初始化基于 yeoman 生成器的项目。

定义一系列标准,包括提交标准和 ESlint 标准。

CLI的内核和插件层分离,当和最新版本不兼容时会采取全量更新和增量更新策略。

安装:

$ npm install feflow-cli -g

使用:

# 初始化项目

$ feflow init

# 本地开发

$ feflow dev

# 代码质量检查

$ feflow lint

# 打包构建

$ feflow build

下载地址:https://gitee.com/IVWEB/feflow-cli

4、ideploy(简单易用的持续交付平台)

ideploy 是为前端团队构建部署工程化而开发的一个持续交付平台。我们根据团队人员,项目增长而面临的越来越多在构建,交付等日常工作中的痛点,设计了很多特有而简单易用的功能,节省了团队很多构建部署的协调和 copy 体力工作,极大的提升了团队的开发效率。随着功能的完善,觉得这个系统可以帮助很多类似我们这样成长中的前端团队(当然系统其实也是支持 java、php 等项目的部署的,通过插件编写也可以支持 go 甚至更多语言的构建部署)实现快速构建,快速部署,放心上线。

技术栈:

开发语言:nodejs

数据库:mysql

后端框架:thinkjs

前端js框架:react

前端ui框架:ant.design

快速启动 (只支持 linux ):

1]、git clone xxxxx.git 代码到本地。

2]、安装nodejs 依赖:在根目录下运行npm install。

3]、安装ansible (依赖ansible做部署前后的命令行执行)。

4]、安装mysql 数据库,这里就不展开讲了。

5]、新建一个数据库(名字自己取一个就行,比如fe_build),并且开放足够的访问权限。

6]、代码,通知邮件等访问权限配置:

由于构建部署系统需要从代码仓库(svn,git)拉取代码,所以需要首先配置svn仓库用户名和密码。

打开src/common/config/config.js,分别填写各项配置,具体如下:

export default {

cvsUser: 'myuser',//svn用户名

cvsPass: 'mypass',//svn密码

emailHost: 'smtp.qq.com',//通知邮箱地址,这里用qq邮箱作为参考

emailport: 465,//端口

emailUser: '3333@qq.com',//邮箱账号

emailPass: 'xxxxx',//邮箱授权码(具体可以登录mail.qq.com->设置->账户->POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务->生成授权码获取)

cvsDir: '/temp',//svn代码临时保存目录

port: 80 //服务器端口,就是部署平台的web服务端口

}

如果是git项目请保证部署机器能直接有访问git的权限。

7]、代码编译,启动:

输入命令以下命令进行编译:

npm run build

编译完成,运行以下名命令启动:

npm run start

也可以用forever或者pm2来管理服务,以forever为例:

npm install -g forever

项目内置了forever的启动和停止脚本:

./start.sh

./stop.sh

服务器起来以后,我们直接访问http://localhost。

页面自动跳到登录注册页面,说明启动成功:

项目构建工具saga-cli、Dawn、feflow-cli、ideploy介绍

导入数据库脚本,生成数据库基础表结构 这一步主要是为系统运行创建需要的数据库表,为了方便大家使用,项目提供了一个web程序来建立表结构,直接输入:

http://localhost/install

会出现如下界面,点击‘确定导入数据库表’生成数据库:

项目构建工具saga-cli、Dawn、feflow-cli、ideploy介绍

当然,也可以通过mysql 直接倒入数据库表结构文件,数据库表文件是db/db.sql。

下载地址:https://gitee.com/luyongfugx/ideploy

注明

以上就是项目构建工具saga-cli、Dawn、feflow-cli、ideploy的介绍内容,这些项目构建工具都能使用在Linux操作系统中。

栏目相关文章