命令行工具

本文介绍初始化及构建命令行工具的步骤。

初始化

当工程脚手架初始化完后,如果需要新增页面,除了单纯的复制粘贴以外,提供了以下命令来添加页面定义和组件定义:

init-page

命令格式

kylin init-page <pageName>
注意

  • 上述命令中 pageName 为必选参数 ,指新创建页面的英文名称。

  • 如果当前 cwd 下有 package.json 并且存在 kylinApp 字段,则会自动往 kylinApp.pages 添加新增的 page。

init-component

命令格式

kylin init-component <componentName>
注意

  • 上述命令中 componentName 为必选参数 ,指新创建组件的英文名称。

  • 如果当前 cwd 下有 package.json 并且 kylinApp.pages 大于 1 个 page,会提示选择在哪个 page/components 目录下创建。

构建

本部分介绍工具构建的命令格式、公共资源包注入的构建提示。

命令格式

kylin build # ... args

项目常用构建

kylin build --dev     # dev 构建及静态服务器
kylin build --server --no-prod  --hot   # dev 构建及静态服务器及启用热更新
kylin build --server  # prod 构建及静态服务器
kylin build --no-prod --watch  # dev 构建及监听文件变化

命令行入参

参数名

类型

备注

—dev

boolean

同旧版 buildtool 一致,使用 dev 的 conf 并开启 server。开启该选项会强制设置 prod=falseserver=truehot=true

—no-prod

boolean

prodtrue 时使用 prod 的 conf 编译,为 false 时使用 dev 的 conf 编译,同理设置 NODE_ENV

—server

boolean

只开启静态服务器,开启该选项会强制设置 watch=true

—verbose

boolean

webpack 输出明细。

—watch

boolean

是否检测文件变化。

—no-compress

boolean

关闭压缩,默认启用压缩。

—no-common

boolean

关闭 CommonsChunkPlugin,默认开启 common。

—hot

boolean

开启热更新,默认关闭,只能在 prod=falseserver=true 时使用。

—open [entry]

boolean, String

只能在 --server 时有效,会打开 entry 指定的入口 URL,只 --open 但未明确指定 entry 时会处理第一个。

—mock

boolean, String

开启 mock 插件读取 ./mock/mock.config.js

kylinApp 配置选项

参数名

类型

备注

devPort

Number

默认监听 IPv4 的 0.0.0.0:8090 端口。

pageTemplate

String

页面模板路径。

output

String

输出相对目录。

options

Object

额外选项,如下所示。

dirAlias

Object

等同于 webpack.resolve.alias,如 { common:’./src/common/‘ }

公共资源包注入构建提示

对于以下 require / import 的包路径,会自动注入对应 <script> / <link> 标签到对应 HTML 中。

包名

映射全局对象

映射路径

fastclick

FastClick

as.alipayobjects.com/g/luna-component/luna-fastclick/0.1.0/index.js

vue

Vue

a.alipayobjects.com/g/h5-lib/vue/2.1.6/vue.min.js

es6-promise

Promise

as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js

fetch

fetch

as.alipayobjects.com/g/component/fetch/1.0.0/fetch.min.js

zepto

Zepto

a.alipayobjects.com/amui/zepto/1.1.3/zepto.js

阿里云首页 移动开发平台 mPaaS 相关技术圈