https://github.com/matthisk/es6console
🔮 Play with ECMAScript compilers
https://github.com/matthisk/es6console
compilers ecmascript es6 javascript
Last synced: 8 months ago
JSON representation
🔮 Play with ECMAScript compilers
- Host: GitHub
- URL: https://github.com/matthisk/es6console
- Owner: matthisk
- License: mit
- Created: 2015-05-12T08:03:46.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-15T10:51:11.000Z (almost 8 years ago)
- Last Synced: 2025-03-26T01:41:33.345Z (9 months ago)
- Topics: compilers, ecmascript, es6, javascript
- Language: JavaScript
- Homepage: https://es6console.com
- Size: 2.06 MB
- Stars: 152
- Watchers: 4
- Forks: 25
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ES6Console.com
This is the main repository of es6console.com. A tool for playing around with ECMAScript 6 to 5 transformers.
## Table of Contents
1. [Features](#features)
1. [Requirements](#requirements)
1. [Application Structure](#application-structure)
1. [Development](#development)
1. [Developer Tools](#developer-tools)
1. [Routing](#routing)
1. [Testing](#testing)
1. [Deployment](#deployment)
1. [Build System](#build-system)
1. [Configuration](#configuration)
1. [Globals](#globals)
1. [Styles](#styles)
1. [Server](#server)
1. [Production Optimization](#production-optimization)
## Features
* [serverless](http://serverless.com)
* [react](https://github.com/facebook/react)
* [redux](https://github.com/rackt/redux)
* [react-router](https://github.com/rackt/react-router)
* [webpack](https://github.com/webpack/webpack)
* [babel](https://github.com/babel/babel)
* [eslint](http://eslint.org)
## Requirements
* node `^4.5.0`
* yarn `^0.17.0` or npm `^3.0.0`
### Install from source
First, clone the project:
```bash
$ git clone https://github.com/matthisk/es6console.git
$ cd
```
Then install dependencies and check to see it works. It is recommended that you use [Yarn](https://yarnpkg.com/) for deterministic installs, but `npm install` will work just as well.
```bash
$ npm install # Install project dependencies
$ npm run dev # Compile and launch (same as `npm start`)
```
While developing, you will probably rely mostly on `npm dev`; however, there are additional scripts at your disposal:
|`npm run `|Description|
|------------------|-----------|
|`start`|Serves your app at `localhost:8000`. HMR will be enabled in development.|
|`compile`|Compiles the application to disk (`~/dist` by default).|
|`dev`|Same as `npm start`, but enables nodemon for the server as well.|
|`test`|Runs unit tests with Karma and generates a coverage report.|
|`test:dev`|Runs Karma and watches for changes to re-run tests; does not generate coverage reports.|
|`deploy`|Runs linter, tests, and then, on success, compiles your application to disk.|
|`deploy:staging`|Same as `deploy` but overrides `NODE_ENV` to "development".|
|`deploy:prod`|Same as `deploy` but overrides `NODE_ENV` to "production".|
|`deploy_lambda`|Same as `deploy_lambda` but overrides `NODE_ENV` to "production".|
|`deploy_lambda:staging`|Same as `deploy_lambda` but overrides `NODE_ENV` to "production".|
|`deploy_lambda:prod`|Same as `deploy_lambda` but overrides `NODE_ENV` to "production".|
|`lint`|Lint all `.js` files.|
|`lint:fix`|Lint and fix all `.js` files. [Read more on this](http://eslint.org/docs/user-guide/command-line-interface.html#fix).|
## Application Structure
```
.
├── bin # Build/Start scripts
├── config # Project and build configurations
├── public # Static public assets (not imported anywhere in source code)
├── server # Express application that provides webpack middleware
│ └── main.js # Development Server application entry point
├── src # Application source code
│ ├── index.html # Main HTML page container for app
│ ├── main.js # Application bootstrap and rendering
│ ├── components # Global Reusable Presentational Components
│ ├── containers # Global Reusable Container Components
│ ├── layouts # Components that dictate major page structure
│ │ └── CoreLayout.js # CoreLayout which receives children for each route
│ │ └── CoreLayout.scss # Styles related to the CoreLayout
│ │ └── index.js # Main file for layout
│ ├── routes # Main route definitions and async split points
│ │ ├── index.js # Bootstrap main application routes with store
│ │ ├── Home # Fractal route
│ │ │ ├── index.js # Route definitions and async split points
│ │ │ ├── assets # Assets required to render components
│ │ │ ├── components # Presentational React Components
│ │ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── store # Redux-specific pieces
│ │ ├── createStore.js # Create and instrument redux store
│ │ └── reducers.js # Reducer registry and injection
│ └── styles # Application-wide styles (generally settings)
├── lambda # AWS Lambdas
└── tests # Unit tests
```
## Development
#### Developer Tools
## Testing
To add a unit test, simply create a `.spec.js` file anywhere in `~/tests`. Karma will pick up on these files automatically, and Mocha and Chai will be available within your test without the need to import them. Coverage reports will be compiled to `~/coverage` by default. If you wish to change what reporters are used and where reports are compiled, you can do so by modifying `coverage_reporters` in `~/config/project.config.js`.
## Deployment
ES6Console is hosted on Amazon S3. When running `npm run deploy` the `~/dist` folder is synced up to the s3 bucket configured in `config/environment.config.js`. The website requires several backend scripts which are hosted on AWS Lambda using the serverless framework. When running `npm run deploy_lambda` these lambdas are automatically deployed.
### Configuration
Default project configuration can be found in `~/config/project.config.js`. Here you'll be able to redefine your `src` and `dist` directories, adjust compilation settings, tweak your vendor dependencies, and more. For the most part, you should be able to make changes in here **without ever having to touch the actual webpack build configuration**.
If you need environment-specific overrides (useful for dynamically setting API endpoints, for example), you can edit `~/config/environments.config.js` and define overrides on a per-NODE_ENV basis. There are examples for both `development` and `production`, so use those as guidelines. Here are some common configuration options:
|Key|Description|
|---|-----------|
|`dir_src`|application source code base path|
|`dir_dist`|path to build compiled application to|
|`server_host`|hostname for the Express server|
|`server_port`|port for the Express server|
|`compiler_devtool`|what type of source-maps to generate (set to `false`/`null` to disable)|
|`compiler_vendor`|packages to separate into to the vendor bundle|
Webpack is configured to make use of [resolve.root](http://webpack.github.io/docs/configuration.html#resolve-root), which lets you import local packages as if you were traversing from the root of your `~/src` directory. Here's an example:
```js
// current file: ~/src/views/some/nested/View.js
// What used to be this:
import SomeComponent from '../../../components/SomeComponent'
// Can now be this:
import SomeComponent from 'components/SomeComponent' // Hooray!
```
### Globals
These are global variables available to you anywhere in your source code. If you wish to modify them, they can be found as the `globals` key in `~/config/project.config.js`. When adding new globals, make sure you also add them to `~/.eslintrc`.
|Variable|Description|
|---|---|
|`process.env.NODE_ENV`|the active `NODE_ENV` when the build started|
|`__DEV__`|True when `process.env.NODE_ENV` is `development`|
|`__PROD__`|True when `process.env.NODE_ENV` is `production`|
|`__TEST__`|True when `process.env.NODE_ENV` is `test`|
### Styles
Both `.scss` and `.css` file extensions are supported out of the box. After being imported, styles will be processed with [PostCSS](https://github.com/postcss/postcss) for minification and autoprefixing, and will be extracted to a `.css` file during production builds.
### Production Optimization
Babel is configured to use [babel-plugin-transform-runtime](https://www.npmjs.com/package/babel-plugin-transform-runtime) so transforms aren't inlined. In production, webpack will extract styles to a `.css` file, minify your JavaScript, and perform additional optimizations such as module deduplication.