@wanmi/xwidget-cli

CLI for xwidget development.

Usage no npm install needed!

<script type="module">
  import wanmiXwidgetCli from 'https://cdn.skypack.dev/@wanmi/xwidget-cli';
</script>

README

组件开发脚手架项目(很遗憾目前只支持mac/linux)

全局安装的脚手架工具命令xwidget

主要用于组件生成与发布自动化

设置npm私服(若已经执行过,忽略这一步)

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set @wanmi:registry=http://registry.npm.wanmi.com
npm config set @qianmi:registry=http://registry.npm.wanmi.com

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm config set @wanmi:registry=http://registry.npm.wanmi.com --global
npm config set @qianmi:registry=http://registry.npm.wanmi.com --global

全局安装xwidget命令工具

下面这个命令已经不用了
npm i -g @wanmi/xwidget-cli@latest

需要在此目录下 1.npm install 2.yarn dev 注意 : win10需要安装ubuntu bash, 其他系统需要安装虚拟机(安装参考:http://note.youdao.com/noteshare?id=a89c85ccc586df1ee5b1fd7510be60b0&sub=E5724DB9FE694C07B4F0EF219177C743) 在命令行输入 xwidget 然后回车, 若安装成功则会有该命令的用法提示

设定配置项

因为命令行工具需要和公司的 gitlab 服务进行交互,这部分是通过 gitlab 的 web-service 来完成的,所以需要配置下gitlab的 token

  1. 登录 http://172.19.25.151
  2. 点击 左侧菜单中的 Profile Settings
  3. 再点击左侧菜单的 Account
  4. 将右侧的 Private token 复制出来
  5. 删除home路径下的缓存配置文件 rm ~/.xwidget.ini (第一次执行,无需此步骤)
  6. 运行命令 xwidget config set gitlab.privateToken 你的tokenXXX

校验包名唯一性: 访问仓库失败,请检查网络设置 http://172.19.26.102:7001

http://172.19.25.151/api/v4/projects?private_token=token&search=xwidget-dev-boilerplate

http://172.19.25.151/api/v4/projects?private_token=token&search=xwidget-cli-cfg

开发新组件

通过下面的命令来创建和初始化一个新的组件开发项目:

xwidget widget create 组件名

组件名约定: pc端组件使用pc-开头, h5端组件使用wechat-开头 , 同一类型组件使用-01,-02结尾区分

等待一段时间后,如果一切顺利,则会看到下面的输出:

✔ 检查配置项
✔ 校验包名
✔ 校验包名唯一性
✔ 创建项目目录
✔ 生成项目模板
✔ 安装项目依赖

🎉  项目初始化成功,你可以:

  启动开发: cd your_widget_name && xwidget widget dev
  更多指令: xwidget widget -h

开发/调试组件

只需要在组件开发项目的根目录下运行如下命令:

yarn start

顺利的话,会在浏览器中打开一个 tab 用户页面调试(或手动输入http://127.0.0.1:8080进行查看)

发布组件

只需要在组件开发项目的根目录下运行如下命令:

# 先登录 (用户名,密码,邮箱分别默认为admin / admin / admin@qianmi.com)
npm login --registry=http://registry.npm.wanmi.com --scope=@wanmi
# 发布命令
yarn build

或者执行如下命令指定本次修改的类型

xwidget widget publish patch

因为publish命令会自动的增加版本号,所以需要开发人员指定下本次修改的类型 major|minor|patch,当指定了修改类型之后,会自动的增加版本号中对应的部分,这部分遵循 semver

接着如果顺利的话,即可看到下面的输出:

✔ 检查配置项
✔ 读取包信息
✔ 处理版本号
✔ 执行 prettier
✔ 更新 tslint.json
✔ 执行 tslint
✔ 检测交叉引用
✔ 提取组件间依赖
✔ 下载 DLL 配置
✔ 执行打包
✔ 发布到 npm
✔ 整理资源信息
✔ 通知管理台

🎉  成功发布版本:

  @wanmi/your_widget_name@x.x.x