| 1 | # esnext-scripts
|
| 2 |
|
| 3 | Opinionated ESNext application scripts and configurations.
|
| 4 |
|
| 5 | [](https://circleci.com/gh/jimzhan/esnext-scripts)
|
| 6 | [](https://www.npmjs.com/package/esnext-scripts)
|
| 7 | [](https://standardjs.com)
|
| 8 | [](https://github.com/prettier/prettier)
|
| 9 | [](http://commitizen.github.io/cz-cli/)
|
| 10 | [](https://www.npmjs.com/package/esnext-scripts)
|
| 11 |
|
| 12 |
|
| 13 | ## Install
|
| 14 |
|
| 15 | ```shell
|
| 16 | npm install esnext-scripts
|
| 17 | ```
|
| 18 |
|
| 19 | or `yarn`
|
| 20 |
|
| 21 | ```shell
|
| 22 | yarn add esnext-scripts
|
| 23 | ```
|
| 24 |
|
| 25 | ## What?
|
| 26 |
|
| 27 | `esnext-scripts` is set of pre-configured helpers for your next generation Javascript application. With it, you can now fully focus on your valuable implementations instead of playing around with various settings & helpers over and over again. Batteries included:
|
| 28 |
|
| 29 | - Latest EMACScript supports backed by:
|
| 30 | * [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env/)
|
| 31 | * [babel-preset-stage-1](https://babeljs.io/docs/en/babel-preset-stage-1)
|
| 32 | * [babel-preset-react](https://babeljs.io/docs/en/babel-preset-react)
|
| 33 | - A mostly reasonable approach to JavaScript by:
|
| 34 | * [ESLint](https://eslint.org/)
|
| 35 | * [StandardJS Style Guide](https://standardjs.com)
|
| 36 | * [Prettier](https://prettier.io/)
|
| 37 | - Delightful JavaScript Testing with
|
| 38 | * [Jest](https://github.com/facebook/jest)
|
| 39 | * [Enzyme](https://github.com/airbnb/enzyme)
|
| 40 |
|
| 41 |
|
| 42 | ## Why?
|
| 43 |
|
| 44 | > How much time you had spent on configuring your application boilerplate to make it support the "future" JavaScript spec. each time you start a new project?
|
| 45 |
|
| 46 | > How many times you had been confused by the obsolete `babel` settings (plugins, presets) or even worse, your applications got broken?
|
| 47 |
|
| 48 |
|
| 49 | ## How?
|
| 50 |
|
| 51 | ### Available commands
|
| 52 |
|
| 53 |
|
| 54 | - `esnext build <src> <out>` - compile an input directory of modules into an output directory.
|
| 55 | - `esnext exec <script>` - execute a Node.js script with ESNext supports.
|
| 56 | - `esnext format <glob>` - format files find by the given `glob` pattern via `prettier`.
|
| 57 | - `esnext lint [optional-folder]` - start linting with `standardjs` rules set.
|
| 58 | - `esnext test` - start executing your `Jest` test specs.
|
| 59 |
|
| 60 |
|
| 61 | ### Sample Usage
|
| 62 |
|
| 63 | A sample structure of React application folder.
|
| 64 |
|
| 65 | ```
|
| 66 | - src/
|
| 67 | App.jsx
|
| 68 | App.test.jsx
|
| 69 | ```
|
| 70 |
|
| 71 | `App.test.jsx`.
|
| 72 |
|
| 73 | ```javascript
|
| 74 | import React from 'react'
|
| 75 | import { shallow } from 'enzyme'
|
| 76 | import App from './App'
|
| 77 |
|
| 78 | describe('<App />', () => {
|
| 79 | it('renders <App /> component', () => {
|
| 80 | const wrapper = shallow(<App>Application</App>)
|
| 81 | expect(wrapper).toBeTruthy()
|
| 82 | })
|
| 83 | }
|
| 84 | ```
|
| 85 |
|
| 86 | `package.json`.
|
| 87 |
|
| 88 | ```json
|
| 89 | "lint-staged": {
|
| 90 | "**/*.{js,jsx}": [
|
| 91 | "esnext format 'src/**/*.js",
|
| 92 | "esnext lint --fix"
|
| 93 | ]
|
| 94 | },
|
| 95 | "husky": {
|
| 96 | "hooks": {
|
| 97 | "pre-commit": "lint-staged",
|
| 98 | "commit-msg": "commitlint --env HUSKY_GIT_PARAMS"
|
| 99 | }
|
| 100 | },
|
| 101 | "scripts": {
|
| 102 | "lint": "esnext lint",
|
| 103 | "lint:other-folder": "esnext lint other-folder",
|
| 104 | "test": "esnext test"
|
| 105 | },
|
| 106 | ```
|
| 107 |
|
| 108 |
|
| 109 | ### License
|
| 110 |
|
| 111 | > MIT License 2019 © Jim Zhan
|