# breeze-cli

> Front-end solution

Latest version **0.0.9** (published 2018-11-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install breeze-cli
pnpm add breeze-cli
yarn add breeze-cli
bun add breeze-cli
```

Provides the command `breeze-cli`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2018-11-13 |
| First published | 2018-11-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 42 |
| Unpacked size | 50.4 KB |
| Known vulnerabilities | 0 (+10 in 3 direct dependencies) |
| Install scripts | no |
| Author | SimpleZn |
| Maintainers | zdream |

## Links

- npm: https://www.npmjs.com/package/breeze-cli
- npm.io page: https://npm.io/package/breeze-cli

## Dependencies (42)

- [ejs](https://npm.io/package/ejs.md) ^2.6.1
- [opn](https://npm.io/package/opn.md) ^5.4.0
- [chalk](https://npm.io/package/chalk.md) ^2.4.1
- [react](https://npm.io/package/react.md) ^16.6.0
- [watch](https://npm.io/package/watch.md) ^1.0.2
- [yargs](https://npm.io/package/yargs.md) ^12.0.2
- [mem-fs](https://npm.io/package/mem-fs.md) ^1.1.3
- [express](https://npm.io/package/express.md) ^4.16.4
- [shelljs](https://npm.io/package/shelljs.md) ^0.8.2
- [webpack](https://npm.io/package/webpack.md) ^4.23.1
- [commander](https://npm.io/package/commander.md) ^2.19.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.24.0
- [css-loader](https://npm.io/package/css-loader.md) ^1.0.1
- [url-loader](https://npm.io/package/url-loader.md) ^1.1.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.1.2
- [json-loader](https://npm.io/package/json-loader.md) ^0.5.7
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.1.2
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.4
- [style-loader](https://npm.io/package/style-loader.md) ^0.23.1
- [mem-fs-editor](https://npm.io/package/mem-fs-editor.md) ^5.1.0
- [stylus-loader](https://npm.io/package/stylus-loader.md) ^3.0.2
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^4.3.11
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.1.0
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.23.0
- [express-http-proxy](https://npm.io/package/express-http-proxy.md) ^1.4.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.1.10
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.0.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^3.2.0
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^0.1.19
- [html-webpack-template](https://npm.io/package/html-webpack-template.md) ^6.2.0
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^3.4.0
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.24.3
- [webpack-node-externals](https://npm.io/package/webpack-node-externals.md) ^1.7.2
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.4.4
- [inline-manifest-webpack-plugin](https://npm.io/package/inline-manifest-webpack-plugin.md) ^3.0.1
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) ^5.0.1
- [babel-plugin-transform-object-assign](https://npm.io/package/babel-plugin-transform-object-assign.md) ^6.8.0
- [babel-plugin-transform-require-ignore](https://npm.io/package/babel-plugin-transform-require-ignore.md) ^0.1.1
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.23.0

## Recent versions

- 0.0.9 (latest) — 2018-11-13
- 0.0.8 — 2018-11-09
- 0.0.7 — 2018-11-09
- 0.0.6 — 2018-11-09
- 0.0.5 — 2018-11-01
- 0.0.4 — 2018-11-01
- 0.0.3 — 2018-11-01
- 0.0.2 — 2018-11-01

## README

**breeze-cli**

breeze 是一个基于 webpack 的打包工具，不依赖于具体项目，相反，它是诸多项目 ( React & Webpack & ES6 ) 共同点的抽离。方便项目的调试和打包，是 breeze 诞生的初衷。

现在，只需在新建项目的根目录下创建 `breeze.config.js`（ breeze 的配置文件），就可完成 React 项目的初始化。


### <span id="install">如何安装</span>

  ```
  # npm 全局
   npm install breeze-cli -g 

  ```
### <span id="create">项目创建</span>

| cli 命令                      | 说明
|-------------------------------|----------------------------
| breeze-cli init [name]            | react & react-router (单页面或多页面)
| breeze-cli init-redux [name]      | react & react-router & redux
| breeze-cli init-prerender         | 对项目（单页面或多页面）开启预渲染

目录结构一览

```
.
├── /dist/                              # 代码打包目录
├── /node_modules/                      # node依赖包
├── /src/                               # 源码目录
│   ├── /pages/                         # 页面
│   ├── /components/                    # 公用组件
│   ├── /assets/                        # 图片、字体资源
│   ├── /css/                           # 公用样式
│   ├── /utils/                         # 公用JS模块
│   ├── index.html                      # 首页HTML模版
│   └── index.js                        # 首页入口
├── /config/                            # prerender配置文件
├── /prerender/                         # 自定义prerender逻辑
├── /dist-server/                       # 预渲染产出文件 (后期会进行删除操作)
├── breeze.config.js                    # breeze的配置文件
└── package.json                        # 略
```

### <span id="build">项目打包</span>

| cli 命令                | 说明
|-------------------------|-----------------------------------------------
| breeze-cli start [-p PORT]  | 运行本地调试
| breeze-cli test             | 运行测试代码 (功能待完善)
| breeze-cli build            | 基于配置进行文件打包
| breeze-cli release          | 基于配置进行文件打包正式代码 (功能待完善)


### <span id="test">项目测试</span>

> *测试功能正在开发中*

### <span id="config">配置文件</span>

| 配置项                  | 默认值       						| 说明
|-------------------------|--------------						|-------------------------------------------------
| host                    |  0.0.0.0     						| 调试IP，本地调试使用默认值即可 (windows环境建议修改为localhost)
| port                    |  9527        						| 开发环境端口号
| base                    |  src         						| 代码根目录
| externals               |  {}         						| demo { '$': 'jQuery' }
| build                   |  dist        						| 打包目录，打包后的代码将放置到此处，与 base 同级
| static                  |  [见示例配置](#config_default)   	| 静态资源 CDN 域名设置，**路径结尾包含`/`** 代码中以 `STATIC` 引用, etc.. `console.log(STATIC)`
| api                     |  [见示例配置](#config_default)   	| API 路径设置，**路径结尾不包含`/`** 代码中以 `API` 引用
| globals                 |  [见示例配置](#config_default)      | 更多全局变量设置 (待完善)
| vendor                  |  ['react', 'react-dom'] | 将指定的类库打包到 **vendor-[hash].js**中，建议常用的类库放到此处。此项不包含业务代码，不会经常变动此项，可充分利用缓存优势
| pages                   |  pages         						| 页面目录，默认为 `pages/`，可修改, 支持多 html 模版，详细见示例配置
| components              |  components         				| 页面间共享的组件目录，可修改（非共用组件，放置在当前页面目录即可）
| base64_image_limit      |  1024                				| 对所有小于该大小的图片启用 base64 转码, 默认 10240 (10k)
| prerender               |  false                			| 本工具集成预渲染，可以设置是否开启。开启之后，可以自定义预渲染逻辑
| entry                   |  src/index.js               | webpack单页面的入口配置
| prerender               |  false                      | 开启prerender预渲染

<br/> <b id="config_default">示例配置</b>

```
{
    "host": "0.0.0.0",
  
    "port": "9527",
  
    "base": "src",
  
    "prerender": true, // 是否开启预渲染
  
    "entry": "index.js",

    "components": "components",
  
    // 定义多页面入口
    "pages": {
        "name": "pages", // custom default `page` dir
        // "multi": ""
        "multi": {  // 配置选项则开启多页面配置
             "home": {
                 "entry": "index.js",
                 "template": "template.html"
             },
             "about": {
                 "entry": "index.js",
                 "template": "template.html"
             } 
         }
    },
  
    "build": "dist",
  
    "static": {
        "start"         :   "",                 
        "test"          :   "",
        "pre"           :   "//static.test.com/"，
        "release"       :   "//static.test.com/" 
    },
  
    "api": {  
        "start"       :   "",
        "test"        :   "",
        "pre"         :   "//api.test.com",
        "release"     :   "//api.test.com"
    },
  
    "globals": {}, 
  
    "vendor": ["react", "react-dom"],
  
    "eslint": false,
  
    "transfer_assets": false,
  
    "base64_image_limit": 10240 // 10k
}
```

### <span id="api">命令</span>

| cli 命令                      | 说明
|-------------------------------|----------------------------
| breeze-cli init [name]            | react & react-router (单页面或多页面)
| breeze-cli init-redux [name]      | react & react-router & redux
| breeze-cli init-prerender         | 对项目（单页面或多页面) 开启预渲染，需进入项目目录之后执行
| breeze-cli page [name]            | 创建页面
| breeze-cli component [name]       | 创建组件
| breeze-cli start                  | 运行本地调试
| breeze-cli test                   | 运行测试代码
| breeze-cli build                  | 基于配置文件打包项目文件
| breeze-cli release                | 基于配置文件打包发布文件，压缩，移除 console 日志
| breeze-cli prerender              | 开启预渲染后，执行prerender产出文件和更新模板
| (更多功能正在集成中...)


### <span id="预渲染">开启预渲染</span>

本工具一大优势，集成了预渲染功能，并且可以自定义预渲染逻辑

```
    // 需确保breeze.config.js中开启了prerender选项
    // 在项目目录执行breeze-cli init-prerender
    // breeze-cli prerender
    // breeze-cli start即可看到效果
```
### demo

https://github.com/Little-Breeze/breeze-demo

---
_Source: https://npm.io/package/breeze-cli · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
