LegoFlow-Engine 自动将 devDependencies 中含有 legoflow-plugin- 的模块加入到工作流中 - 文章教程

LegoFlow-Engine 自动将 devDependencies 中含有 legoflow-plugin- 的模块加入到工作流中

发布于 2021-09-08 字数 4647 浏览 839 评论 0

过往我们会把开发构建前端依赖的 node_modules(例如 webpack \ loaders 等)都放置到全局 CLI 上,由全局的 CLI 统筹所有的开发构建任务。

这样慢慢 CLI 功能就会变得越来越臃肿庞大,更加需要不断去维持往下兼容,导致 CLI 技术债务积累到一定程度就需要进行断层更新。

LegoFlow v3 为了彻底解决这样的问题,解构分离 CLI 与 Engine。

CLI 单单作为创建项目脚手架的处理器,基本功能即为拉取 远程模板 进而创建项目。

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

这样的解耦方式,虽然根源解决了上述问题,但同时引发两个可预见的问题:

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

问题 1 尚可接受。问题 2 严重影响构建发版效率,因而延展出优化 lf next CI 构建方案:

CI Cache 缓存策略

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

Docker Image 容器主动缓存

容器内建立固定路径下的缓存 node_modules,主动 cp 到目标项目内,绝大部分依赖可复用情况下,安装效率有效优化。

创建项目

# yarn 方式
$ yarn create lf-app [name]
# npm 方式
$ npm init lf-app [name]

# 创建以路径文件夹为名称的项目
$ cd demo
$ yarn create lf-app

# 拉取指定 **远程项目模板** 创建项目
$ yarn create lf-app [name] --remote <NPM Repo Name/Git Repo URL>

# 例如
$ yarn create lf-app demo --remote vue
$ yarn create lf-app demo --remote vue-next
$ yarn create lf-app demo --remote react
$ yarn create lf-app demo --remote jquery

# 例如,我提交了一个 npm 仓库名为 legoflow-project-test
# 若没有指定 --remote,创建项目时模板会自动出现在候选列表中
$ yarn create lf-app demo
# 也可直接指定 --remote
$ yarn create lf-app demo --remote test

# 例子,直接拉取远程 Git Repo URL 模板
$ yarn create lf-app 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"
]

安装

$ yarn add legoflow-engine --dev

# or

$ npm install legoflow-engine --save-dev

使用

# 开发
$ lf-engine dev

# 构建
$ lf-engine build

# 构建 [dll](https://webpack.docschina.org/plugins/dll-plugin/)
$ lf-engine dll -m <modules> -o <filename>
# 例子
$ lf-engine dll -m vue,vue-router,vuex -o vendor

# 参数
# 构建 base64 图片默认阀值为 1kb,修改最大阀值(kb)
$ lf-engine build --base64ImageMaxSize=10

# 禁止构建文件名带 hash 值
$ lf-engine build --disableFileNameHash=true

环境

console.log(process.env.MODE)
// 开发 development
// 生产 production

扩展 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-test)提供给项目使用。

项目地址:https://www.npmjs.com/package/legoflow-engine

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
83580 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0