
前端工程化
文章平均质量分 72
赵忠洋
CV工程师,面向Search Engines编程
展开
-
[搭建CLI效率工具] Rollup + TypeScript 搭建CLI工程
环境搭建工欲善其事必先利其器,使用Rollup搭建Typescript开发环境。毕竟Typescript是大势所趋并且Rollup相比较webpack对于node模块来说比较优化。创建项目目录并初始化mkdir <projectName> && cd <projectName> && yarn init -y创建基础目录结构├── bin #可执行文件目录│ └── index.js├── lib原创 2022-01-20 20:50:33 · 2202 阅读 · 2 评论 -
开发自己的脚手架(Rollup+Typescript)-(04)-(上下文构类型构建)
定义Context执行上下文类型src/init/types.d.ts/** * cli配置对象 */export interface Options { /** * 是否强制写入 * @default false */ force?: boolean /** * 是否从本地缓存读取模板 * @default false */ offline?: boolean}/** * 上下文对象 */原创 2020-09-15 23:33:15 · 688 阅读 · 1 评论 -
开发自己的脚手架(Rollup+Typescript)-(03)-(CAC 命令行交互)
CAC介绍是一个JavaScript库,用于构建应用的CLI。超轻量级:没有依赖关系,只有一个文件。简单易学: 构建简单的CLI只需学习4种API :cli.option cli.version cli.help cli.parse。功能抢到: 例如默认命令,类似git的子命令,对所需参数和选项进行验证,可变参数,点嵌套选项,自动帮助消息生成等功能。开发人员友好: 用TypeScript编写。文档传送门安装CACyarn add cac引入cacsrc/cli.tsimp原创 2020-09-15 23:09:04 · 1319 阅读 · 0 评论 -
开发自己的脚手架(Rollup+Typescript)-(02)-(中间件模式)
对于A->b->c这一类的流程事件,可以采用分解这些事件,当需要用到这些事件操作时,我们将操作插入到核心事件完成所需要的不同步骤中。实现一个流程处理函数src/core/ware.ts/** * 中间件方法类型 */export type Middleware<S> = (context: S) => Promise<void> | void/** * 中间件类 */export class Ware<S>{ priv.原创 2020-09-15 20:27:14 · 353 阅读 · 0 评论 -
开发自己的脚手架(Rollup+Typescript)-(01)-(环境搭建)
介绍工欲善其事必先利其器,使用Rollup搭建Typescript开发环境。毕竟Typescript是大势所趋并且Rollup相比较webpack对于node模块来说比较优化。开发语言:Typescript打包工具:Rollup基于CAZ工具仿写,特别感谢ZCE大佬。环境搭建# 创建项目目录并初始化mkdir <projectName> && cd <projectName> && yarn init -y创建NodeJS C原创 2020-09-15 20:26:30 · 3221 阅读 · 3 评论 -
前端工程化——模块化概述
模块化概述——「模块化」只是思想最主流的代码整合方式,安装功能不同划分不同模块。模块化演变过程模块化规范常用的模块化打包工具基于模块化工具构建现代WEB应用打包工具的优化技巧模块化的演进过程Stage 1 - 文件划分方式完全依靠约定├── index.html├── module-01.js└── module-02.js通过scriptsrc属性引入模块污染全局作用域,容易产生命名冲突模块成员可以随意修改无法管理模块依赖关系Stage 2 - 命名空间方式原创 2020-06-20 23:40:53 · 383 阅读 · 0 评论 -
前端工程化-02-初识gulp
基于流的构建系统gulp基本使用# 初始化项目yarn init -y# 安装gulpyarn add gulp -D项目根目录创建 gulpfile.js 文件 (gulp入口文件)定义一个基本任务// 定义一个构件任务exports.foo = done => { console.log('hello foo') // 标识任务完成 done()}执行 yarn gulp foo定义一个默认任务// 定义一个默认构建任务exports.原创 2020-06-07 00:20:52 · 302 阅读 · 0 评论 -
前端工程化-01-Yeoman-Grunt
没有前端工程化遇到的问题使用ES6+新特性,但是有兼容问题使用Less/Sass/PostCss增强CSS的变成性,运行环境不能直接支持使用或快画的方式提高项目的可维护性,运行环境不能直接支持部署上线前需要手动压缩代码及资源文件部署过程中需要手动上传代码到服务器多人协作无法硬性统一大家的代码风格,从仓库中pull回来的代码质量无法保证开发是需要等待后端服务接口提前完成…工程化表现一切以提高效率、降低成本、质量保证为目的的手段都属于「工程化」graph LR创建项目-->原创 2020-06-07 00:19:11 · 280 阅读 · 0 评论