https://github.com/olahol/reactpack
:package: build your react apps with one command and one `npm i`.
https://github.com/olahol/reactpack
Last synced: 26 days ago
JSON representation
:package: build your react apps with one command and one `npm i`.
- Host: GitHub
- URL: https://github.com/olahol/reactpack
- Owner: olahol
- Archived: true
- Created: 2016-06-02T16:15:11.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-06T15:06:27.000Z (over 8 years ago)
- Last Synced: 2025-03-09T10:49:57.469Z (about 1 month ago)
- Language: JavaScript
- Size: 114 KB
- Stars: 980
- Watchers: 15
- Forks: 36
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-react-components-all - reactpack - Build your react apps with one command and one `npm i`. (Uncategorized / Uncategorized)
- awesome-list - reactpack - Build your react apps with one command and one `npm i`. (Code Design / Boilerplate)
README
# 
[![NPM version][npm-image]][npm-url]
[![Dependency Status][dep-image]][dep-url]
[![js-standard-style][standard-image]][standard-url]
One command to build your React frontend.
## Features
- Unified package, only one `npm i` needed.
- Linting with your `.eslintrc` or with `standard`.
- Smartly merges existing `.babelrc` and `webpack.config.js` into configuration.
- ES6 with Babel presets `react`, `es2015` and `stage-0`.
- PostCSS with `precss` and `autoprefixer`.
- Style extraction into dedicated css bundle.
- Include enviroment variables with an `.env.js` file.
- Automatic index.html creation with `html-webpack-plugin`.
- Source maps for styles and scripts.
- Watch mode (`--watch`).
- Development server mode (`--dev`).
- Toggle optimizations with `uglify` and `cssnano` (`-O`).
## Table of Contents
* [Features](#features)
* [Install](#install)
* [Example](#example)
* [FAQ](#faq)
* [How do I use another linter than `standard`?](#how-do-i-use-another-linter-than-standard)
* [How do I customize index.html?](#how-do-i-customize-indexhtml)
* [How do I add other loaders?](#how-do-i-add-other-loaders)
* [CLI](#cli)
* [Tested on](#tested-on)
* [Contributors](#contributors)
## Install
```
$ npm i reactpack -g
```
or for use in `scripts` section of `package.json`
```
$ npm i reactpack --save-dev
```
## Example
```js
import React, { Component } from 'react'
import { render } from 'react-dom'
require('bootstrap/dist/css/bootstrap.css')
class Example extends Component {
render () {
return
Hello World!
}
}
render(, document.getElementById('react-app'))
```
```javascript
{
...
"scripts": {
"build": "reactpack src/index.js",
},
"dependencies": {
"bootstrap": "^3.3.6",
"react": "^15.1.0",
"react-dom": "^15.1.0",
},
"devDependencies": {
"reactpack": "^0.2.0"
},
...
}
```
## FAQ
##### How do I use another linter than `standard`?
`reactpack` will look for an eslint config (`.eslintrc`, `.eslintrc.json` ...) and if one is present
it will use that one. Make sure that you have all the dependencies installed (plugins etc) to run your linter.
##### How do I customize index.html?
Place an `index.ejs` file in the same directory as your entry script and `reactpack` will use it
for generating html. The default `index.ejs` looks like:
```html
<%= htmlWebpackPlugin.options.title %>
<% if (htmlWebpackPlugin.options.dev) { %>
<% } %>
```
##### How do I add other loaders?
Reactpack merge existing `webpack.config.js` it into its config so for example if
you want to add `less-loader` just have a `webpack.config.js` with:
```js
module.exports = {
module: {
loaders: [
{
test: /\.less$/,
loader: 'style!css!less'
}
]
}
}
```
## CLI
```
Usage: reactpack [options] [path/to/bundle]
Options:
-h, --help output usage information
-V, --version output the version number
-q, --quiet no output
-O, --optimize optimize css and js using minifiers
-w, --watch watch mode, rebuild bundle on file changes
-d, --dev start a dev server with hot module replacement
-p, --port port for dev server (default is 8000)
--standard force standard linting (do not look for eslint config)
--clean delete everything in bundle path before building
--absolute-path use absolute path for assets
--no-source-map don't output source maps for css and js
--no-postcss don't use postcss (autoprefixer and precss)
--no-html don't output an index.html
--no-extract don't extract css into separate bundle
--no-lint turn off linting
--no-env don't try and load .env.js file
--no-inject don't inject bundles into index.html
```
## Tested on
- Windows 7 with node 6 and npm 3
- Ubuntu 12.04 with node 6 and npm 3
- MacOS 10.11 El Capitan with node 5-6 and npm 3
## Contributors
* Ola Holmström (@olahol)
* Tarjei Huse (@tarjei)
* Code Hz (@codehz)
* Erik Huisman (@erikhuisman)
* charlie hield (@stursby)
* Niklas (@nikteg)
* Victor Bjelkholm (@VictorBjelkholm)
[npm-image]: https://img.shields.io/npm/v/reactpack.svg
[npm-url]: https://npmjs.org/package/reactpack
[dep-image]: https://david-dm.org/olahol/reactpack/status.svg
[dep-url]: https://david-dm.org/olahol/reactpack
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg
[standard-url]: https://github.com/feross/standard