luoxue-victor/workflow

一个工作流平台

workflow

简介

• workflow 致力于打造一个工作流平台，将工作中的最佳实践集中在一起，提供解决各种在工作中开发遇到的问题。
• 另外也会把一些学习的课程，以后会一直更新 --> learn-webpack、 learn-rollup

原则

• 在任何事情上应该把复杂的东西变得更简单，而不是较为简单

脚手架

@pkb/cli 可用来生成项目、添加插件、检查项目配置、升级更新等等，对整体项目管理。

# 全局安装
npm i -g @pkb/cli # 全局安装使用

pk create <project-name> # 创建项目 webpack|rollup|vite|lerna|node|vscode插件
pk add <plugin> # 安装插件
pk info # 查看项目及系统配置
pk upgrade [filter] # 检查升级 npm 版本
pk cm # commit 提交
pk eslint # eslint 检查，需要安装 @pkb/plugin-eslint
pk stylelint # stylelint 检查，需要安装 @pkb/plugin-stylelint
pk gotty # 在 web 中使用终端
pk jsdoc2md # 把 js 注释生成 md
pk lerna # 多包管理 发布
pk changelog # 生成 changelog
pk josn2ts # json 转成 ts
pk mock # 开启 mock，支持 mockjs
pk tinypng # 压缩图片，批量压缩
pk tree [path] # 将目录生成 tree 结构
pk find [fileName] [str] # 搜索文件及文件内容
pk qrcode [content] # 在终端输出二维码

创建项目及模板

命令 pk create [rojectName] 选项

• webpack: 集成了大量webpack插件，使用 webpackChain 配置，开箱即用
• rollup: 对 rollup 进行封装，开箱即用
• vite: 基于 vite 构建的脚手架，支持 vite 所有配置
• node: 基于 koa 构建的 node 框架
• lerna: 一键创建 lerna 模板
• mocks: mocks 模板，首次执行 pk mock 会自动添加在项目中
• vscode: 创建 vscode 插件模版

工具

• node 工具
• npm-packages

学习&共建

• learn-webpack 跟项目一起学习 webpack
• learn-rollup 跟项目一起学习 rollup
• 项目计划 把 issue 整理到 project 中做好分类，并有计划的完成目标。
• 开发指南 如果想要一起开发的可以参考这里。
• 插件市场 目前已经完成的插件。
• 好的网站 一些比较实用的网站

贡献者名单

tips

第一次发布带有命名空间的包需要使用

npm publish --access=public

workflow's Issues

现代模式打包

_{Sent from PPHub}

FTP 发布部署

http 代理，配合mock

[request]: better branch naming

现在 分支有的叫课时，有的叫课题，望统一
并且中文名称不太利于命令行中操作

是否可以改成 lesson-1 这样的形式~

以及在 master 的 readme 中补充说明：课题需要切换对应分支进行实践
现在没有说明容易造成困惑… #36

代码优化：降低项目复杂度跟重复代码

https://codebeat.co/projects/github-com-luoxue-victor-webpack-box-master

canvas 引擎

prefetch、preload、prerender 配置

_{Sent from PPHub}

svg 转成组件在项目中使用

https://umijs.org/zh/guide/module-processor.html#module-list

import { ReactComponent as Avatar } from './avatar.svg'

function Example() {
  return <Avatar />
}

自动生成文档

_{Sent from PPHub}

使用lerna进行插件管理

[DllPlugin] Uncaught ReferenceError: dll is not defined

通过 DllPlugin 拆分包后，缺少将生成的 dll 文件提前插入到 html 中。

第二课时，base.js中引入lib做什么的

看不懂读取config的文件路径，然后做了什么，照着课时做又报错，lib中的代码也是clone下来找到的，但是还是报错

WebHook与自动构建

_{Sent from PPHub}

workflow-e2e

https://github.com/deis/workflow-e2e

webpack5

_{Sent from PPHub}

编译vue文件

课题二中的build下base.js查询Module配置文件windows环境问题

使用split进行截取，在windows环境上会出现无法截取问题。
建议使用node原生path.basename方法

 
    files.map(_ => {
        const name = path.basename(_, '.js')
        return map.set(name, require(_)(config, resolve))
    })

ServiceWorker的缓存策略和PWA应用

编译 react

骨架屏

_{Sent from PPHub}

无痕埋点

转化markdown文件

_{Sent from PPHub}

callApp

唤起app最佳方案

搭建 svelte3 框架

增加引入字体跟图片

微前端？

https://juejin.im/entry/5dfdf91be51d452a6105b044

https://github.com/mqhe2007/vue-module-loader

_{Sent from PPHub}

SVG 整体解决方案

https://github.com/Tencent/tmt-workflow/wiki/%E2%92%9A-SVG%E6%95%B4%E4%BD%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88

自动添加别名

添加lint并自动修复功能

包括 eslint/tslint/stylelint 结合 prettier做样式格式化

设置全局变量

添加单元测试

ZIP 打包

错误监控，sentry

_{Sent from PPHub}

graghql for webpack 使用 gq-loader

_{Sent from PPHub}

预渲染 prerender

_{Sent from PPHub}

tslint 已废弃

rt

编译小程序

_{Sent from PPHub}

cli-ui 界面化，通过界面交互修改配置

一键安装基础配置

error preset "webpack" not found.

github+travis+docker

设置全局样式

智能 WebP 解决方案

https://github.com/Tencent/tmt-workflow/wiki/%E2%92%95-WEBP-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88

增加检查命令 inspect，查看所有配置

[request]: dynamic import

ts编译由 babel 重构成使用 ts-loader

[opts]: 用 glob 代替 findSync

如题 build/base.js 中的一些代码逻辑可以简化

docker部署

_{Sent from PPHub}

mock数据

性能监控

_{Sent from PPHub}