Skip to content

Latest commit

 

History

History
100 lines (65 loc) · 2.6 KB

README.md

File metadata and controls

100 lines (65 loc) · 2.6 KB

keeler

keeler 是一款脚手架程序,可以一键生成react项目的环境。

安装

你可以通过以下命令安装keeler

npm install keeler -g

初始化项目

执行如下命令:

1. 进入项目目录,执行

keeler -i

系统会在当前目录创建如下结构文件:

├── gulpfile.js                     // gulp的配置文件
├── webpack.config.js               // webpack的配置文件
├── src                             // 项目文件
│   ├── app                         // 项目程序目录(JSX)
│   │   └── demo
│   │       └── demo.entry.jsx
│   ├── page                        // 项目html入口文件
│   │   └── demo
│   │       └── demo.html
│   └── static                      // 项目静态资源
│       └── scss
│           └── demo
│               └── demo.entry.scss
└── package.json

2.开发

初始化之后,你需要通过 npm install 安装所需的依赖,然后可以通过以下命令进行开发

npm run dev

npm run build

2.1.1 npm run dev

该命令用于开发阶段,其会自动启动编译程序,对页面进行编译(在进行编译之前,keeler会通过 keeler -b 去生成入口文件配置, 详见 keeler -b 的说明)。

同时该命令会自动创建webserver,并在浏览器中打开。该页面会自动监听文件的修改,并随之自动刷新。

如果需要编辑指定的模块可以通过PAGE参数指定

如:

PAGE=demo,pagea npm run dev

PAGE=demo,pagea yarn dev

2.1.2 npm run build

该命令用于生产环境,会自动完成编译压缩等事物。

2.1.3 keeler -b

开发过程中,使用者不需要手动配置webpack的入口,keeler会自动去寻找雷士 *.entry.jsx以及 *.entry.scss 的文件,并自动生成配置文件。该过程通过 keeler -b 执行,默认已经写入到了npm run buildnpm run dev中,默认情况下用户可以不用去关心这个步骤。

keeler -b 命令执行时keeler会扫描目录下的所有 *.entry.jsx以及 *.entry.scss 文件,自动制作编译配置文件(keel.entry.webpack.config.json),这个文件会被webpack所引用。

2.1.4 keeler add NAME

添加一个名为NAME的页面

该命令执行完成之后,会自动的在项目的目录中新建

src/app/NAME/NAME.entry.jsx
src/app/page/NAME/NAME.html
src/app/page/static/scss/NAME/NAME.scss

并自动处理好依赖关系(HTML文件会自动引入js和css)