# heisenberg-scripts
> Heisenberg is a modern build setup, inspired by [Create react app](https://github.com/facebookincubator/create-react-app/).
Latest version **0.3.13** (published 2018-10-24) · GPL-3.0 license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install heisenberg-scripts
pnpm add heisenberg-scripts
yarn add heisenberg-scripts
bun add heisenberg-scripts
```
Provides the command `heisenberg-scripts`.
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.3.13 |
| Published | 2018-10-24 |
| First published | 2017-07-19 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 47 |
| Unpacked size | 52.3 KB |
| Known vulnerabilities | 0 (+28 in 8 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | walbo |
## Links
- npm: https://www.npmjs.com/package/heisenberg-scripts
- Repository: https://github.com/DekodeInteraktiv/heisenberg
- Homepage: https://github.com/DekodeInteraktiv/heisenberg#readme
- Issues: https://github.com/DekodeInteraktiv/heisenberg/issues
- npm.io page: https://npm.io/package/heisenberg-scripts
## Dependencies (47)
- [svgo](https://npm.io/package/svgo.md) 1.0.5
- [chalk](https://npm.io/package/chalk.md) 2.4.1
- [dotenv](https://npm.io/package/dotenv.md) 6.0.0
- [eslint](https://npm.io/package/eslint.md) 4.19.1
- [lodash](https://npm.io/package/lodash.md) 4.17.10
- [webpack](https://npm.io/package/webpack.md) 3.12.0
- [filesize](https://npm.io/package/filesize.md) 3.6.1
- [fs-extra](https://npm.io/package/fs-extra.md) 6.0.1
- [gzip-size](https://npm.io/package/gzip-size.md) 4.1.0
- [node-sass](https://npm.io/package/node-sass.md) 4.9.0
- [stylelint](https://npm.io/package/stylelint.md) 9.2.1
- [validator](https://npm.io/package/validator.md) 10.3.0
- [css-loader](https://npm.io/package/css-loader.md) 0.28.11
- [each-async](https://npm.io/package/each-async.md) 1.1.1
- [strip-ansi](https://npm.io/package/strip-ansi.md) 4.0.0
- [@babel/core](https://npm.io/package/@babel/core.md) 7.0.0-beta.49
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) 4.0.0
- [cross-spawn](https://npm.io/package/cross-spawn.md) 6.0.5
- [file-loader](https://npm.io/package/file-loader.md) 1.1.11
- [sass-loader](https://npm.io/package/sass-loader.md) 7.0.3
- [autoprefixer](https://npm.io/package/autoprefixer.md) 8.6.1
- [babel-eslint](https://npm.io/package/babel-eslint.md) 8.2.3
- [babel-loader](https://npm.io/package/babel-loader.md) 8.0.0-beta.3
- [browser-sync](https://npm.io/package/browser-sync.md) 2.23.7
- [cache-loader](https://npm.io/package/cache-loader.md) 1.2.2
- [style-loader](https://npm.io/package/style-loader.md) 0.21.0
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) 4.2.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) 2.0.0
- [sockjs-client](https://npm.io/package/sockjs-client.md) 1.1.5
- [postcss-loader](https://npm.io/package/postcss-loader.md) 2.1.5
- [detect-port-alt](https://npm.io/package/detect-port-alt.md) 1.1.6
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) 5.0.1
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) 7.0.0-beta.49
- [recursive-readdir](https://npm.io/package/recursive-readdir.md) 2.2.2
- [@babel/preset-flow](https://npm.io/package/@babel/preset-flow.md) 7.0.0-beta.49
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 2.11.2
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.12.0
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.49.3
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 3.3.1
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) 1.2.5
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 1.3.2
- [stylelint-webpack-plugin](https://npm.io/package/stylelint-webpack-plugin.md) 0.10.5
- [unminified-webpack-plugin](https://npm.io/package/unminified-webpack-plugin.md) 1.4.2
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) 3.0.2
- [stylelint-config-heisenberg](https://npm.io/package/stylelint-config-heisenberg.md) ^0.1.7
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.1.2
- [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) 7.0.0-beta.49
## Recent versions
- 0.3.13 (latest) — 2018-10-24
- 1.0.0-beta.4 (next) — 2018-12-04
- 0.3.0-beta.11 (beta) — 2018-03-17
- 0.3.0-beta.0 (alpha) — 2018-02-22
- 1.0.0-beta.3 — 2018-12-04
- 1.0.0-beta.2 — 2018-12-04
- 1.0.0-beta — 2018-12-04
- 0.3.12 — 2018-09-19
- 0.3.11 — 2018-09-18
- 0.3.10 — 2018-06-08
- 0.3.9 — 2018-05-29
- 0.3.8 — 2018-04-29
- 0.3.7 — 2018-04-28
- 0.3.6 — 2018-04-11
- 0.3.6-1 — 2018-04-10
- … 22 more at https://npm.io/package/heisenberg-scripts/versions
## README
# Heisenberg
Heisenberg is a modern build setup, inspired by [Create react app](https://github.com/facebookincubator/create-react-app/).
Heisenberg works on macOS, Windows, and Linux.
If something doesn’t work please [file an issue](https://github.com/DekodeInteraktiv/heisenberg/issues/new).
## Available Scripts
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.
To run the development task it is required to define the [`proxy`](#proxy)
field in `package.json`.
### `yarn build`
Builds the app for production to the `dist` folder.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
### `yarn icons`
Builds a php icon file.
## Configuration
### Loading the configuration object
Finding and loading of your configuration object is done with [cosmiconfig](https://github.com/davidtheclark/cosmiconfig).
Starting from the current working directory, it will look for the following
possible sources, in this order:
- a `heisenberg` property in `package.json`
- a `.heisenbergrc` file
- a `heisenberg.config.js` file exporting a JS object
The `.heisenbergrc` file (without extension) can be in JSON or YAML format. Alternately, you can add a filename extension to designate JSON, YAML, or JS format: `.heisenbergrc.json`, `.heisenbergrc.yaml`, `.heisenbergrc.yml`, `.heisenbergrc.js`. You may want to use an extension so that your text editor can better interpret the file, and help with syntax checking and highlighting.
Once one of these is found and parsed, the search will stop and that object will be used.
### The configuration object
The configuration object can have the following properties.
#### `build`
Build determine how files should be build.
```json
"build": {
"commonsChunkPlugin": true,
"dest": "dist",
"hashFilenames": true,
"manifest": true,
}
```
#### `icons`
Build determine how the icon file should be build.
```json
"icons": {
"package": "Heisenberg",
"name": "heisenberg",
"src": "src/icons",
"dest": "inc/icons.php",
"options": {
"plugins": [
{ "removeAttrs": {} },
{ "removeDimensions": true },
{ "removeEmptyAttrs": false },
{ "removeTitle": true },
{ "removeViewBox": false }
]
}
}
```
### Proxy
The development mode is proxying an existing vhost. It will wrap your vhost
with a proxy URL to view your site.
To define the proxy add a `proxy` field to your `package.json`, for example:
```json
"proxy": "http://local-url.test",
```
You can overwrite the proxy defined in `package.json` by using the environment
variable `HEISENBERG_PROXY`.
## Editor style
In WordPress you can create a separate TinyMCE editor style, but WordPress does
not need this front-end, so you don't want to add this to the entry key. To
create a editor file on `build` add this to your `package.json`:
```json
"editor": "./src/editor.scss",
```
## Using Global Variables
When you include a script in the HTML file that defines global variables and
try to use one of these variables in the code, the linter will complain because
it cannot see the definition of the variable.
You can avoid this by reading the global variable explicitly from the `window`
object, for example:
```js
const $ = window.$;
```
This makes it obvious you are using a global variable intentionally rather than
because of a typo.
Alternatively, you can force the linter to ignore any line by adding
`// eslint-disable-line` after it.
## Custom linting rules
Heisenberg comes with a default set of [stylelint](https://stylelint.io/) and
[ESLint](https://eslint.org/) rules. These can however be overwritten in your
project. To create your own config create a `.stylelintrc.js` or `.eslintrc.js`
in the same folder your `package.json` file exists. Heisenberg will now use
these files when linting your scss/js code.
## Adding Flow
Flow is a static type checker that helps you write code with fewer bugs. Check
out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb)
if you are new to this concept.
Recent versions of [Flow](http://flowtype.org/) work with Heisenberg projects
out of the box.
To add Flow to a Heisenberg project, follow these steps:
1. Run `yarn add --dev flow-bin`.
2. Add `"flow": "flow"` to the `scripts` section of your `package.json`.
3. Run `yarn flow -- init` to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory.
4. Add `// @flow` to any files you want to type check (for example, to `src/main.js`).
Now you can run `yarn flow` to check the files for type errors.
To learn more about Flow, check out [its documentation](https://flowtype.org/).
---
_Source: https://npm.io/package/heisenberg-scripts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._