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
- 登录 http://172.19.25.151
- 点击 左侧菜单中的 Profile Settings
- 再点击左侧菜单的 Account
- 将右侧的 Private token 复制出来
- 删除home路径下的缓存配置文件
rm ~/.xwidget.ini
(第一次执行,无需此步骤) - 运行命令
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