fst
full stack typescript
Last updated 2 years ago by zxqian1991 .
ISC · Original npm · Tarball · package.json
$ cnpm install fst 
SYNC missed versions from official npm registry.

FST (full-stack-ts)

在日常的工作编程中,对于前端来讲,我们可能会面对一个个不同的项目,前端不同于其他的编程语言的一个地方就在于,前端的技术纷繁多样,呈现百家争鸣,百家争鸣极大的促进了前端的繁荣,但是却也带来了混乱的管理,层出不穷的框架、思想,令人眼花缭乱,就比如TS的出现极大的提高了前端代码的可控、可管理性。但是,我们几乎每写一个新的项目、新的小功能,可能都需要重新构建一套环境,这个环境是有很多的可选择性的,比如webpack/gulp/rollup,但是,其实不论哪种选择,我们的目标也就是那几样,打包、编译、压缩。这些工作其实都可以抽象出来作为功能模块使用的,而我不需要去关心具体的技术细节,也没必要关心。

目的

fst(full-stack-ts)的存在目的就是为了简化这个流程,通过命令行的方式去添加新的前后端的功能模块,通过可选的命令行选项去选择不同的工作模式。

使用

  1. 安装
npm install -g fst
  1. 初始化
fst init
// or
fst i
  1. 安装依赖
npm install 
  1. 新建项目
fst add modulename // 等同于 fst add modulename -fe
fst add modulename -f // 仅仅生成前端项目 
fst add modulename -e // 仅仅生成后端项目
fst a // 等同于fst add

add 命令会在对应的src目录中的frontend目录建立对应的项目,生成基本的文件,fst的配置文件是fst.config.js,它会在项目模块初始化的时候生成,你可以手动的指定src/dest/front/end的值。 每个新建的项目中也都有各自的fst.config.js/.babelrc/tsconfig.json,fst会自动的将他们和根项目中对应的文件合并。

  1. 构建项目
fst build modulename // 相当于 fst build modulename -fe
fst build modulename -f // 仅仅编译前端的项目
fst build modulename -e // 仅仅编译后端的项目
fst build modulename -w // 编译并监听项目,对于前端项目会自动编译、刷新,对于后端项目会自动编译
fst b // 等同于fst build
fst b -a //  编译`front目录下的所有的模块`
  1. 配置

对于编译,我们总是会有很多的自定义行为,这里我们主要就是对自定义行为来进行自定义,在说明之前,首先得介绍一下目录结构:

  1. 根目录

根目录下包含有以下的文件及目录

  • package.json npm package.json文件,记录相关的依赖等
  • fst.config.js fst的配置文件,它有对整个项目以及单个独立子项目的配置
  • tsconfig.json typescript的配置文件
  • .babelrc babel的配置文件
  • src 整体项目的源代码文件
  • dest 整体项目的打包后的地方

这些文件可以说是定义了一个大的方向,除了src,dest目录外,其余的文件本质上其实都是json对象,因此,fst为了提高项目的可配置性,在每个单独的项目里也都会使用以下的文件进行配置:

  • fst.config.js
  • tsconfig.json
  • .babelrc

使用的时候会和根目录下的配置进行合并(以小目录为准)。

fst.config.js

根目录下的fst.config.js

例子

