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
.sorakarc.js
moduleexports = 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
。