FST (full-stack-ts)
在日常的工作编程中,对于前端来讲,我们可能会面对一个个不同的项目,前端不同于其他的编程语言的一个地方就在于,前端的技术纷繁多样,呈现百家争鸣,百家争鸣极大的促进了前端的繁荣,但是却也带来了混乱的管理,层出不穷的框架、思想,令人眼花缭乱,就比如TS的出现极大的提高了前端代码的可控、可管理性。但是,我们几乎每写一个新的项目、新的小功能,可能都需要重新构建一套环境,这个环境是有很多的可选择性的,比如webpack/gulp/rollup,但是,其实不论哪种选择,我们的目标也就是那几样,打包、编译、压缩。这些工作其实都可以抽象出来作为功能模块使用的,而我不需要去关心具体的技术细节,也没必要关心。
目的
fst(full-stack-ts)的存在目的就是为了简化这个流程,通过命令行的方式去添加新的前后端的功能模块,通过可选的命令行选项去选择不同的工作模式。
使用
- 安装
npm install -g fst
- 初始化
fst init// orfst i
- 安装依赖
npm install
- 新建项目
fst add modulename // 等同于 fst add modulename -fefst 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
会自动的将他们和根项目中对应的文件合并。
- 构建项目
fst build modulename // 相当于 fst build modulename -fefst build modulename -f // 仅仅编译前端的项目fst build modulename -e // 仅仅编译后端的项目fst build modulename -w // 编译并监听项目,对于前端项目会自动编译、刷新,对于后端项目会自动编译fst b // 等同于fst buildfst b -a // 编译`front目录下的所有的模块`
- 配置
对于编译,我们总是会有很多的自定义行为,这里我们主要就是对自定义行为来进行自定义,在说明之前,首先得介绍一下目录结构:
- 根目录
根目录下包含有以下的文件及目录
- 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
例子
moduleexports = "src": "src" // 定义了资源文件所在入口 "dest": "dest" // 定义编译文件的存放地 "front": "front" // 定义了前端代码的存放目录 "end": "end" // 定义了后端代码的存放目录 "transformers": { } "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
moduleexports = // 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的配置并进行修改 { }
根目录、子目录会进行合并
transformers
这是一个key-value
形式的对象,key是后缀名,value是函数处理方法,函数的参数是vinly file格式。
通过这个方法能够做到在Copy的时候进行文本转换。