fst

FST （full-stack-ts）

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

目的

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

使用

1. 安装

npm install -g fst

1. 初始化

fst install
// 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目录中的front和end目录建立对应的项目，生成基本的文件，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", // 定义了后端代码的存放目录
    "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){

    }
}