{"id":13671340,"url":"https://github.com/sorrycc/roadhog","last_synced_at":"2025-05-15T08:08:47.754Z","repository":{"id":66014378,"uuid":"76338119","full_name":"sorrycc/roadhog","owner":"sorrycc","description":"🐷 Cli tool for creating react apps, configurable version of create-react-app.","archived":false,"fork":false,"pushed_at":"2019-07-15T09:15:03.000Z","size":479,"stargazers_count":2719,"open_issues_count":238,"forks_count":341,"subscribers_count":92,"default_branch":"master","last_synced_at":"2024-10-29T17:48:35.986Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sorrycc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-13T08:21:51.000Z","updated_at":"2024-09-26T02:44:10.000Z","dependencies_parsed_at":"2023-04-04T21:03:26.686Z","dependency_job_id":null,"html_url":"https://github.com/sorrycc/roadhog","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sorrycc%2Froadhog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sorrycc%2Froadhog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sorrycc%2Froadhog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sorrycc%2Froadhog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sorrycc","download_url":"https://codeload.github.com/sorrycc/roadhog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248871207,"owners_count":21175176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:06.687Z","updated_at":"2025-04-14T11:28:36.007Z","avatar_url":"https://github.com/sorrycc.png","language":"JavaScript","readme":"# roadhog\n\n[![NPM version](https://img.shields.io/npm/v/roadhog.svg?style=flat)](https://npmjs.org/package/roadhog)\n[![Build Status](https://img.shields.io/travis/sorrycc/roadhog.svg?style=flat)](https://travis-ci.org/sorrycc/roadhog)\n[![NPM downloads](http://img.shields.io/npm/dm/roadhog.svg?style=flat)](https://npmjs.org/package/roadhog)\n[![Dependencies](https://david-dm.org/sorrycc/roadhog/status.svg)](https://david-dm.org/sorrycc/roadhog)\n\n[查看中文版](./README_zh-cn.md)\n\nRoadhog is a cli tool with `dev`、`build` and `test` commands. It's based on react-dev-utils and is consistent with the experience of create-react-app. You can imagine this is a configurable version of create-react-app.\n\n## Docs\n\n* [2.0 发布日志](https://github.com/sorrycc/blog/issues/55)\n* [Migrate from 1.x](./migrate-from-1.x.md)\n* [1.x docs](https://github.com/sorrycc/roadhog/blob/1.x/README_en-us.md)\n\n## Features\n* 📦 out of the box React application development tools, built-in css-modules, babel, postcss, HMR, etc.\n* 🐠 create-react-app experience\n* 🚨 webpack configuration in JSON format\n* 🔥 mock\n* ✂️ test based on jest, ui test with enzyme\n\n## Getting started\n```bash\n## Install globally or locally\n$ npm i roadhog -g\n\n## Check version\n$ roadhog -v\n2.0.0\n\n## Local development\n$ roadhog dev\n\n## Build\n$ roadhog build\n$ NO_COMPRESS=1 roadhog build\n\n## Test\n$ roadhog test\n```\n\n## Mock\nroadhog dev support mock, configured in  `.roadhogrc.mock.js`.\n\ne.g.\n\n```js\nexport default {\n  // Support type as Object and Array\n  'GET /api/users': { users: [1,2] },\n\n  // Method like GET or POST can be omitted\n  '/api/users/1': { id: 1 },\n\n  // Support for custom functions, the API is the same as express@4\n  'POST /api/users/create': (req, res) =\u003e { res.end('OK'); },\n};\n```\n\n## Use the public directory\n\nFiles in the public directory would be copied to the output directory (by default `./dist`) on the dev and build. So favicon, iconfont, html, html quoted pictures could be stored here.\n\n## Configuration\n\nroadhog's webpack part is based on the af-webpack's implementation. For configuration, create `.webpackrc` in the project root. The format is JSON, e.g.\n\n```js\n{\n  \"externals\": { \"react\": \"window.React\" }\n}\n```\n\nIf you prefer JS configuration, or need to do some programming or abstract judgment, you can use `.webpackrc.js` configuration file, support ES6 syntax, e.g.\n\n```js\nexport default {\n  externals: { react: 'window.React' },\n}\n```\n\nIndex:\n\n* [entry](#entry)\n* [theme](#theme)\n* [define](#define)\n* [externals](#externals)\n* [alias](#alias)\n* [extraResolveExtensions](#extraresolveextensions)\n* [browserslist](#browserslist)\n* [publicPath](#publicpath)\n* [outputPath](#outputpath)\n* [devtool](#devtool)\n* [commons](#commons)\n* [hash](#hash)\n* [html](#html)\n* [disableCSSModules](#disablecssmodules)\n* [disableCSSSourceMap](#disablecsssourcemap)\n* [extraBabelPresets](#extrababelpresets)\n* [extraBabelPlugins](#extrababelplugins)\n* [extraBabelIncludes](#extrababelincludes)\n* [copy](#copy)\n* [proxy](#proxy)\n* [sass](#sass)\n* [manifest](#manifest)\n* [ignoreMomentLocale](#ignoremomentlocale)\n* [disableDynamicImport](#disabledynamicimport)\n* [env](#env)\n\n### entry\n\nSpecify webpack entries, support [glob](https://github.com/isaacs/node-glob) format.\n\nsuppose your project is multipages, wanting files in src/pages as entries. you can do the followings.\n\n```\n\"entry\": \"src/pages/*.js\"\n```\n\n### theme\n\nConfigure the theme, in fact, with less variables. Support both object and string type, the string needs to point to a file which return configurations.\n\ne.g.\n\n```\n\"theme\": {\n  \"@primary-color\": \"#1DA57A\"\n}\n```\n\nor,\n\n```\n\"theme\": \"./theme-config.js\"\n```\n\n### define\n\nPass to code through the webpack's DefinePlugin plugin, the value will automatically be processed with `JSON.stringify`.\n\ne.g.\n\n```js\n\"define\": {\n  \"process.env.TEST\": 1,\n  \"USE_COMMA\": 2,\n}\n```\n\n### externals\n\nConfigure webpack's [externals] (https://webpack.js.org/configuration/externals/) property.\n\ne.g.\n\n```js\n// Don't pack react and react-dom\n\"externals\": {\n  \"react\": \"window.React\",\n  \"react-dom\": \"window.ReactDOM\"\n}\n```\n\n### alias\n\nConfigure webpack's [resolve.alias](https://webpack.js.org/configuration/resolve/#resolve-alias) property.\n\n### extraResolveExtensions\n\nConfigure webpack's [resolve.extensions](https://webpack.js.org/configuration/resolve/#resolve-extensions) property.\n\n### browserslist\n\nConfigure [browserslist](https://github.com/ai/browserslist), works on both babel-preset-env and autoprefixer.\n\ne.g.\n\n```js\n\"browserslist\": [\n  \"\u003e 1%\",\n  \"last 2 versions\"\n]\n```\n\n### publicPath\n\nConfigure webpack's [output.publicPath](https://webpack.js.org/configuration/output/#output-publicpath) property.\n\n### outputPath\n\nConfigure webpack's [output.path](https://webpack.js.org/configuration/output/#output-path) property.\n\n### devtool\n\nConfigure webpack's [devtool](https://webpack.js.org/configuration/devtool/) property.\n\n### commons\n\nConfigure webpack's [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) plugin, the format is Array.\n\ne.g.\n\n```markup\n\"commons\": [\n  {\n    async: '__common',\n    children: true,\n    minChunks(module, count) {\n      if (pageCount \u003c= 2) {\n        return count \u003e= pageCount;\n      }\n      return count \u003e= pageCount * 0.5;\n    },\n  },\n]\n```\n\n### hash\n\nConfiguration to build with hash file name, and it's usually used in conjunction with the [manifest](#manifest).\n\n### html\n\nConfigure [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) plugin.\n\ne.g.\n\n```markup\n\"html\": {\n  \"template\": \"./src/index.ejs\"\n}\n```\n\n### disableCSSModules\n\nDisable [CSS Modules](https://github.com/css-modules/css-modules)，we do not recommend doing this.\n\n### disableCSSSourceMap\n\nDisable generate CSS's SourceMap.\n\n### extraBabelPresets\n\nDefine an additional list of babel presets, the formatt is Array.\n\n### extraBabelPlugins\n\nDefine an additional list of babel plugins, the formatt is Array.\n\n### extraBabelIncludes\n\nDefine an additional list of file matches that need to be transformed with babel, the format is Array.\n\n### copy\n\nDefine a list of files that need to be copied. The format is an array, and the format of the item refers to the configuration of [copy-webpack-plugin] (https://github.com/webpack-contrib/copy-webpack-plugin).\n\ne.g.\n\n```markup\n\"copy\": [\n  {\n    \"from\": \"\",\n    \"to\": \"\"\n  }\n]\n```\n\n### proxy\n\nConfigure the [proxy] (https://webpack.js.org/configuration/dev-server/#devserver-proxy) property of webpack-dev-server.\n\ne.g. proxy requests to other servers,\n\n```markup\n\"proxy\": {\n  \"/api\": {\n    \"target\": \"http://jsonplaceholder.typicode.com/\",\n    \"changeOrigin\": true,\n    \"pathRewrite\": { \"^/api\" : \"\" }\n  }\n}\n```\n\nThen visit `/ api / users` to access the data from [http://jsonplaceholder.typicode.com/users](http://jsonplaceholder.typicode.com/users].\n\n### sass\n\nConfigure the options for [node-sass] (https://github.com/sass/node-sass#options). Note: node-sass and sass-loader dependencies must be installed in the project directory when using sass.\n\n### manifest\n\nConfigure to generate manifest.json, it's option will pass to [https://www.npmjs.com/package/webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plugin).\n\ne.g.\n\n```markup\n\"manifest\": {\n  \"basePath\": \"/app/\"\n}\n```\n\n### ignoreMomentLocale\n\nIgnore moment locale file, used to reduce the size.\n\n### disableDynamicImport\n\nDisable `import ()` to load on demand, but bundle all the files in a single file, implement via [babel-plugin-dynamic-import-node-sync](https://github.com/seeden/babel-plugin-dynamic-import-node-sync).\n\n### env\n\nSet specific options for certain environment. `development` is for dev, and `production` is for build.\n\ne.g.\n\n```js\n\"extraBabelPlugins\": [\"transform-runtime\"],\n\"env\": {\n  \"development\": {\n    \"extraBabelPlugins\": [\"dva-hmr\"]\n  }\n}\n```\n\nThus, extraBabelPlugins in development is `['transform-runtime', 'dva-hmr']`, and `['transform-runtime']` in production.\n\n## Environment Variables\n\nYou can temporarily configure some parameters for environment variables, including:\n\n* `PORT`, default 8000\n* `HOST`, default localhost\n* `ANALYZE`, whether to analyze the output bundle in `roadhog build`\n* `ESLINT`, set `none` disable eslint check\n* `TSLINT`, set `none` disable tslint check\n* `COMPRESS`, set `none` to disable file compressing in `roadhog build`\n* `BROWSER`, set `none` to disable browser open in `roadhog dev`\n\ne.g. start dev server with port 3000,\n\n```bash\n# OS X, Linux\n$ PORT=3000 roadhog dev\n\n# Windows (cmd.exe)\n$ set PORT=3000\u0026\u0026roadhog dev\n\n# Or use cross-env for all platforms\n$ cross-env PORT=3000 roadhog dev\n```\n\n## FAQ\n\n### Why is it called roadhog ?\n\nroadhog is a hero from overwatch, just like [dva](https://github.com/dvajs/dva).\n\n\u003cimg src=\"https://gw.alipayobjects.com/zos/rmsportal/nnuuSFhDFUOfvYSRyvBh.png\" width=\"405\" height=\"411\" /\u003e\n\n## LICENSE\n\nMIT\n","funding_links":[],"categories":["JavaScript","前端 - broswer端"],"sub_categories":["工具"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsorrycc%2Froadhog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsorrycc%2Froadhog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsorrycc%2Froadhog/lists"}