npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lidakai/roadhog

v2.5.0-beta.2

Published

Cli tool for creating react apps, configurable version of create-react-app.

Downloads

3

Readme

roadhog

NPM version Build Status NPM downloads Dependencies

查看中文版

Roadhog is a cli tool with devbuild 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.

Docs

Features

  • 📦 out of the box React application development tools, built-in css-modules, babel, postcss, HMR, etc.
  • 🐠 create-react-app experience
  • 🚨 webpack configuration in JSON format
  • 🔥 mock
  • ✂️ test based on jest, ui test with enzyme

Getting started

## Install globally or locally
$ npm i roadhog -g

## Check version
$ roadhog -v
2.0.0

## Local development
$ roadhog dev

## Build
$ roadhog build
$ NO_COMPRESS=1 roadhog build

## Test
$ roadhog test

Mock

roadhog dev support mock, configured in .roadhogrc.mock.js.

e.g.

export default {
  // Support type as Object and Array
  'GET /api/users': { users: [1,2] },

  // Method like GET or POST can be omitted
  '/api/users/1': { id: 1 },

  // Support for custom functions, the API is the same as express@4
  'POST /api/users/create': (req, res) => { res.end('OK'); },
};

Use the public directory

Files 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.

Configuration

roadhog'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.

{
  "externals": { "react": "window.React" }
}

If 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.

export default {
  externals: { react: 'window.React' },
}

Index:

entry

Specify webpack entries, support glob format.

suppose your project is multipages, wanting files in src/pages as entries. your can do the followings.

"entry": "src/pages/*.js"

theme

Configure the theme, in fact, with less variables. Support both object and string type, the string needs to point to a file which return configurations.

e.g.

"theme": {
  "@primary-color": "#1DA57A"
}

or,

"theme": "./theme-config.js"

define

Pass to code through the webpack's DefinePlugin plugin, the value will automatically be processed with JSON.stringify.

e.g.

"define": {
  "process.env.TEST": 1,
  "USE_COMMA": 2,
}

externals

Configure webpack's [externals] (https://webpack.js.org/configuration/externals/) property.

e.g.

// Don't pack react and react-dom
"externals": {
  "react": "window.React",
  "react-dom": "window.ReactDOM"
}

alias

Configure webpack's resolve.alias property.

extraResolveExtensions

Configure webpack's resolve.extensions property.

browserslist

Configure browserslist, works on both babel-preset-env and autoprefixer.

e.g.

"browserslist": [
  "> 1%",
  "last 2 versions"
]

publicPath

Configure webpack's output.publicPath property.

outputPath

Configure webpack's output.path property.

devtool

Configure webpack's devtool property.

commons

Configure webpack's CommonsChunkPlugin plugin, the format is Array.

e.g.

"commons": [
  {
    async: '__common',
    children: true,
    minChunks(module, count) {
      if (pageCount <= 2) {
        return count >= pageCount;
      }
      return count >= pageCount * 0.5;
    },
  },
]

hash

Configuration to build with hash file name, and it's usually used in conjunction with the manifest.

html

Configure html-webpack-plugin plugin.

e.g.

"html": {
  "template": "./src/index.ejs"
}

disableCSSModules

Disable CSS Modules,we do not recommend doing this.

disableCSSSourceMap

Disable generate CSS's SourceMap.

extraBabelPresets

Define an additional list of babel presets, the formatt is Array.

extraBabelPlugins

Define an additional list of babel plugins, the formatt is Array.

extraBabelIncludes

Define an additional list of file matches that need to be transformed with babel, the format is Array.

copy

Define 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).

e.g.

"copy": [
  {
    "from": "",
    "to": ""
  }
]

proxy

Configure the [proxy] (https://webpack.js.org/configuration/dev-server/#devserver-proxy) property of webpack-dev-server.

e.g. proxy requests to other servers,

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

Then visit / api / users to access the data from [http://jsonplaceholder.typicode.com/users](http://jsonplaceholder.typicode.com/users].

sass

Configure 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.

manifest

Configure to generate manifest.json, it's option will pass to https://www.npmjs.com/package/webpack-manifest-plugin.

e.g.

"manifest": {
  "basePath": "/app/"
}

ignoreMomentLocale

Ignore moment locale file, used to reduce the size.

disableDynamicImport

Disable import () to load on demand, but bundle all the files in a single file, implement via babel-plugin-dynamic-import-node-sync.

env

Set specific options for certain environment. development is for dev, and production is for build.

e.g.

"extraBabelPlugins": ["transform-runtime"],
"env": {
  "development": {
    "extraBabelPlugins": ["dva-hmr"]
  }
}

Thus, extraBabelPlugins in development is ['transform-runtime', 'dva-hmr'], and ['transform-runtime'] in production.

Environment Variables

You can temporarily configure some parameters for environment variables, including:

  • PORT, default 8000
  • HOST, default localhost
  • ANALYZE, whether to analyze the output bundle in roadhog build
  • ESLINT, set none disable eslint check
  • TSLINT, set none disable tslint check
  • COMPRESS, set none to disable file compressing in roadhog build
  • BROWSER, set none to disable browser open in roadhog dev

e.g. start dev server with port 3000,

# OS X, Linux
$ PORT=3000 roadhog dev

# Windows (cmd.exe)
$ set PORT=3000&&roadhog dev

# Or use cross-env for all platforms
$ cross-env PORT=3000 roadhog dev

FAQ

Why is it called roadhog ?

roadhog is a hero from overwatch, just like dva.

LICENSE

MIT