- 一个页面模板构建工具,并且模板可以独立运行(类似 umi block);
- 一个零配置webpack编译工具(类似 create-react-app),提供 react 和 vue 的两种编译方式,默认为 react 编译模式;;
install lilith
$ npm install lilith-cli -g
假设项目目录结构如下,$ lilith run dev
将自动以./src/index
作为入口启动 webpack devserver
;
├── README.md
├── lilith.config.js
├── mock
│ └── api.json
├── package.json
├── src
│ └── index.tsx
└── yarn.lock
lilith 创建命令,根据命令提示创建项目脚手架或者lilith template
$ lilith create <name>
编译命令零配置运行现有项目,默认打包入口为./src/index
$ run <mode> [source]
<mode>
编译模式现在支持三种模式dev
(webpack dev server模板);build
(webpack production 模式)template
(lilith template 模式,配合 new 命令使用);[source]
编译源默为@qfed/lilith-compiler
支持react
与typescript
,现提供两种编译源react
与vue
npm run dev
即编译react
项目,npm run dev vue
即编译vue
项目,[source]
也可以是符合 Lilith 编译规范自定义源;
example:
$ lilith run dev
$ lilith run dev vue
$ lilith run build
$ lilith run template
模板创建命令根据现有模板创建新页面,默认在当前项目的根目录下的_template
目录,获取项目模板更多用法详见;
$ lilith new <template> <name> [target]
<template>
要创建的页面,支持简写只要满足startsWith就会认为匹配<name>
页面名称[target]
页面输出目录,默认process.cwd()
example:
$ lilith new page new-page
以page为模板创建一下新模块new-page并输出到当前目录;$ lilith new pa new-page
同样是以page为模板创建一下新模块new-page并输出到当前目录,因为template支持简写形式,简写只要满足startsWith就会认为其相等的;$ lilith new page new-page pages
以page为模板创建一下新模块new-page并输出到pages目录;
Lilith 不仅是零配置 webpack 运行工具,同时也是模板生成工具,并且生成的模板可以独立运行,lilith template 中包含以下功能;
- 编译运行模版语法
- 注入略加封装的Request工具
- Mock服务了解更多-json-server-router
- 配合 lilith new 命令智能生成模版页面
# 全局安装lilith命令行工具
$ npm i -g @qfed/lilith
# 创建开发模版的模版
$ lilith create template <templateName>
# 进入生成目录
$ cd _template/<template name>
# 运行启动
$ npm install && npm run dev
lilith 可以通过配置 lilith.config.js 文件,定制化模版编译的内容及源,
module.exports = {
// 自定义webpack配置
webpack: {
entry: './src/'
},
// 自定义编译源
compiler: {
react: 'lilith-compiler'
vue:'lilith-compiler-vue'
}
}
- example/lilith-tempate lilith 模板 demo;
- example/overwrite-webpack-config lilith 重写 webpack demo;
- example/vue lilith vue 编译 demo;
- example/lilith-template-vue lilith 模板 vue demo;
Usage: lilith [options] [command]
Options:
-v, --version version
--root <string> 模板所在根目录,相对目录,基于context来获取root的绝对路径,默认值"_template" (default: "_template")
--context <string> lilith.config.js文件所在目录 > 优先级package.json所在目录 > process.cwd() (default: process.cwd())
--target <string> 新生成模块的输出路径,相对process.cwd(),默认"." (default: ".")
--template <string> 当前使用的模板,模板可选范围即root下面指定的模板,支持简写即当前有模板page那么p,pa,pag等效
--name <string> 新生成模块的名称
--mode <string> 编译模式 template dev build (default: "dev")
--source <string> 编译源默认值 lilith-compiler (default: "lilith-compiler")
--type <string> 创建的模版类型
-h, --help output usage information
Commands:
new <template> <name> [target] lilith 模板创建命令
run <mode> [source] lilith 编译命令
create [<templateName>] lilith 创建命令,根据提示可以创建项目脚手架或者lilith模板
Examples:
$ lilith run dev
$ lilith run build
$ lilith run dev vue
$ lilith run build vue
$ lilith new template someTemplate