搭贝脚手架

搭贝脚手架

搭贝提供插件开发脚手架，提供快速开发的能力

CLI创建项目

使用脚手架快速搭建开发项目，内置开发模板和插件示例，并集成了插件打包脚本

# 方式 1
npm init

# 方式 2
npx @k6/create

# 外网需要设置源
npm --registry http://npm.idabei.com/ init @k6

npm init @k6 会触发交互式命令，询问参数设置，可以通过命令行设置参数，跳过交互式询问
npm init @k6 k6-develop-project --default
使用默认配置强制覆盖，等效于
npm init @k6 k6-develop-project --template-pc --template-h5 --develop-pc --develop-h5

CLI更新项目

在创建项目时会询问以下4个工作空间子项目的创建和覆盖操作。

• template-pc PC端开发调试模板项目 - 创建后可以通过脚手架更新项目
• template-h5 H5端开发调试模板项目 - 创建后可通过脚手架更新项目
• develop-pc PC端自定义组件开发项目 - 创建后自己维护
• develop-h5 H5端自定义组件开发项目 - 创建后自己维护

更新项目场景：

• 如果初次创建模板没有安装对应H5的项目template-h5和develop-pc，后续可以通过脚手架覆盖安装对应的H5项目即可，其他项目选中否即可
• 如果创建项目后，脚手架有对template-pc进行更新，希望更新template-pc项目，通过脚手架覆盖安装template-pc项目即可，其他项目选中否即可

覆盖自定义组件开发项目是危险的动作，自定义组件开发项目主要是由开发者自己维护，添加组件的依赖，添加存放自定义组件用，不建议通过脚手架进行更新

CLI命令详解

npm init @k6 [projectName] [--default] [--template-pc] [--template-h5] [--develop-pc] [--develop-h5] [--force]

projectName               # 默认 k6-develop-project
--default                 # 默认开启所有
--template-pc | --tpl-pc  # 创建PC端开发调试模板项目 -> PC端本地调试，支持自定义组件开发热更新
--template-h5 | --tpl-h5  # 创建H5端开发调试模板项目 -> H5端本地调试，支持自定义组件开发热更新
--develop-pc  | --dev-pc  # 创建PC端自定义组件开发项目   -> PC端开发示例组件，配置默认打包脚本
--develop-h5  | --dev-h5  # 创建H5端自定义组件开发项目   -> H5端开发示例组件，配置默认打包脚本
--force       | --f       # 强制覆盖

使用示例

# 最简使用
npm init @k6 
# 设置项目名称
npm init @k6 k6-develop-project
# 使用默认配置
npm init @k6 --default 
# 使用自定义配置
npm init @k6 --template-pc --develop-pc

CLI打包

• 安装打包脚本

npm install @k6/cli-service

# or
yarn add @k6/cli-service

# lerna
lerna add @k6/cli-service --scope=develop-pc

• 打包命令详解

k6-build --entry [config] -output [dist] --vue [version]

--entry   # 打包组件导出配置文件
--output  # 输出目录 默认为当前目录 dist
--vue     # 打包的vue版本，可选值 [2,3] 默认为 2

• 打包脚本使用示例

packages/develop-pc/package.json

{
  "script": {
    "build": "k6-build --entry ./buildEntry.js  --vue 2 --output dist "
  },
  "devDependencies": {
    "@k6/cli-service": "^0.1.2"
  }
}