soraka

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

Features

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

Coming Soon Features

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

Getting Started

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

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

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

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

## 编译最终文件
$ soraka build

Configuration

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

.sorakarc

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

.sorakarc.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，支持多个入口文件。

"entry": "./app.js"

proxy

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

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

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

define

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

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

alias

配置 webpack 的 resolve.alias 属性。

externals

配置 webpack 的 externals 属性。

html

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

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

env

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