soraka/README.md

Soraka is a React packaging tool for dcloud.

## soraka

`soraka` 在英雄联盟里面一名强大的持续补血奶妈型辅助，和这个工具的定位一样，是一个强大的 React 开发流程打包工具。

## Features

- 🎲 在无配置下开箱即用
- 🎮 支持 JSON 和 JS 模块配置文件
- 🥇 支持 ES6 以及 TypeScript，同时支持 postcss / less / sass / stylus
- ⛑ 覆盖前端项目初始化、本地调试、编译完整流程
- 👾 符合 CDC 团队内前端开发规范

### Coming Soon Features

- 🚀 mock 数据
- 🎡 jest 测试支持
- 🚧 ESLint & TSLint 支持

## Getting Started

```shell
## 全局安装 soraka
$ npm i soraka -g

## 查看当前版本号
$ soraka -v

## 初始化项目文件夹
$ soraka init

## 本地开发环境调试
$ soraka serve

## 编译最终文件
$ soraka build
```

## Configuration

soraka 支持 JSON 和 JS 两种配置方式，用户可以根据需要选择适合自己项目的配置方式。使用 JSON 配置方式则在根目录下创建 `.sorakarc` 配置文件，使用 JS 配置方式则在根目录下创建 `.sorakarc.js` 配置文件。

### .sorakarc

```json
{
  "entry": "./app.js",
  "proxy": {
    "/api": {
      "target": "http://example.com/",
      "changeOrigin": true,
      "pathRewrite": { "^/api": "/projectA/api" }
    }
  },
  "env": {
    "development": {
      "define": {
        "__PUBLIC_PATH__": "/"
      }
    }
  }
}
```

### .sorakarc.js

```js
module.exports = {
  entry: "./app.js",
  proxy: {
    "/api": {
      target: "http://example.com/",
      changeOrigin: true,
      pathRewrite: { "^/api": "/projectA/api" }
    }
  },
  env: {
    development: {
      define: {
        "__PUBLIC_PATH__": "/"
      }
    }
  }
}
```

#### port

本地开发环境的端口，默认端口为 `10086`。

#### autoOpenBrowser

顾名思义，这个选项控制在启动本地开发环境之后是否打开调试地址。

#### entry

指定 webpack 的入口文件，路径相对于 `path/src`，支持多个入口文件。

```js
"entry": "./app.js"
```

#### proxy

使用 `http-proxy-middleware` 配置本地开发环境的代理，可以代理线上的接口。

```js
"proxy": {
  "/api": {
    "target": "http://example.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api": "/projectA/api" }
  }
}
```

此时访问本地 `/api` 会将请求代理到 `http://example.com/projectA/api`。

#### define

通过 webpack 的 DefinePlugin 传递给代码，值会自动做 `JSON.stringify` 处理。 比如：

```js
"define": {
  "__PUBLIC_PATH__": "/path"
}
```

#### alias

配置 webpack 的 [resolve.alias](https://webpack.js.org/configuration/resolve/#resolve-alias) 属性。

#### externals

配置 webpack 的 [externals](https://webpack.js.org/configuration/externals/) 属性。 

#### html

配置 `htmlWebpackPlugin` 插件的参数，以下为默认参数配置：

```js
{
  "filename": "index.html",
  "template": "path/src/index.html",
  "inject": true
}
```

#### env

根据不同的环境使用不同的配置，`soraka serve` 会使用 `config.env.development` 的配置覆盖 `config` 的配置，`soraka build` 则会使用 `config.env.production`。