module.exports = {
    "src": "src", // 定义了资源文件所在入口
    "dest": "dest", // 定义编译文件的存放地
    "front": "front", // 定义了前端代码的存放目录
    "end": "end", // 定义了后端代码的存放目录
    "transformers": {
        ".js": function(file) {

        }
    },
    "programs": { // 相当于每个小项目中的 fst.config.js 相当于一个整体的、全局的配置
        "test": {
            "front": {
                "tsconfig": {},
                "extractCss": true,
                "entry": [],
                "plugins": [],
                "uglify": {
                    "enable": true,
                    "option": {}
                },
                "html": {},
                "variable": {
                    "flags": {},
                    "constant": {}
                }
            },
            "end": {}
        }
    },
    // 记录性质的属性,实际开发用不到 这里记录了初始化的时候相关的文件
    "relativeFiles": [
        "/Users/qianzhixiang/union/fst/fst.config.js",
        "/Users/qianzhixiang/union/fst/package.json",
        "/Users/qianzhixiang/union/fst/tsconfig.json",
        "/Users/qianzhixiang/union/fst/.babelrc"
    ],
    // 记录性质的属性,实际开发用不到 这里记录了初始化的时候相关的目录
    "relativeDirectorys": [
        "/Users/qianzhixiang/union/fst/src/front",
        "/Users/qianzhixiang/union/fst/src/end",
        "/Users/qianzhixiang/union/fst/dest/front",
        "/Users/qianzhixiang/union/fst/dest/end",
        "/Users/qianzhixiang/union/fst/dest",
        "/Users/qianzhixiang/union/fst/src"
    ]
}

子项目中的fst.config.js

module.exports = {
    // webpack 或者 gulp等进行编译的时候的一些tsconfig的选项
    tsconfig: {

    },
    // entry表示的是前端编译时的入口文件
    // 最终会根据array的顺序嵌入到html中
    entry: [
        {
            src: "something",
            name: "something"
        }
    ],
    useBabel: boolean; // 是否使用babel编译(ts编译之后是否使用babel,默认使用)
    // webpack-dev-server的配置
    server: {
        enable: boolean,
        config: {
            port: number,
            host: string,
            //...
        }
    }
    // node的相关配置
    node: {
        
    },
    //压缩相关的配置
    uglify: {
        enable: boolean; // 默认false
        // 压缩配置
        compress: {

        }
    },
    // 是否抽离css
    extractCss: {
        enable: boolean,
    },
    // 静态文件拷贝
    copy: [
        {
            from: string,
            to: string
        }
    ],
    // html配置
    html: {
        template: string; // html的路径
        // other
    },
    // 编译后的js会自动加入到html,这里定义加入的模式
    script: {
        defaultAttribute: 'defer'
    },
    // 自定义的全局变量
    variable: {

    },
    // 出入webpack的配置并进行修改
    extend: function(config){

    }
}

根目录、子目录会进行合并

transformers

这是一个key-value形式的对象,key是后缀名,value是函数处理方法,函数的参数是vinly file格式。

通过这个方法能够做到在Copy的时候进行文本转换。

Current Tags

  • 1.2.999                                ...           latest (2 years ago)

34 Versions

  • 1.2.999                                ...           2 years ago
  • 1.2.998                                ...           2 years ago
  • 1.2.997                                ...           2 years ago
  • 1.2.996                                ...           2 years ago
  • 1.2.995                                ...           2 years ago
  • 1.2.994                                ...           2 years ago
  • 1.2.993                                ...           2 years ago
  • 1.2.991                                ...           2 years ago
  • 1.2.891                                ...           2 years ago
  • 1.2.89                                ...           2 years ago
  • 1.2.88                                ...           2 years ago
  • 1.2.87                                ...           2 years ago
  • 1.2.86                                ...           2 years ago
  • 1.2.85                                ...           2 years ago
  • 1.2.84                                ...           2 years ago
  • 1.2.83                                ...           2 years ago
  • 1.2.82                                ...           2 years ago
  • 1.2.814                                ...           2 years ago
  • 1.2.813                                ...           2 years ago
  • 1.2.812                                ...           2 years ago
  • 1.2.811                                ...           2 years ago
  • 1.2.81                                ...           2 years ago
  • 1.2.8                                ...           2 years ago
  • 1.2.7                                ...           2 years ago
  • 1.2.6                                ...           2 years ago
  • 1.2.5                                ...           2 years ago
  • 1.2.4                                ...           2 years ago
  • 1.2.3                                ...           2 years ago
  • 1.2.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 85
Dependencies (39)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |