Weex Cli
警告
这份文档是对应 Weex CLI
2.x 版本的。老版本的 Weex CLI
文档请移步这里。
Weex CLI 致力于将 Weex 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。
系统组件
Weex CLI 在新版本中将各个功能模块拆分成了独立的几个部分,如果你看到我们的源代码,你会发现我们在仓库中通过Lerna管理了多个单独发布的包,提供如下功能模块:
@weex-cli/core
内核模块用于模块调用及升级管理,该内核:- 可升级;
- 可以通过插件及扩展进行能力定制;
- 提供全局可配置的文件;
@weex-cli/generator
模块快速搭建交互式的项目脚手架。@weex-cli/compile
模块快速零配置编译工程文件。@weex-cli/preview
模块快速零预览Weex页面。@weex-cli/debug
模块对Weex页面进行编译调试。@weex-cli/doctor
模块快速检查用户本地开发环境。@weex-cli/lint
模块对本地.vue
文件进行质量诊断。@weex-cli/device
模块快速管理用户本地设备。@weex-cli/run
模块快速运行iOS/Android/Web
工程。
警告
如果你本地没有安装 node.js 你可以前往Nodejs 官网下载安装, 并确保你的 node 版本是>=7.6.0,你可以使用 n 来进行 node 的版本管理。
安装
如果你安装的过程中遇到了问题,你可以在这里进行问题搜索及反馈。
$ npm install weex-toolkit -g
命令
创建工程
# 从官方模板中创建项目
$ weex create my-project
@weex-cli/generator
模块使用 download-git-repo
去下载模板文件. download-git-repo
工具允许你指定特定的分支及远程仓库地址进行项目下载,指定分支通过 (#
) 符号进行分隔.
下载特定分支下的模板格式如下:
$ weex create '<template-name>#<branch-name>' <project-name>
例如:
$ weex create weex-templates/webpack#v1.0 my-project
该命令将会通过weex-templates/webpack项目的v1.0
分支进行项目初始化。
你可以从官方模板或者远程源创建项目模板,也可以创建你自己的weex
项目模板,更多细节你可以查看如何创建你自己的模板.
编译页面
@weex-cli/compile
模块提供对 Weex 项目中 .vue
文件的编译能力,你可以在官方项目中使用,也可以直接对单个.vue
文件进行零配置的沙箱编译,使用方法如下:
$ weex compile [资源文件] [产物地址] <options>
例如:
$ weex compile src build
或
$ weex compile src/index.vue build
选项
选项 | 描述 |
---|---|
-w, --watch | 监听文件改动并实时编译 [默认: true ] |
-d,--devtool [devtool] | 设置webpack编译的devtool选项 |
-e,--ext [ext] | 设置默认编译文件 [默认: .vue ] |
-m, --min | 对产物进行代码混淆及压缩 [默认: false ] |
-c, --config | 传入webpack配置文件 [默认: false ] |
-b, --base | 设置基础路径 [默认: process.cwd() ] |
预览页面
@weex-cli/preview
模块提供对 Weex 项目中 .vue
文件的编译及预览能力,你可以在官方项目中使用,也可以直接对单个.vue
文件进行零配置的沙箱预览,使用方法如下:
$ weex preview [file | folder] <options>
浏览器会自动得打开预览页面并且你可以看到你的weex页面的布局和效果。如果你在你的设备上安装了Weex Playground App,你还可以通过扫描页面上的二维码来查看页面。
使用下面的命令,你将可以预览整个文件夹中的.vue
文件
$ weex src --entry src/foo.vue
你需要指定要预览的文件夹路径以及入口文件(通过--entry
传入)。
选项
选项 | 描述 |
---|---|
-d,--devtool [devtool] | 设置webpack编译的devtool选项 |
-m, --min | 对产物进行代码混淆及压缩 [默认: false ] |
-c, --config | 传入webpack配置文件 [默认: false ] |
-b, --base | 设置基础路径 [默认: process.cwd() ] |
添加iOS/Android工程
@weex-cli/generator
模块提供添加添加Weex官方iOS/Android工程功能。
使用weex platform [add|remove] [ios|android]
命令可以添加或移除iOS/Android
项目模板。
例子:
$ weex platform add ios
$ weex platform remove ios
该命令仅在 weex
官方项目中有效,请注意项目结构,可以使用 weex platform list
来查看你的项目中支持的平台。
运行iOS/Android工程
@weex-cli/run
模块提供添加运行Weex官方iOS/Android工程功能,你可以通过如下命令使用:
# 运行 iOS 模拟器预览
$ weex run ios
# 运行 Android 模拟器/真机预览
$ weex run android
# 运行 Web 端预览
$ weex run web
调试页面
@weex-cli/debug
模块提供对Weex页面的调试能力,可使用如下命令启动:
$ weex debug [we_file|bundles_dir] [options]
选项
选项 | 描述 |
---|---|
-p, --port [port] | 设置调试服务器的端口,[默认:8088 ] |
--manual | 开启该选项后将不会自动打开浏览器,[默认:false ] |
--channelid | 指定调试通道ID |
--remote-debug-port [port] | 设置调试服务器端口号,[默认:9222 ] |
如何集成调试工具到自己的APP
参考文档:
代码质量检查
@weex-cli/lint
模块提供对Weex代码质量校验功能,可使用如下命令启动:
$ weex lint [file | folder] <options>
选项
@weex-cli/lint
内置 eslint
模块用于进行代码质量校验,选项可参考 ESLint CLI。
如果想在你的工程内加入 weex
代码质量校验,你也可通过添加eslint插件eslint-plugin-weex的方式使用。
开发环境检查
@weex-cli/doctor
模块提供对本地开发环境的检查,可使用如下命令启动:
$ weex doctor
该命令会检查你的本地开发环境,你可根据提示对你的开发环境进行调整,以便进行weex页面的开发工作。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论