legoflow
legoflow workflow
Last updated 11 days ago by yyued .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install legoflow 
SYNC missed versions from official npm registry.

LegoFlow v3.0

Licence Version

安装

$ yarn global add legoflow

# 或者

$ npm i legoflow -g

创建项目

# 默认创建项目为 Vue 2.0 项目
$ lfx create <name>

拉取远程项目模板,创建项目

$ lfx create <name> --remote <NPM Repo Name/Git Repo URL>

# 例子 - 拉取远程默认项目模板
$ lfx create demo --remote react
$ lfx create demo --remote jquery

# 例子 - 拉取远程 NPM Repo Name 模板
$ lfx create demo --remote legoflow-project-react

# 例子 - 拉取远程 Git Repo URL 模板
$ lfx create demo --remote https://github.com/lijialiang/legoflow-project-react.git

规范化

默认项目类型 Vue,远程项目类型 jQuery、React 均支持 ESLint(Standard)、Git Commit Log(Angular) 等规范化配置。

VSCode 为例,安装 ESLint 插件后,打开创建后的项目即可。

// vscode eslint 常用配置
// 保存时自动格式化
"eslint.codeActionsOnSave": true,
// 验证哪些语言格式文件
"eslint.validate": [
  "vue",
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]

扩展 Webpack 配置

若项目下存在 legoflow.js 文件,自动被加入作为 Webpack 配置的后置处理脚本,基本使用方式如下

/**
 * legoflow.js 暴露方法
 *
 * 参数 [mode]
 * 可作为判断工作流处于 "development" 或 "production"
 *
 * 参数 [webpackConfig]
 * 1. 基于 webpack-chain 的 webpack 配置对象,修改该对象配置即可同步到工作流的 webpack 配置
 * 2. 若不习惯使用 webpack-chain 的配置方式,可通过 webpackConfig = webpackConfig.toConfig() 方式
 * 转换为熟悉的 JSON 配置,注意这个方式需要在函数内 retrun { webpackConfig }
 *
 * 参数 [webpackDevServerConfig]
 * webpack-dev-server 开发服务器配置,修改该参数需要在函数内 retrun { webpackDevServerConfig }
 * 构建阶段该对象为 undefined
 */
module.exports = async ({ mode, webpackConfig, webpackDevServerConfig }) => {
  // ...
}

插件化

当项目的 devDependencies 中包括前缀为 legoflow-plugin- NPM 模块时,engine 自动把该模块加入到工作流中。

可以把一些常用的 webpack 配置作为插件发布到 NPM 仓库(如 legoflow-plugin-yypkg)提供给项目使用。

解耦「CLI」与「Engine」

过往我们会开发构建前端依赖的 node_modules(例如 webpack \ loaders 等)都放置到全局 CLI 上,由全局的 CLI 统筹所有的开发构建任务,这样慢慢 CLI 功能就会变得越来越臃肿庞大,更加需要不断去维持往下兼容,导致 CLI 技术债务积累到一定程度就需要进行断层更新。

lf 3.0 为了彻底解决这样的问题,解耦分离 CLI 与 Engine。

CLI 为全局的指令,单单作为项目脚手架的处理器,基本功能即为创建本地远程项目。

Engine 作为项目的依赖,内置在项目 node_modules 内,基本功能为提供基本的 webpack 配置,以及开发/构建两个阶段的指令。

这样的解耦方式,虽然彻底解决了上述问题,但会引发出两个可预见的问题。

  1. 项目依赖 node_modules 占用磁盘空间变大,初始安装时间变长
  2. 单次 CI 构建耗时变长

问题 1 尚可接受。问题 2 影响效率,需要有明确的解决方案,因而延展出优化 lf3 CI 构建方案

CI Cache 缓存策略

在多次缓存设置中,发现命中缓存的稳定性并不可靠

Docker Image 容器主动缓存

容器内建立固定路径下的缓存 node_modules,CI before_script 阶段执行主动 cope 缓存到目标项目内。绝大部分依赖可复用情况下,构建效率有效得到优化

LICENSE

MIT

Current Tags

  • 3.0.0-alpha.16                                ...           latest (11 days ago)
  • 3.0.0-alpha.9                                ...           next (5 months ago)

17 Versions

  • 3.0.0-alpha.16                                ...           11 days ago
  • 3.0.0-alpha.15                                ...           a month ago
  • 3.0.0-alpha.14                                ...           a month ago
  • 3.0.0-alpha.13                                ...           a month ago
  • 3.0.0-alpha.12                                ...           2 months ago
  • 3.0.0-alpha.11                                ...           3 months ago
  • 3.0.0-alpha.10                                ...           4 months ago
  • 3.0.0-alpha.9                                ...           5 months ago
  • 3.0.0-alpha.8                                ...           7 months ago
  • 3.0.0-alpha.7                                ...           10 months ago
  • 3.0.0-alpha.6                                ...           10 months ago
  • 3.0.0-alpha.5                                ...           10 months ago
  • 3.0.0-alpha.4                                ...           10 months ago
  • 3.0.0-alpha.3                                ...           10 months ago
  • 3.0.0-alpha.2                                ...           10 months ago
  • 3.0.0-alpha.1                                ...           10 months ago
  • 0.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 17
Dependencies (12)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |