介绍

warning 警告这份文档是对应 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工程。

如何使用

warning 警告如果你本地没有安装 node.js 你可以前往Nodejs 官网下载安装, 并确保你的 node 版本是>=7.6.0,你可以使用 n 来进行 node 的版本管理。

安装

如果你安装的过程中遇到了问题,你可以在这里进行问题搜索及反馈。

  1. $ npm install weex-toolkit -g

命令

创建工程

  1. # 从官方模板中创建项目
  2. $ weex create my-project

@weex-cli/generator 模块使用 download-git-repo 去下载模板文件. download-git-repo 工具允许你指定特定的分支及远程仓库地址进行项目下载,指定分支通过 (#) 符号进行分隔.

下载特定分支下的模板格式如下:

  1. $ weex create '<template-name>#<branch-name>' <project-name>

例如:

  1. $ weex create weex-templates/webpack#v1.0 my-project

该命令将会通过weex-templates/webpack项目的v1.0分支进行项目初始化。

你可以从官方模板或者远程源创建项目模板,也可以创建你自己的weex项目模板,更多细节你可以查看如何创建你自己的模板.

编译页面

@weex-cli/compile 模块提供对 Weex 项目中 .vue 文件的编译能力,你可以在官方项目中使用,也可以直接对单个.vue文件进行零配置的沙箱编译,使用方法如下:

  1. $ weex compile [资源文件] [产物地址] <options>

例如:

  1. $ weex compile src build

  1. $ 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文件进行零配置的沙箱预览,使用方法如下:

  1. $ weex preview [file | folder] <options>

浏览器会自动得打开预览页面并且你可以看到你的weex页面的布局和效果。如果你在你的设备上安装了Weex Playground App,你还可以通过扫描页面上的二维码来查看页面。

使用下面的命令,你将可以预览整个文件夹中的.vue文件

  1. $ 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项目模板。

例子:

  1. $ weex platform add ios
  2. $ weex platform remove ios

该命令仅在 weex 官方项目中有效,请注意项目结构,可以使用 weex platform list来查看你的项目中支持的平台。

运行iOS/Android工程

@weex-cli/run 模块提供添加运行Weex官方iOS/Android工程功能,你可以通过如下命令使用:

  1. # 运行 iOS 模拟器预览
  2. $ weex run ios
  3. # 运行 Android 模拟器/真机预览
  4. $ weex run android
  5. # 运行 Web 端预览
  6. $ weex run web

调试页面

@weex-cli/debug 模块提供对Weex页面的调试能力,可使用如下命令启动:

  1. $ 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代码质量校验功能,可使用如下命令启动:

  1. $ weex lint [file | folder] <options>

选项

@weex-cli/lint 内置 eslint 模块用于进行代码质量校验,选项可参考 ESLint CLI

如果想在你的工程内加入 weex 代码质量校验,你也可通过添加eslint插件eslint-plugin-weex的方式使用。

开发环境检查

@weex-cli/doctor 模块提供对本地开发环境的检查,可使用如下命令启动:

  1. $ weex doctor

该命令会检查你的本地开发环境,你可根据提示对你的开发环境进行调整,以便进行weex页面的开发工作。