├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .nvmrc ├── .stylelintrc ├── README.md ├── linters ├── css │ └── custom-stylelint-config-standard.js └── js │ ├── best-practices.js │ ├── errors.js │ ├── es6.js │ ├── imports.js │ ├── index.js │ ├── node.js │ ├── strict.js │ ├── style.js │ └── variables.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── components │ ├── h1.js │ └── h3.css ├── index.css ├── index.html ├── index.js └── static │ ├── cssTestImage.png │ └── password.jpg └── webpack.config.babel.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["babel-root-import", { "rootPathSuffix": "src" }], 4 | ["lodash"], 5 | "transform-decorators-legacy", 6 | "transform-class-properties", 7 | "transform-es2015-modules-commonjs" 8 | ], 9 | "presets": [ 10 | [ 11 | "env", { 12 | "modules": false, 13 | "useBuiltIns": true, 14 | "targets": { 15 | "browsers": ["> 0.5%","last 3 versions"] 16 | } 17 | } 18 | ], 19 | "react", 20 | "stage-0" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 4 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaFeatures": { 4 | "jsx": true, 5 | "modules": true 6 | } 7 | }, 8 | "parser": "babel-eslint", 9 | "env": { 10 | "browser": true, 11 | "node": true 12 | }, 13 | "extends": ["./linters/js/index.js"], 14 | "plugins": ["react"], 15 | "rules": { 16 | "react/jsx-uses-react": 2, 17 | "react/jsx-uses-vars": 2, 18 | "react/react-in-jsx-scope": 2, 19 | "react/jsx-no-duplicate-props": 2, 20 | "react/jsx-no-undef": 2, 21 | "react/no-unknown-property": 2, 22 | "react/require-render-return": 2, 23 | "react/jsx-wrap-multilines": 2, 24 | "react/jsx-pascal-case": 2, 25 | "react/jsx-first-prop-new-line": [2], 26 | "react/jsx-max-props-per-line": [2, { "when": "always", "maximum": 2 }], 27 | "react/jsx-closing-bracket-location": 2, 28 | "react/jsx-equals-spacing": [2, "never"], 29 | "react/jsx-indent-props": [2, 4], 30 | "react/jsx-tag-spacing": [2,{"afterOpening": "allow", "closingSlash":"never", "beforeSelfClosing":"always"}], 31 | "react/jsx-sort-props": [2, {"ignoreCase": true }] 32 | } 33 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Don't check auto-generated stuff into git 2 | node_modules 3 | build 4 | 5 | # Cruft 6 | .DS_Store 7 | npm-debug.log 8 | *.log* -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 8.6.0 -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./linters/css/custom-stylelint-config-standard.js", 3 | "plugins": [ 4 | "stylelint-order" 5 | ], 6 | "rules": { 7 | "color-hex-case": "upper", 8 | "string-quotes": "single", 9 | "font-family-name-quotes": "always-where-recommended", 10 | "selector-pseudo-class-no-unknown": [ 11 | true, { 12 | "ignorePseudoClasses": [ 13 | "global" 14 | ] 15 | } 16 | ], 17 | "order/properties-alphabetical-order": true, 18 | "property-no-unknown": [ 19 | true, { 20 | "ignoreProperties": [ 21 | "composes" 22 | ] 23 | } 24 | ], 25 | "indentation": 4 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-app-dawn 2 | 3 | It is likley the case that using one of the boilerplates list below is more than adequite for the average developer working on an average React app. 4 | 5 | * [http://reactboilerplate.com](http://reactboilerplate.com) 6 | * [redux-easy-boilerplate](https://github.com/anorudes/redux-easy-boilerplate) 7 | 8 | This isn't a slight of the boilerplates or average developers. Both get the job done just fine in most situations. 9 | 10 | However, a time will come when knowing the details of all aspects of a development stack will be required. When this happens you'll need something that is more boilerplate and less application seed. That is React App Dawn. 11 | 12 | ## Installation: 13 | 14 | 1\. Install Node (v7.0.0) & npm (Use [NVM](https://github.com/creationix/nvm) to run v7.0.0 or install [latest Node/npm](https://nodejs.org/en/)) 15 | 16 | 2\. Install global npm packages. Run from a terminal: 17 | 18 | `$ npm i webpack-dev-server@2.1.0-beta.9 webpack@2.1.0-beta.25 eslint stylelint browser-sync rimraf -g` 19 | 20 | 3\. Install local npm packages. Download this repo, `cd` into the repo directory from a terminal and run: 21 | 22 | `$ npm install` 23 | 24 | 4\. Start up a sever and server the hello world app. Run: 25 | 26 | `$ npm run start:dev` 27 | 28 | (This will open the app up in your default web browser at localhost:8080) 29 | 30 | 31 | ## npm CLI scripts: 32 | 33 | | `npm run [name:name]` |Description (read comments in package.json for more details)| 34 | |------------------|-----------| 35 | |`npm run start:dev`|Start webpack dev server, serve `src` directory at localhost:8080 using hot reloading| 36 | |`npm run build`|Create a build version (bundle, lint, minify etc..) of `src`, place that in the `build` directory| 37 | |`npm run start:prod`|Start browser-sync, serve `build` directory at localhost:3000| 38 | |`npm run lint:js`|lint all js files in `src` directory| 39 | |`npm run lint:css`|lint all css file sin `src` directory| 40 | 41 | ## Broad description of tools used (including implementation deails): 42 | 43 | #### Node Version Manager 44 | 45 | * [Node Version Manager](https://github.com/creationix/nvm) is used to manage which version of node is used for this app. 46 | * the [`.nvmrc`](.nvmrc) defines the current version of node. 47 | 48 | #### Webpack 2 49 | 50 | * Webpack 2 is used to take es2015 modules and translate them into a chunked format that can run in web browsers. 51 | * The configuration file for webpack is [webpack.config.babel.js](webpack.config.babel.js). 52 | * By using babel in the name of the file the file, [webpack.config.babel.js](webpack.config.babel.js), it will be babalized before running. 53 | 54 | #### JS via Babel 55 | 56 | * Webpack uses Babel to transform [latest](http://babeljs.io/docs/plugins/preset-latest/), [stage0](http://babeljs.io/docs/plugins/preset-stage-0/), and [react](http://babeljs.io/docs/plugins/preset-react/) code to ES5 code. 57 | 58 | #### Polyfill Browser DOM and JS features 59 | 60 | * The [`index.html`](src/index.html) page uses polyfill.io to fill any [missing modern browser features](https://polyfill.io/v2/docs/features/) (e.g. DOM & JS) 61 | 62 | #### Linting 63 | 64 | * Use [eslint](http://eslint.org/) and [stylelint](http://stylelint.io/) linters, configured from files found in `linters` directory. 65 | 66 | #### CSS 67 | 68 | * Use [postCSS](http://postcss.org/), [nextCSS](http://cssnext.io/), and [CSS Modules](https://github.com/css-modules/css-modules) 69 | 70 | ## Conventions used: 71 | 72 | * Keep webpack config to a small single file that deals with both dev and production. 73 | * Own the JavaScript and CSS linter rules (starting point taken from [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) and [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)) 74 | * Don't place unecessary configurations in package.json that can be contained in there own configuration file (e.g. .babelrc, .nvmrc, .eslintrc, .stylelintrc). 75 | * Linting happens during development in the developers editor and at build time. 76 | -------------------------------------------------------------------------------- /linters/css/custom-stylelint-config-standard.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | 'at-rule-empty-line-before': ['always', { 4 | except: [ 5 | 'blockless-after-same-name-blockless', 6 | 'first-nested' 7 | ], 8 | ignore: ['after-comment'] 9 | }], 10 | 'at-rule-name-case': 'lower', 11 | 'at-rule-name-space-after': 'always-single-line', 12 | 'at-rule-semicolon-newline-after': 'always', 13 | 'block-closing-brace-empty-line-before': 'never', 14 | 'block-closing-brace-newline-after': 'always', 15 | 'block-closing-brace-newline-before': 'always-multi-line', 16 | 'block-closing-brace-space-before': 'always-single-line', 17 | 'block-no-empty': true, 18 | 'block-opening-brace-newline-after': 'always-multi-line', 19 | 'block-opening-brace-space-after': 'always-single-line', 20 | 'block-opening-brace-space-before': 'always', 21 | 'color-hex-case': 'lower', 22 | 'color-hex-length': 'short', 23 | 'color-no-invalid-hex': true, 24 | 'comment-empty-line-before': ['always', { 25 | except: ['first-nested'], 26 | ignore: ['stylelint-commands'] 27 | }], 28 | 'comment-no-empty': true, 29 | 'comment-whitespace-inside': 'always', 30 | 'custom-property-empty-line-before': ['always', { 31 | except: [ 32 | 'after-custom-property', 33 | 'first-nested' 34 | ], 35 | ignore: [ 36 | 'after-comment', 37 | 'inside-single-line-block' 38 | ] 39 | }], 40 | 'declaration-bang-space-after': 'never', 41 | 'declaration-bang-space-before': 'always', 42 | 'declaration-block-no-duplicate-properties': [true, { 43 | ignore: ['consecutive-duplicates-with-different-values'] 44 | }], 45 | 'declaration-block-no-redundant-longhand-properties': true, 46 | 'declaration-block-no-shorthand-property-overrides': true, 47 | 'declaration-block-semicolon-newline-after': 'always-multi-line', 48 | 'declaration-block-semicolon-space-after': 'always-single-line', 49 | 'declaration-block-semicolon-space-before': 'never', 50 | 'declaration-block-single-line-max-declarations': 1, 51 | 'declaration-block-trailing-semicolon': 'always', 52 | 'declaration-colon-newline-after': 'always-multi-line', 53 | 'declaration-colon-space-after': 'always-single-line', 54 | 'declaration-colon-space-before': 'never', 55 | 'declaration-empty-line-before': ['always', { 56 | except: [ 57 | 'after-declaration', 58 | 'first-nested' 59 | ], 60 | ignore: [ 61 | 'after-comment', 62 | 'inside-single-line-block' 63 | ] 64 | }], 65 | 'function-calc-no-unspaced-operator': true, 66 | 'function-comma-newline-after': 'always-multi-line', 67 | 'function-comma-space-after': 'always-single-line', 68 | 'function-comma-space-before': 'never', 69 | 'function-linear-gradient-no-nonstandard-direction': true, 70 | 'function-max-empty-lines': 0, 71 | 'function-name-case': 'lower', 72 | 'function-parentheses-newline-inside': 'always-multi-line', 73 | 'function-parentheses-space-inside': 'never-single-line', 74 | 'function-whitespace-after': 'always', 75 | indentation: 2, 76 | 'keyframe-declaration-no-important': true, 77 | 'length-zero-no-unit': true, 78 | 'max-empty-lines': 1, 79 | 'media-feature-colon-space-after': 'always', 80 | 'media-feature-colon-space-before': 'never', 81 | 'media-feature-name-case': 'lower', 82 | 'media-feature-name-no-unknown': true, 83 | 'media-feature-parentheses-space-inside': 'never', 84 | 'media-feature-range-operator-space-after': 'always', 85 | 'media-feature-range-operator-space-before': 'always', 86 | 'media-query-list-comma-newline-after': 'always-multi-line', 87 | 'media-query-list-comma-space-after': 'always-single-line', 88 | 'media-query-list-comma-space-before': 'never', 89 | 'no-eol-whitespace': true, 90 | 'no-extra-semicolons': true, 91 | 'no-invalid-double-slash-comments': true, 92 | 'no-missing-end-of-source-newline': true, 93 | 'number-leading-zero': 'always', 94 | 'number-no-trailing-zeros': true, 95 | 'property-case': 'lower', 96 | 'property-no-unknown': true, 97 | 'rule-empty-line-before': ['always-multi-line', { 98 | except: ['first-nested'], 99 | ignore: ['after-comment'] 100 | }], 101 | 'selector-attribute-brackets-space-inside': 'never', 102 | 'selector-attribute-operator-space-after': 'never', 103 | 'selector-attribute-operator-space-before': 'never', 104 | 'selector-combinator-space-after': 'always', 105 | 'selector-combinator-space-before': 'always', 106 | 'selector-descendant-combinator-no-non-space': true, 107 | 'selector-list-comma-newline-after': 'always', 108 | 'selector-list-comma-space-before': 'never', 109 | 'selector-max-empty-lines': 0, 110 | 'selector-pseudo-class-case': 'lower', 111 | 'selector-pseudo-class-no-unknown': true, 112 | 'selector-pseudo-class-parentheses-space-inside': 'never', 113 | 'selector-pseudo-element-case': 'lower', 114 | 'selector-pseudo-element-colon-notation': 'double', 115 | 'selector-pseudo-element-no-unknown': true, 116 | 'selector-type-case': 'lower', 117 | 'selector-type-no-unknown': true, 118 | 'shorthand-property-no-redundant-values': true, 119 | 'string-no-newline': true, 120 | 'unit-case': 'lower', 121 | 'unit-no-unknown': true, 122 | 'value-list-comma-newline-after': 'always-multi-line', 123 | 'value-list-comma-space-after': 'always-single-line', 124 | 'value-list-comma-space-before': 'never', 125 | 'value-list-max-empty-lines': 0 126 | } 127 | }; 128 | -------------------------------------------------------------------------------- /linters/js/best-practices.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | // enforces getter/setter pairs in objects 4 | 'accessor-pairs': 'off', 5 | 6 | // enforces return statements in callbacks of array's methods 7 | // http://eslint.org/docs/rules/array-callback-return 8 | 'array-callback-return': 'error', 9 | 10 | // treat var statements as if they were block scoped 11 | 'block-scoped-var': 'error', 12 | 13 | // specify the maximum cyclomatic complexity allowed in a program 14 | complexity: ['off', 11], 15 | 16 | // enforce that class methods use "this" 17 | // http://eslint.org/docs/rules/class-methods-use-this 18 | // 'class-methods-use-this': ['error', { 19 | // exceptMethods: [] 20 | // }], 21 | 22 | // require return statements to either always or never specify values 23 | 'consistent-return': 'error', 24 | 25 | // specify curly brace conventions for all control statements 26 | curly: ['error', 'multi-line'], 27 | 28 | // require default case in switch statements 29 | 'default-case': ['error', { commentPattern: '^no default$' }], 30 | 31 | // encourages use of dot notation whenever possible 32 | 'dot-notation': ['error', { allowKeywords: true }], 33 | 34 | // enforces consistent newlines before or after dots 35 | // http://eslint.org/docs/rules/dot-location 36 | 'dot-location': ['error', 'property'], 37 | 38 | // require the use of === and !== 39 | // http://eslint.org/docs/rules/eqeqeq 40 | eqeqeq: ['error', 'allow-null'], 41 | 42 | // make sure for-in loops have an if statement 43 | 'guard-for-in': 'error', 44 | 45 | // disallow the use of alert, confirm, and prompt 46 | 'no-alert': 'warn', 47 | 48 | // disallow use of arguments.caller or arguments.callee 49 | 'no-caller': 'error', 50 | 51 | // disallow lexical declarations in case/default clauses 52 | // http://eslint.org/docs/rules/no-case-declarations.html 53 | 'no-case-declarations': 'error', 54 | 55 | // disallow division operators explicitly at beginning of regular expression 56 | // http://eslint.org/docs/rules/no-div-regex 57 | 'no-div-regex': 'off', 58 | 59 | // disallow else after a return in an if 60 | 'no-else-return': 'error', 61 | 62 | // disallow empty functions, except for standalone funcs/arrows 63 | // http://eslint.org/docs/rules/no-empty-function 64 | 'no-empty-function': ['error', { 65 | allow: [ 66 | 'arrowFunctions', 67 | 'functions', 68 | 'methods' 69 | ] 70 | }], 71 | 72 | // disallow empty destructuring patterns 73 | // http://eslint.org/docs/rules/no-empty-pattern 74 | 'no-empty-pattern': 'error', 75 | 76 | // disallow comparisons to null without a type-checking operator 77 | 'no-eq-null': 'off', 78 | 79 | // disallow use of eval() 80 | 'no-eval': 'error', 81 | 82 | // disallow adding to native types 83 | 'no-extend-native': 'error', 84 | 85 | // disallow unnecessary function binding 86 | 'no-extra-bind': 'error', 87 | 88 | // disallow Unnecessary Labels 89 | // http://eslint.org/docs/rules/no-extra-label 90 | 'no-extra-label': 'error', 91 | 92 | // disallow fallthrough of case statements 93 | 'no-fallthrough': 'error', 94 | 95 | // disallow the use of leading or trailing decimal points in numeric literals 96 | 'no-floating-decimal': 'error', 97 | 98 | // disallow reassignments of native objects or read-only globals 99 | // http://eslint.org/docs/rules/no-global-assign 100 | 'no-global-assign': ['error', { exceptions: [] }], 101 | // deprecated in favor of no-global-assign 102 | 'no-native-reassign': 'off', 103 | 104 | // disallow implicit type conversions 105 | // http://eslint.org/docs/rules/no-implicit-coercion 106 | 'no-implicit-coercion': ['off', { 107 | boolean: false, 108 | number: true, 109 | string: true, 110 | allow: [] 111 | }], 112 | 113 | // disallow var and named functions in global scope 114 | // http://eslint.org/docs/rules/no-implicit-globals 115 | 'no-implicit-globals': 'off', 116 | 117 | // disallow use of eval()-like methods 118 | 'no-implied-eval': 'error', 119 | 120 | // disallow this keywords outside of classes or class-like objects 121 | 'no-invalid-this': 'off', 122 | 123 | // disallow usage of __iterator__ property 124 | 'no-iterator': 'error', 125 | 126 | // disallow use of labels for anything other then loops and switches 127 | 'no-labels': ['error', { allowLoop: false, allowSwitch: false }], 128 | 129 | // disallow unnecessary nested blocks 130 | 'no-lone-blocks': 'error', 131 | 132 | // disallow creation of functions within loops 133 | 'no-loop-func': 'error', 134 | 135 | // disallow magic numbers 136 | // http://eslint.org/docs/rules/no-magic-numbers 137 | 'no-magic-numbers': ['off', { 138 | ignore: [], 139 | ignoreArrayIndexes: true, 140 | enforceConst: true, 141 | detectObjects: false 142 | }], 143 | 144 | // disallow use of multiple spaces 145 | 'no-multi-spaces': 'error', 146 | 147 | // disallow use of multiline strings 148 | 'no-multi-str': 'error', 149 | 150 | // disallow use of new operator when not part of the assignment or comparison 151 | 'no-new': 'error', 152 | 153 | // disallow use of new operator for Function object 154 | 'no-new-func': 'error', 155 | 156 | // disallows creating new instances of String, Number, and Boolean 157 | 'no-new-wrappers': 'error', 158 | 159 | // disallow use of (old style) octal literals 160 | 'no-octal': 'error', 161 | 162 | // disallow use of octal escape sequences in string literals, such as 163 | // var foo = 'Copyright \251'; 164 | 'no-octal-escape': 'error', 165 | 166 | // disallow reassignment of function parameters 167 | // disallow parameter object manipulation 168 | // rule: http://eslint.org/docs/rules/no-param-reassign.html 169 | 'no-param-reassign': ['error', { props: true }], 170 | 171 | // disallow usage of __proto__ property 172 | 'no-proto': 'error', 173 | 174 | // disallow declaring the same variable more then once 175 | 'no-redeclare': 'error', 176 | 177 | // disallow certain object properties 178 | // http://eslint.org/docs/rules/no-restricted-properties 179 | 'no-restricted-properties': ['error', { 180 | object: 'arguments', 181 | property: 'callee', 182 | message: 'arguments.callee is deprecated,' 183 | }, { 184 | property: '__defineGetter__', 185 | message: 'Please use Object.defineProperty instead.' 186 | }, { 187 | property: '__defineSetter__', 188 | message: 'Please use Object.defineProperty instead.' 189 | }], 190 | 191 | // disallow use of assignment in return statement 192 | 'no-return-assign': 'error', 193 | 194 | // disallow use of `javascript:` urls. 195 | 'no-script-url': 'error', 196 | 197 | // disallow self assignment 198 | // http://eslint.org/docs/rules/no-self-assign 199 | 'no-self-assign': 'error', 200 | 201 | // disallow comparisons where both sides are exactly the same 202 | 'no-self-compare': 'error', 203 | 204 | // disallow use of comma operator 205 | 'no-sequences': 'error', 206 | 207 | // restrict what can be thrown as an exception 208 | 'no-throw-literal': 'error', 209 | 210 | // disallow unmodified conditions of loops 211 | // http://eslint.org/docs/rules/no-unmodified-loop-condition 212 | 'no-unmodified-loop-condition': 'off', 213 | 214 | // disallow usage of expressions in statement position 215 | 'no-unused-expressions': ['error', { 216 | allowShortCircuit: false, 217 | allowTernary: false 218 | }], 219 | 220 | // disallow unused labels 221 | // http://eslint.org/docs/rules/no-unused-labels 222 | 'no-unused-labels': 'error', 223 | 224 | // disallow unnecessary .call() and .apply() 225 | 'no-useless-call': 'off', 226 | 227 | // disallow useless string concatenation 228 | // http://eslint.org/docs/rules/no-useless-concat 229 | 'no-useless-concat': 'error', 230 | 231 | // disallow unnecessary string escaping 232 | // http://eslint.org/docs/rules/no-useless-escape 233 | 'no-useless-escape': 'error', 234 | 235 | // disallow use of void operator 236 | // http://eslint.org/docs/rules/no-void 237 | 'no-void': 'error', 238 | 239 | // disallow usage of configurable warning terms in comments: e.g. todo 240 | 'no-warning-comments': ['off', { terms: ['todo', 'fixme', 'xxx'], location: 'start' }], 241 | 242 | // disallow use of the with statement 243 | 'no-with': 'error', 244 | 245 | // require use of the second argument for parseInt() 246 | radix: 'error', 247 | 248 | // requires to declare all vars on top of their containing scope 249 | 'vars-on-top': 'error', 250 | 251 | // require immediate function invocation to be wrapped in parentheses 252 | // http://eslint.org/docs/rules/wrap-iife.html 253 | 'wrap-iife': ['error', 'outside', { functionPrototypeMethods: false }], 254 | 255 | // require or disallow Yoda conditions 256 | yoda: 'error' 257 | } 258 | }; 259 | -------------------------------------------------------------------------------- /linters/js/errors.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | // require trailing commas in multiline object literals 4 | 'comma-dangle': ['error', 'never'], 5 | 6 | // disallow assignment in conditional expressions 7 | 'no-cond-assign': ['error', 'always'], 8 | 9 | // allow use of console (this should be a build-rejection, not a dev rejection) 10 | 'no-console': ['error', { allow: ['log', 'warn', 'error'] }], 11 | 12 | // disallow use of constant expressions in conditions 13 | 'no-constant-condition': 'warn', 14 | 15 | // disallow control characters in regular expressions 16 | 'no-control-regex': 'error', 17 | 18 | // disallow use of debugger 19 | 'no-debugger': 'error', 20 | 21 | // disallow duplicate arguments in functions 22 | 'no-dupe-args': 'error', 23 | 24 | // disallow duplicate keys when creating object literals 25 | 'no-dupe-keys': 'error', 26 | 27 | // disallow a duplicate case label. 28 | 'no-duplicate-case': 'error', 29 | 30 | // disallow empty statements 31 | 'no-empty': 'error', 32 | 33 | // disallow the use of empty character classes in regular expressions 34 | 'no-empty-character-class': 'error', 35 | 36 | // disallow assigning to the exception in a catch block 37 | 'no-ex-assign': 'error', 38 | 39 | // disallow double-negation boolean casts in a boolean context 40 | // http://eslint.org/docs/rules/no-extra-boolean-cast 41 | 'no-extra-boolean-cast': 'error', 42 | 43 | // disallow unnecessary parentheses 44 | // http://eslint.org/docs/rules/no-extra-parens 45 | 'no-extra-parens': ['off', 'all', { 46 | conditionalAssign: true, 47 | nestedBinaryExpressions: false, 48 | returnAssign: false, 49 | }], 50 | 51 | // disallow unnecessary semicolons 52 | 'no-extra-semi': 'error', 53 | 54 | // disallow overwriting functions written as function declarations 55 | 'no-func-assign': 'error', 56 | 57 | // disallow function or variable declarations in nested blocks 58 | 'no-inner-declarations': 'error', 59 | 60 | // disallow invalid regular expression strings in the RegExp constructor 61 | 'no-invalid-regexp': 'error', 62 | 63 | // disallow irregular whitespace outside of strings and comments 64 | 'no-irregular-whitespace': 'error', 65 | 66 | // disallow the use of object properties of the global object (Math and JSON) as functions 67 | 'no-obj-calls': 'error', 68 | 69 | // disallow use of Object.prototypes builtins directly 70 | // http://eslint.org/docs/rules/no-prototype-builtins 71 | 'no-prototype-builtins': 'error', 72 | 73 | // disallow multiple spaces in a regular expression literal 74 | 'no-regex-spaces': 'error', 75 | 76 | // disallow sparse arrays 77 | 'no-sparse-arrays': 'error', 78 | 79 | // Disallow template literal placeholder syntax in regular strings 80 | // http://eslint.org/docs/rules/no-template-curly-in-string 81 | 'no-template-curly-in-string': 'error', 82 | 83 | // Avoid code that looks like two expressions but is actually one 84 | // http://eslint.org/docs/rules/no-unexpected-multiline 85 | 'no-unexpected-multiline': 'error', 86 | 87 | // disallow unreachable statements after a return, throw, continue, or break statement 88 | 'no-unreachable': 'error', 89 | 90 | // disallow return/throw/break/continue inside finally blocks 91 | // http://eslint.org/docs/rules/no-unsafe-finally 92 | 'no-unsafe-finally': 'error', 93 | 94 | // disallow negating the left operand of relational operators 95 | // http://eslint.org/docs/rules/no-unsafe-negation 96 | 'no-unsafe-negation': 'error', 97 | // disallow negation of the left operand of an in expression 98 | // deprecated in favor of no-unsafe-negation 99 | 'no-negated-in-lhs': 'off', 100 | 101 | // disallow comparisons with the value NaN 102 | 'use-isnan': 'error', 103 | 104 | // ensure JSDoc comments are valid 105 | // http://eslint.org/docs/rules/valid-jsdoc 106 | 'valid-jsdoc': 'off', 107 | 108 | // ensure that the results of typeof are compared against a valid string 109 | // http://eslint.org/docs/rules/valid-typeof 110 | 'valid-typeof': ['error', { requireStringLiterals: true }], 111 | } 112 | }; 113 | -------------------------------------------------------------------------------- /linters/js/es6.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | es6: true 4 | }, 5 | parserOptions: { 6 | ecmaVersion: 6, 7 | sourceType: 'module', 8 | ecmaFeatures: { 9 | generators: false, 10 | objectLiteralDuplicateProperties: false 11 | } 12 | }, 13 | 14 | rules: { 15 | // enforces no braces where they can be omitted 16 | // http://eslint.org/docs/rules/arrow-body-style 17 | // TODO: enable requireReturnForObjectLiteral? 18 | 'arrow-body-style': 0, 19 | 20 | // require parens in arrow function arguments 21 | // http://eslint.org/docs/rules/arrow-parens 22 | 'arrow-parens': ['error', 'as-needed', { 23 | requireForBlockBody: true 24 | }], 25 | 26 | // require space before/after arrow function's arrow 27 | // http://eslint.org/docs/rules/arrow-spacing 28 | 'arrow-spacing': ['error', { before: true, after: true }], 29 | 30 | // verify super() callings in constructors 31 | 'constructor-super': 'error', 32 | 33 | // enforce the spacing around the * in generator functions 34 | // http://eslint.org/docs/rules/generator-star-spacing 35 | 'generator-star-spacing': ['error', { before: false, after: true }], 36 | 37 | // disallow modifying variables of class declarations 38 | // http://eslint.org/docs/rules/no-class-assign 39 | 'no-class-assign': 'error', 40 | 41 | // disallow arrow functions where they could be confused with comparisons 42 | // http://eslint.org/docs/rules/no-confusing-arrow 43 | 'no-confusing-arrow': ['error', { 44 | allowParens: true 45 | }], 46 | 47 | // disallow modifying variables that are declared using const 48 | 'no-const-assign': 'error', 49 | 50 | // disallow duplicate class members 51 | // http://eslint.org/docs/rules/no-dupe-class-members 52 | 'no-dupe-class-members': 'error', 53 | 54 | // disallow importing from the same path more than once 55 | // http://eslint.org/docs/rules/no-duplicate-imports 56 | 'no-duplicate-imports': 'error', 57 | 58 | // disallow symbol constructor 59 | // http://eslint.org/docs/rules/no-new-symbol 60 | 'no-new-symbol': 'error', 61 | 62 | // disallow specific imports 63 | // http://eslint.org/docs/rules/no-restricted-imports 64 | 'no-restricted-imports': 'off', 65 | 66 | // disallow to use this/super before super() calling in constructors. 67 | // http://eslint.org/docs/rules/no-this-before-super 68 | 'no-this-before-super': 'error', 69 | 70 | // disallow useless computed property keys 71 | // http://eslint.org/docs/rules/no-useless-computed-key 72 | 'no-useless-computed-key': 'error', 73 | 74 | // disallow unnecessary constructor 75 | // http://eslint.org/docs/rules/no-useless-constructor 76 | 'no-useless-constructor': 'error', 77 | 78 | // disallow renaming import, export, and destructured assignments to the same name 79 | // http://eslint.org/docs/rules/no-useless-rename 80 | 'no-useless-rename': ['error', { 81 | ignoreDestructuring: false, 82 | ignoreImport: false, 83 | ignoreExport: false 84 | }], 85 | 86 | // require let or const instead of var 87 | 'no-var': 'error', 88 | 89 | // require method and property shorthand syntax for object literals 90 | // http://eslint.org/docs/rules/object-shorthand 91 | 'object-shorthand': ['error', 'always', { 92 | ignoreConstructors: false, 93 | avoidQuotes: true 94 | }], 95 | 96 | // suggest using arrow functions as callbacks 97 | 'prefer-arrow-callback': ['error', { 98 | allowNamedFunctions: false, 99 | allowUnboundThis: true 100 | }], 101 | 102 | // suggest using of const declaration for variables that are never modified after declared 103 | 'prefer-const': ['error', { 104 | destructuring: 'any', 105 | ignoreReadBeforeAssign: true 106 | }], 107 | 108 | // disallow parseInt() in favor of binary, octal, and hexadecimal literals 109 | // http://eslint.org/docs/rules/prefer-numeric-literals 110 | 'prefer-numeric-literals': 'error', 111 | 112 | // suggest using Reflect methods where applicable 113 | // http://eslint.org/docs/rules/prefer-reflect 114 | // TODO: enable? 115 | 'prefer-reflect': 'off', 116 | 117 | // use rest parameters instead of arguments 118 | // http://eslint.org/docs/rules/prefer-rest-params 119 | 'prefer-rest-params': 'error', 120 | 121 | // suggest using the spread operator instead of .apply() 122 | // http://eslint.org/docs/rules/prefer-spread 123 | 'prefer-spread': 'error', 124 | 125 | // suggest using template literals instead of string concatenation 126 | // http://eslint.org/docs/rules/prefer-template 127 | 'prefer-template': 'error', 128 | 129 | // disallow generator functions that do not have yield 130 | // http://eslint.org/docs/rules/require-yield 131 | 'require-yield': 'error', 132 | 133 | // enforce spacing between object rest-spread 134 | // http://eslint.org/docs/rules/rest-spread-spacing 135 | 'rest-spread-spacing': ['error', 'never'], 136 | 137 | // import sorting 138 | // http://eslint.org/docs/rules/sort-imports 139 | 'sort-imports': ['off', { 140 | ignoreCase: false, 141 | ignoreMemberSort: false, 142 | memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'] 143 | }], 144 | 145 | // require a Symbol description 146 | // http://eslint.org/docs/rules/symbol-description 147 | 'symbol-description': 'error', 148 | 149 | // enforce usage of spacing in template strings 150 | // http://eslint.org/docs/rules/template-curly-spacing 151 | 'template-curly-spacing': 'error', 152 | 153 | // enforce spacing around the * in yield* expressions 154 | // http://eslint.org/docs/rules/yield-star-spacing 155 | 'yield-star-spacing': ['error', 'after'] 156 | } 157 | }; 158 | -------------------------------------------------------------------------------- /linters/js/imports.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | es6: true 4 | }, 5 | parserOptions: { 6 | ecmaVersion: 6, 7 | sourceType: 'module' 8 | }, 9 | plugins: [ 10 | 'import' 11 | ], 12 | 13 | settings: { 14 | 'import/resolver': { 15 | node: { 16 | extensions: ['.js', '.json'] 17 | } 18 | }, 19 | 'import/extensions': [ 20 | '.js', 21 | '.jsx' 22 | ], 23 | 'import/core-modules': [ 24 | ], 25 | 'import/ignore': [ 26 | 'node_modules', 27 | '\\.(coffee|scss|css|less|hbs|svg|json)$' 28 | ] 29 | }, 30 | 31 | rules: { 32 | // Static analysis: 33 | 34 | // ensure imports point to files/modules that can be resolved 35 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md 36 | 'import/no-unresolved': ['error', { ignore: ['^[~]'], commonjs: true, caseSensitive: true }], 37 | 38 | // ensure named imports coupled with named exports 39 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/named.md#when-not-to-use-it 40 | 'import/named': 'off', 41 | 42 | // ensure default import coupled with default export 43 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/default.md#when-not-to-use-it 44 | 'import/default': 'off', 45 | 46 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/namespace.md 47 | 'import/namespace': 'off', 48 | 49 | // Helpful warnings: 50 | 51 | // disallow invalid exports, e.g. multiple defaults 52 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/export.md 53 | 'import/export': 'error', 54 | 55 | // allow a default import name to match a named export for easier shallow render testing 56 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-as-default.md 57 | 'import/no-named-as-default': 'off', 58 | 59 | // warn on accessing default export property names that are also named exports 60 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-as-default-member.md 61 | 'import/no-named-as-default-member': 'error', 62 | 63 | // disallow use of jsdoc-marked-deprecated imports 64 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-deprecated.md 65 | 'import/no-deprecated': 'off', 66 | 67 | // Don't forbid the use of extraneous packages 68 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md 69 | 'import/no-extraneous-dependencies': ['off', { 70 | devDependencies: false, 71 | optionalDependencies: false 72 | }], 73 | 74 | // Forbid mutable exports 75 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md 76 | 'import/no-mutable-exports': 'error', 77 | 78 | // Module systems: 79 | 80 | // disallow require() 81 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-commonjs.md 82 | 'import/no-commonjs': 'off', 83 | 84 | // disallow AMD require/define 85 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-amd.md 86 | 'import/no-amd': 'error', 87 | 88 | // No Node.js builtin modules 89 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-nodejs-modules.md 90 | // TODO: enable? 91 | 'import/no-nodejs-modules': 'off', 92 | 93 | // Style guide: 94 | 95 | // disallow non-import statements appearing before import statements 96 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md 97 | 'import/first': ['error', 'absolute-first'], 98 | 99 | // disallow non-import statements appearing before import statements 100 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/imports-first.md 101 | // deprecated: use `import/first` 102 | 'import/imports-first': 'off', 103 | 104 | // disallow duplicate imports 105 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md 106 | 'import/no-duplicates': 'error', 107 | 108 | // disallow namespace imports 109 | // TODO: enable? 110 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-namespace.md 111 | 'import/no-namespace': 'off', 112 | 113 | // Ensure consistent use of file extension within the import path 114 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md 115 | 'import/extensions': 0, 116 | 117 | // Enforce a convention in module import order 118 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md 119 | // TODO: enable? 120 | 'import/order': ['off', { 121 | groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], 122 | 'newlines-between': 'never' 123 | }], 124 | 125 | // Require a newline after the last import/require in a group 126 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/newline-after-import.md 127 | 'import/newline-after-import': 'error', 128 | 129 | // Require modules with a single export to use a default export 130 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md 131 | 'import/prefer-default-export': 'error', 132 | 133 | // Restrict which files can be imported in a given folder 134 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-restricted-paths.md 135 | 'import/no-restricted-paths': 'off', 136 | 137 | // Forbid modules to have too many dependencies 138 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/max-dependencies.md 139 | 'import/max-dependencies': ['off', { max: 10 }], 140 | 141 | // Forbid import of modules using absolute paths 142 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-absolute-path.md 143 | 'import/no-absolute-path': 'error', 144 | 145 | // Forbid require() calls with expressions 146 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md 147 | 'import/no-dynamic-require': 'error', 148 | 149 | // prevent importing the submodules of other modules 150 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-internal-modules.md 151 | 'import/no-internal-modules': ['off', { 152 | allow: [] 153 | }], 154 | 155 | // Warn if a module could be mistakenly parsed as a script by a consumer 156 | // leveraging Unambiguous JavaScript Grammar 157 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/unambiguous.md 158 | // this should not be enabled until this proposal has at least been *presented* to TC39. 159 | // At the moment, it's not a thing. 160 | 'import/unambiguous': 'off', 161 | 162 | // Forbid Webpack loader syntax in imports 163 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md 164 | 'import/no-webpack-loader-syntax': 'error', 165 | 166 | // Prevent unassigned imports 167 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unassigned-import.md 168 | // importing for side effects is perfectly acceptable, if you need side effects. 169 | 'import/no-unassigned-import': 'off' 170 | } 171 | }; 172 | -------------------------------------------------------------------------------- /linters/js/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | './best-practices.js', 4 | './errors.js', 5 | './node.js', 6 | './style.js', 7 | './variables.js', 8 | './es6.js', 9 | './imports.js' 10 | ].map(require.resolve), 11 | parserOptions: { 12 | ecmaVersion: 2017, 13 | sourceType: 'module', 14 | ecmaFeatures: { 15 | experimentalObjectRestSpread: true, 16 | experimentalDecorators: true 17 | } 18 | }, 19 | rules: { 20 | strict: 'error' 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /linters/js/node.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | node: true 4 | }, 5 | 6 | rules: { 7 | // enforce return after a callback 8 | 'callback-return': 'off', 9 | 10 | // require all requires be top-level 11 | // http://eslint.org/docs/rules/global-require 12 | 'global-require': 'error', 13 | 14 | // enforces error handling in callbacks (node environment) 15 | 'handle-callback-err': 'off', 16 | 17 | // disallow mixing regular variable and require declarations 18 | 'no-mixed-requires': ['off', false], 19 | 20 | // disallow use of new operator with the require function 21 | 'no-new-require': 'error', 22 | 23 | // disallow string concatenation with __dirname and __filename 24 | // http://eslint.org/docs/rules/no-path-concat 25 | 'no-path-concat': 'error', 26 | 27 | // disallow use of process.env 28 | 'no-process-env': 'off', 29 | 30 | // disallow process.exit() 31 | 'no-process-exit': 'off', 32 | 33 | // restrict usage of specified node modules 34 | 'no-restricted-modules': 'off', 35 | 36 | // disallow use of synchronous methods (off by default) 37 | 'no-sync': 'off' 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /linters/js/strict.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | // babel inserts `'use strict';` for us 4 | strict: ['error', 'safe'] 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /linters/js/style.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | // enforce spacing inside array brackets 4 | 'array-bracket-spacing': ['error', 'never'], 5 | 6 | // enforce spacing inside single-line blocks 7 | // http://eslint.org/docs/rules/block-spacing 8 | 'block-spacing': ['error', 'always'], 9 | 10 | // enforce one true brace style 11 | 'brace-style': ['error', '1tbs', { allowSingleLine: true }], 12 | 13 | // require camel case names 14 | camelcase: ['error', { properties: 'never' }], 15 | 16 | // enforce spacing before and after comma 17 | 'comma-spacing': ['error', { before: false, after: true }], 18 | 19 | // enforce one true comma style 20 | 'comma-style': ['error', 'last'], 21 | 22 | // disallow padding inside computed properties 23 | 'computed-property-spacing': ['error', 'never'], 24 | 25 | // enforces consistent naming when capturing the current execution context 26 | 'consistent-this': 'off', 27 | 28 | // enforce newline at the end of file, with no multiple empty lines 29 | 'eol-last': ['error', 'always'], 30 | 31 | // enforce spacing between functions and their invocations 32 | // http://eslint.org/docs/rules/func-call-spacing 33 | 'func-call-spacing': ['error', 'never'], 34 | 35 | // requires function names to match the name of the variable or property to which they are 36 | // assigned 37 | // http://eslint.org/docs/rules/func-name-matching 38 | 'func-name-matching': ['off', { includeCommonJSModuleExports: false }], 39 | 40 | // require function expressions to have a name 41 | // http://eslint.org/docs/rules/func-names 42 | 'func-names': 'warn', 43 | 44 | // enforces use of function declarations or expressions 45 | // http://eslint.org/docs/rules/func-style 46 | // TODO: enable 47 | 'func-style': ['off', 'expression'], 48 | 49 | // Blacklist certain identifiers to prevent them being used 50 | // http://eslint.org/docs/rules/id-blacklist 51 | 'id-blacklist': 'off', 52 | 53 | // this option enforces minimum and maximum identifier lengths 54 | // (variable names, property names etc.) 55 | 'id-length': 'off', 56 | 57 | // require identifiers to match the provided regular expression 58 | 'id-match': 'off', 59 | 60 | // this option sets a specific tab width for your code 61 | // http://eslint.org/docs/rules/indent 62 | indent: ['error', 4, { SwitchCase: 1 }], 63 | 64 | // specify whether double or single quotes should be used in JSX attributes 65 | // http://eslint.org/docs/rules/jsx-quotes 66 | 'jsx-quotes': ['off', 'prefer-double'], 67 | 68 | // enforces spacing between keys and values in object literal properties 69 | 'key-spacing': ['error', { beforeColon: false, afterColon: true }], 70 | 71 | // require a space before & after certain keywords 72 | 'keyword-spacing': ['error', { 73 | before: true, 74 | after: true, 75 | overrides: { 76 | return: { after: true }, 77 | throw: { after: true }, 78 | case: { after: true } 79 | } 80 | }], 81 | 82 | // enforce position of line comments 83 | // http://eslint.org/docs/rules/line-comment-position 84 | // TODO: enable? 85 | 'line-comment-position': ['off', { 86 | position: 'above', 87 | ignorePattern: '', 88 | applyDefaultPatterns: true 89 | }], 90 | 91 | // disallow mixed 'LF' and 'CRLF' as linebreaks 92 | // http://eslint.org/docs/rules/linebreak-style 93 | 'linebreak-style': ['error', 'unix'], 94 | 95 | // enforces empty lines around comments 96 | 'lines-around-comment': 'off', 97 | 98 | // require or disallow newlines around directives 99 | // http://eslint.org/docs/rules/lines-around-directive 100 | 'lines-around-directive': ['error', { 101 | before: 'always', 102 | after: 'always' 103 | }], 104 | 105 | // specify the maximum depth that blocks can be nested 106 | 'max-depth': ['off', 4], 107 | 108 | // specify the maximum length of a line in your program 109 | // http://eslint.org/docs/rules/max-len 110 | 'max-len': ['error', 250, 2, { 111 | ignoreUrls: true, 112 | ignoreComments: true, 113 | ignoreStrings: true, 114 | ignoreTemplateLiterals: true 115 | }], 116 | 117 | // specify the max number of lines in a file 118 | // http://eslint.org/docs/rules/max-lines 119 | 'max-lines': ['off', { 120 | max: 300, 121 | skipBlankLines: true, 122 | skipComments: true 123 | }], 124 | 125 | // specify the maximum depth callbacks can be nested 126 | 'max-nested-callbacks': 'off', 127 | 128 | // limits the number of parameters that can be used in the function declaration. 129 | 'max-params': ['off', 3], 130 | 131 | // specify the maximum number of statement allowed in a function 132 | 'max-statements': ['off', 10], 133 | 134 | // restrict the number of statements per line 135 | // http://eslint.org/docs/rules/max-statements-per-line 136 | 'max-statements-per-line': ['off', { max: 1 }], 137 | 138 | // require multiline ternary 139 | // http://eslint.org/docs/rules/multiline-ternary 140 | // TODO: enable? 141 | 'multiline-ternary': ['off', 'never'], 142 | 143 | // require a capital letter for constructors 144 | 'new-cap': ['error', { 145 | newIsCap: true, 146 | newIsCapExceptions: [], 147 | capIsNew: false, 148 | capIsNewExceptions: ['Immutable.Map', 'Immutable.Set', 'Immutable.List'] 149 | }], 150 | 151 | // disallow the omission of parentheses when invoking a constructor with no arguments 152 | // http://eslint.org/docs/rules/new-parens 153 | 'new-parens': 'error', 154 | 155 | // allow/disallow an empty newline after var statement 156 | 'newline-after-var': 'off', 157 | 158 | // http://eslint.org/docs/rules/newline-before-return 159 | 'newline-before-return': 'off', 160 | 161 | // enforces new line after each method call in the chain to make it 162 | // more readable and easy to maintain 163 | // http://eslint.org/docs/rules/newline-per-chained-call 164 | 'newline-per-chained-call': ['error', { ignoreChainWithDepth: 4 }], 165 | 166 | // disallow use of the Array constructor 167 | 'no-array-constructor': 'error', 168 | 169 | // disallow use of bitwise operators 170 | // http://eslint.org/docs/rules/no-bitwise 171 | 'no-bitwise': 'error', 172 | 173 | // disallow use of the continue statement 174 | // http://eslint.org/docs/rules/no-continue 175 | 'no-continue': 'error', 176 | 177 | // disallow comments inline after code 178 | 'no-inline-comments': 'off', 179 | 180 | // disallow if as the only statement in an else block 181 | // http://eslint.org/docs/rules/no-lonely-if 182 | 'no-lonely-if': 'error', 183 | 184 | // disallow un-paren'd mixes of different operators 185 | // http://eslint.org/docs/rules/no-mixed-operators 186 | 'no-mixed-operators': ['error', { 187 | groups: [ 188 | ['+', '-', '*', '/', '%', '**'], 189 | ['&', '|', '^', '~', '<<', '>>', '>>>'], 190 | ['==', '!=', '===', '!==', '>', '>=', '<', '<='], 191 | ['&&', '||'], 192 | ['in', 'instanceof'] 193 | ], 194 | allowSamePrecedence: false 195 | }], 196 | 197 | // disallow mixed spaces and tabs for indentation 198 | 'no-mixed-spaces-and-tabs': 'error', 199 | 200 | // disallow multiple empty lines and only one newline at the end 201 | 'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1 }], 202 | 203 | // disallow negated conditions 204 | // http://eslint.org/docs/rules/no-negated-condition 205 | 'no-negated-condition': 'off', 206 | 207 | // disallow nested ternary expressions 208 | 'no-nested-ternary': 'off', 209 | 210 | // disallow use of the Object constructor 211 | 'no-new-object': 'error', 212 | 213 | // disallow use of unary operators, ++ and -- 214 | // http://eslint.org/docs/rules/no-plusplus 215 | 'no-plusplus': 'off', 216 | 217 | // disallow certain syntax forms 218 | // http://eslint.org/docs/rules/no-restricted-syntax 219 | 'no-restricted-syntax': [ 220 | 'error', 221 | 'ForInStatement', 222 | 'ForOfStatement', 223 | 'LabeledStatement', 224 | 'WithStatement' 225 | ], 226 | 227 | // disallow space between function identifier and application 228 | 'no-spaced-func': 'error', 229 | 230 | // disallow tab characters entirely 231 | 'no-tabs': 'error', 232 | 233 | // disallow the use of ternary operators 234 | 'no-ternary': 'off', 235 | 236 | // disallow trailing whitespace at the end of lines 237 | 'no-trailing-spaces': 'error', 238 | 239 | // disallow dangling underscores in identifiers 240 | 'no-underscore-dangle': ['error', { allowAfterThis: false }], 241 | 242 | // disallow the use of Boolean literals in conditional expressions 243 | // also, prefer `a || b` over `a ? a : b` 244 | // http://eslint.org/docs/rules/no-unneeded-ternary 245 | 'no-unneeded-ternary': ['error', { defaultAssignment: false }], 246 | 247 | // disallow whitespace before properties 248 | // http://eslint.org/docs/rules/no-whitespace-before-property 249 | 'no-whitespace-before-property': 'error', 250 | 251 | // require padding inside curly braces 252 | 'object-curly-spacing': ['error', 'always'], 253 | 254 | // enforce line breaks between braces 255 | // http://eslint.org/docs/rules/object-curly-newline 256 | // TODO: enable once https://github.com/eslint/eslint/issues/6488 is resolved 257 | 'object-curly-newline': ['off', { 258 | ObjectExpression: { minProperties: 0, multiline: true }, 259 | ObjectPattern: { minProperties: 0, multiline: true } 260 | }], 261 | 262 | // enforce "same line" or "multiple line" on object properties. 263 | // http://eslint.org/docs/rules/object-property-newline 264 | 'object-property-newline': ['error', { 265 | allowMultiplePropertiesPerLine: true 266 | }], 267 | 268 | // allow just one var statement per function 269 | 'one-var': ['error', 'never'], 270 | 271 | // require a newline around variable declaration 272 | // http://eslint.org/docs/rules/one-var-declaration-per-line 273 | 'one-var-declaration-per-line': ['error', 'always'], 274 | 275 | // require assignment operator shorthand where possible or prohibit it entirely 276 | // http://eslint.org/docs/rules/operator-assignment 277 | 'operator-assignment': ['error', 'always'], 278 | 279 | // enforce operators to be placed before or after line breaks 280 | 'operator-linebreak': 'off', 281 | 282 | // enforce padding within blocks 283 | 'padded-blocks': ['error', 'never'], 284 | 285 | // require quotes around object literal property names 286 | // http://eslint.org/docs/rules/quote-props.html 287 | 'quote-props': ['error', 'as-needed', { keywords: false, unnecessary: true, numbers: false }], 288 | 289 | // specify whether double or single quotes should be used 290 | quotes: ['error', 'single', { avoidEscape: true }], 291 | 292 | // do not require jsdoc 293 | // http://eslint.org/docs/rules/require-jsdoc 294 | 'require-jsdoc': 'off', 295 | 296 | // require or disallow use of semicolons instead of ASI 297 | semi: ['error', 'always'], 298 | 299 | // enforce spacing before and after semicolons 300 | 'semi-spacing': ['error', { before: false, after: true }], 301 | 302 | // requires object keys to be sorted 303 | 'sort-keys': ['off', 'asc', { caseSensitive: false, natural: true }], 304 | 305 | // sort variables within the same declaration block 306 | 'sort-vars': 'off', 307 | 308 | // require or disallow space before blocks 309 | 'space-before-blocks': 'error', 310 | 311 | // require or disallow space before function opening parenthesis 312 | // http://eslint.org/docs/rules/space-before-function-paren 313 | 'space-before-function-paren': ['error', { 314 | anonymous: 'always', 315 | named: 'never', 316 | asyncArrow: 'always' 317 | }], 318 | 319 | // require or disallow spaces inside parentheses 320 | 'space-in-parens': ['error', 'never'], 321 | 322 | // require spaces around operators 323 | 'space-infix-ops': 'error', 324 | 325 | // Require or disallow spaces before/after unary operators 326 | // http://eslint.org/docs/rules/space-unary-ops 327 | 'space-unary-ops': ['error', { 328 | words: true, 329 | nonwords: false, 330 | overrides: { 331 | } 332 | }], 333 | 334 | // require or disallow a space immediately following the // or /* in a comment 335 | 'spaced-comment': ['error', 'always', { 336 | exceptions: ['-', '+'], 337 | markers: ['=', '!'] // space here to support sprockets directives 338 | }], 339 | 340 | // require or disallow the Unicode Byte Order Mark 341 | // http://eslint.org/docs/rules/unicode-bom 342 | 'unicode-bom': ['error', 'never'], 343 | 344 | // require regex literals to be wrapped in parentheses 345 | 'wrap-regex': 'off' 346 | } 347 | }; 348 | -------------------------------------------------------------------------------- /linters/js/variables.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | // enforce or disallow variable initializations at definition 4 | 'init-declarations': 'off', 5 | 6 | // disallow the catch clause parameter name being the same as a variable in the outer scope 7 | 'no-catch-shadow': 'off', 8 | 9 | // disallow deletion of variables 10 | 'no-delete-var': 'error', 11 | 12 | // disallow labels that share a name with a variable 13 | // http://eslint.org/docs/rules/no-label-var 14 | 'no-label-var': 'error', 15 | 16 | // disallow specific globals 17 | 'no-restricted-globals': 'off', 18 | 19 | // disallow declaration of variables already declared in the outer scope 20 | 'no-shadow': 'error', 21 | 22 | // disallow shadowing of names such as arguments 23 | 'no-shadow-restricted-names': 'error', 24 | 25 | // disallow use of undeclared variables unless mentioned in a /*global */ block 26 | 'no-undef': 'error', 27 | 28 | // disallow use of undefined when initializing variables 29 | 'no-undef-init': 'error', 30 | 31 | // disallow use of undefined variable 32 | // http://eslint.org/docs/rules/no-undefined 33 | // TODO: enable? 34 | 'no-undefined': 'off', 35 | 36 | // disallow declaration of variables that are not used in the code 37 | 'no-unused-vars': ['error', { vars: 'local', args: 'after-used' }], 38 | 39 | // disallow use of variables before they are defined 40 | 'no-use-before-define': 'error' 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ssg", 3 | "version": "1.0.0", 4 | "repository": { 5 | "url": "https://github.com/grasshoppergroup/signup-us", 6 | "type": "git" 7 | }, 8 | "contributors": [ 9 | "Cody Lindley" 10 | ], 11 | "license": "MIT", 12 | "scripts": { 13 | "/////////////////////////////////////////// start //////////////////////////////////////": "", 14 | "Start webpack dev server, uses the webpack.config.babel.js": "", 15 | "-d is a shortcut for --debug --devtool eval-cheap-module-source-map --output-pathinfo": "", 16 | "start": "concurrently --kill-others \"webpack-dev-server -d --open\"", 17 | "////////////////////////////////////// build ////////////////////////////////////////": "", 18 | "Run js and CSS linters": "", 19 | "rimraf build directory then (i.e. rimraf is a deep deletion module for node):": "", 20 | "Build production code using webpack cli, uses the webpack.config.babel.js file": "", 21 | "use --env=production, which passes the env value to the webpack config function": "", 22 | "build": "NODE_ENV=production rimraf build && webpack --env=production --progress", 23 | "////////////////////////////////////// lint:js ////////////////////////////////////": "", 24 | "lint the .js files in client": "", 25 | "lint:js": "eslint \"./client/**/*.js\" --fix", 26 | "////////////////////////////////////// lint:css ///////////////////////////////////": "", 27 | "lint the .css files in client": "", 28 | "lint:css": "stylelint \"./client/**/*.css\" --fix" 29 | }, 30 | "dependencies": { 31 | "babel-cli": "6.26.0", 32 | "babel-code-frame": "6.26.0", 33 | "babel-core": "6.26.0", 34 | "babel-eslint": "8.0.1", 35 | "babel-jest": "21.2.0", 36 | "babel-loader": "7.1.2", 37 | "babel-plugin-lodash": "3.2.11", 38 | "babel-plugin-react-intl": "2.3.1", 39 | "babel-plugin-transform-class-properties": "6.24.1", 40 | "babel-plugin-transform-decorators-legacy": "1.3.4", 41 | "babel-plugin-transform-es2015-modules-commonjs": "6.26.0", 42 | "babel-polyfill": "6.26.0", 43 | "babel-preset-env": "1.6.1", 44 | "babel-preset-es2015": "6.24.1", 45 | "babel-preset-react": "6.24.1", 46 | "babel-preset-stage-0": "6.24.1", 47 | "babel-register": "6.26.0", 48 | "babel-root-import": "4.1.8", 49 | "browser-sync": "2.18.13", 50 | "concurrently": "3.5.0", 51 | "config": "1.27.0", 52 | "cpy-cli": "1.0.1", 53 | "cross-env": "5.1.0", 54 | "css-loader": "0.28.7", 55 | "eslint": "4.9.0", 56 | "eslint-plugin-import": "2.8.0", 57 | "eslint-plugin-jsx-a11y": "6.0.2", 58 | "eslint-plugin-react": "7.4.0", 59 | "extract-text-webpack-plugin": "3.0.2", 60 | "favicons-webpack-plugin": "0.0.7", 61 | "file-loader": "1.1.5", 62 | "html-webpack-plugin": "2.30.1", 63 | "image-webpack-loader": "3.4.2", 64 | "js-cookie": "2.1.4", 65 | "json-loader": "0.5.7", 66 | "lodash": "4.17.4", 67 | "mkdirp": "0.5.1", 68 | "nodemon": "1.12.1", 69 | "postcss": "6.0.13", 70 | "postcss-clearfix": "2.0.1", 71 | "postcss-cssnext": "3.0.2", 72 | "postcss-focus": "3.0.0", 73 | "postcss-loader": "2.0.8", 74 | "postcss-reporter": "5.0.0", 75 | "react": "^16.0.0", 76 | "react-dom": "^16.0.0", 77 | "rimraf": "2.6.2", 78 | "sanitize.css": "^5.0.0", 79 | "style-loader": "0.19.0", 80 | "stylelint": "8.2.0", 81 | "stylelint-order": "0.7.0", 82 | "text-loader": "0.0.1", 83 | "webpack": "3.8.1", 84 | "webpack-bundle-analyzer": "2.9.0", 85 | "webpack-dev-server": "2.9.3", 86 | "webpack-validator": "3.0.0" 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-cssnext': { browsers: ['last 2 versions', 'IE > 10'] }, 4 | 'postcss-focus': {}, 5 | 'postcss-reporter': {}, 6 | 'postcss-clearfix': {} 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/h1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // example of image 4 | import src from '../static/password.jpg'; 5 | // example of CSS pulled in, that make use of an img 6 | import styles from './h3.css'; 7 | 8 | export default () => { 9 | return ( 10 |
11 |

look at h1.js component:

12 | test 13 |

How an image is referenced in a component:

14 |

15 |

The styled box below comes from a imported CSS file (file uses CSS BG image)

16 |

Hello World

17 |
18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/h3.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mainColor: red; 3 | } 4 | 5 | a { 6 | color: var(--mainColor); 7 | } 8 | 9 | .redFont { 10 | color: var(--mainColor); 11 | padding: 10px; 12 | background-image: url(./../static/cssTestImage.png); 13 | height: 150px; 14 | width: 350px; 15 | } 16 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | 2 | /* class global */ 3 | :global .globalClass { 4 | margin: 100px; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import 'sanitize.css/sanitize.css'; 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | 6 | import './index.css'; 7 | import H1 from './components/h1.js'; 8 | 9 | ReactDOM.render(

, document.body.appendChild(document.createElement('div'))); 10 | -------------------------------------------------------------------------------- /src/static/cssTestImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codylindley/react-app-dawn/897d18d7396d33006424711eb03b9a322be847d5/src/static/cssTestImage.png -------------------------------------------------------------------------------- /src/static/password.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codylindley/react-app-dawn/897d18d7396d33006424711eb03b9a322be847d5/src/static/password.jpg -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | // the path module provides utilities for working with file and directory paths. 2 | const path = require('path'); 3 | 4 | // webpack 5 | const webpack = require('webpack'); 6 | 7 | const version = require('./package.json').version; 8 | 9 | // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 10 | 11 | // requiring case senstive module plugin out of webpack (https://github.com/webpack/webpack/issues/2362) 12 | const WarnCaseSensitiveModulesPlugin = require('webpack/lib/WarnCaseSensitiveModulesPlugin'); 13 | 14 | // ignore case warnings on OS that don't support file names with different casing 15 | WarnCaseSensitiveModulesPlugin.prototype.apply = function ignoreCase() {}; 16 | 17 | /* It moves every require("style.css") in entry chunks into a separate css output file. 18 | So your styles are no longer inlined into the javascript, but separate in a 19 | css bundle file (styles.css). If your total stylesheet volume is big, it will be 20 | faster because the stylesheet bundle is loaded in parallel to the javascript bundle. 21 | https://github.com/webpack/extract-text-webpack-plugin */ 22 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 23 | 24 | /* This is a webpack plugin that simplifies creation of HTML files to serve your 25 | webpack bundles. This is especially useful for webpack bundles that include a hash 26 | in the filename which changes every compilation. 27 | https://github.com/ampedandwired/html-webpack-plugin */ 28 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 29 | 30 | // favicon handling 31 | // https://github.com/jantimon/favicons-webpack-plugin 32 | const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); 33 | 34 | /* This is the function that is called by webpack to return a webpack configuration object. 35 | The env parameter is passed from the webpack cli e.g. webpack --env=production */ 36 | const finalWebpackConfig = (env) => { 37 | // set up webpack configuration object used for development 38 | const config = { 39 | devtool: 'eval', 40 | /* The Entry point(s) telling webpack where to start and follow the graph of 41 | dependencies to know what to bundle */ 42 | entry: { // using two bundles or chunks 43 | // bundle third-party code in a file called bundle.thirdparty.[hash].js 44 | // babel polyfill is for IE 10 and under and other legacy browsers 45 | thirdparty: ['babel-polyfill'], 46 | index: './src/index.js' // bundle all non-thirdparty code in a file called bundle.index.[hash].js 47 | }, 48 | // The webpack output property describes to webpack how to treat bundled code. 49 | output: { 50 | path: path.resolve(__dirname, 'build'), 51 | filename: `assets/js/bundle.[name].[hash].js?${version}`, 52 | // has to match webpack dev server path i.e. localhost:8080 53 | // required so that css loads url() and fonts in dev, removed for production 54 | publicPath: 'http://localhost:8080/' 55 | }, 56 | devServer: { 57 | // --content-base is which directory is being served 58 | contentBase: path.resolve(__dirname, 'src'), 59 | /* When using the HTML5 History API, 60 | the index.html page will likely have be served in place of any 404 */ 61 | historyApiFallback: true, 62 | // open in browser at localhost:8080 63 | hot: true 64 | }, 65 | module: { 66 | /* Loaders tell webpack how to treat these (shown with test:) files as modules as 67 | they are added to your dependency graph. i.e. what to do with non-js files */ 68 | rules: [ 69 | { // WARNING this must remain the first object in the array 70 | test: /\.css$/, 71 | exclude: /node_modules/, // only use CSS modules and CSS next on our CSS 72 | use: [ 73 | 'style-loader', 74 | { 75 | loader: 'css-loader', 76 | options: { 77 | importLoaders: 1, 78 | localIdentName: '[local]__[hash:base64:5]', 79 | /* A CSS Module is a CSS file in which all class names and 80 | animation names are scoped locally by default. 81 | https://github.com/css-modules/css-modules */ 82 | modules: true 83 | } 84 | }, 85 | { 86 | loader: 'postcss-loader', 87 | options: { 88 | config: { 89 | path: './postcss.config.js' 90 | } 91 | } 92 | } 93 | ] 94 | }, 95 | { 96 | // Do not transform vendor's CSS with CSS-modules 97 | // The point is that they remain in global scope. 98 | // Since we require these CSS files in our JS or CSS files, 99 | // they will be a part of our compilation either way. 100 | // So, no need for ExtractTextPlugin here. 101 | test: /\.css$/, 102 | include: /node_modules/, 103 | use: ['style-loader', 'css-loader'] 104 | }, 105 | { 106 | test: /.*\.(gif|png|jpe?g|svg)$/i, 107 | use: [ 108 | 'file-loader?hash=sha512&digest=hex&name=assets/img/[hash].[ext]', 109 | { 110 | loader: 'image-webpack-loader', 111 | query: { 112 | mozjpeg: { 113 | progressive: true, 114 | quality: 65 115 | }, 116 | gifsicle: { 117 | interlaced: false 118 | }, 119 | optipng: { 120 | optimizationLevel: 7 121 | }, 122 | pngquant: { 123 | quality: '75-90', 124 | speed: 4 125 | } 126 | } 127 | } 128 | ] 129 | }, 130 | { test: /\.txt$/, use: 'raw-loader' }, 131 | { test: /\.(mp4|webm)$/, use: 'url-loader?limit=10000' }, 132 | { test: /\.json$/, use: 'json-loader' }, 133 | { test: /.(woff(2)?|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, use: 'file-loader?name=assets/fonts/[name].[ext]' }, 134 | { 135 | test: /\.(js$)/, 136 | use: 'babel-loader', 137 | include: path.join(__dirname, 'src') 138 | } 139 | ] 140 | }, 141 | 142 | /* Since Loaders only execute transforms on a per-file basis, Plugins are most commonly 143 | used (but not limited to) performing actions and custom functionality on "compilations" 144 | or "chunks" of your bundled modules (and so much more). 145 | In order to use a plugin, you just need to require() it and add it to the plugins array. 146 | Since most plugins are customizable via options, you need to create an instance 147 | of it by calling it with new.*/ 148 | plugins: [ 149 | new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading 150 | /* new FaviconsWebpackPlugin({ 151 | logo: './src/common/images/favicon.png', 152 | title: 'Grasshopper', 153 | prefix: 'assets/img/icons/' 154 | }), */ 155 | /* Use the HtmlWebpackPlugin plugin to make index.html a template so css and js can 156 | dynamically be added to the page. This will also take care of moving the index.html file 157 | to the build directory using the index.html in src as a template. 158 | https://github.com/ampedandwired/html-webpack-plugin 159 | */ 160 | new HtmlWebpackPlugin({ 161 | template: './src/index.html', 162 | inject: 'body', 163 | // https://github.com/kangax/html-minifier#options-quick-reference 164 | minify: env ? { // will minify html 165 | removeComments: true, 166 | collapseWhitespace: true, 167 | removeRedundantAttributes: true, 168 | useShortDoctype: true, 169 | removeEmptyAttributes: true, 170 | keepClosingSlash: true, 171 | minifyURLs: true 172 | } : false 173 | }), 174 | // Extract the CSS into a separate file 175 | new ExtractTextPlugin('assets/css/[name].[hash].css'), 176 | /* The CommonsChunkPlugin can move modules that occur in multiple entry chunks 177 | to a new entry chunk (the commons chunk). */ 178 | new webpack.optimize.CommonsChunkPlugin({ 179 | names: ['thirdparty'] 180 | }), 181 | new webpack.DefinePlugin({ 182 | VERSION: JSON.stringify(version), 183 | ENV: env ? JSON.stringify(env) : JSON.stringify('dev') 184 | }) 185 | ] 186 | }; 187 | 188 | // augment the webpack config object used for development so it can be used for production 189 | if (env === 'production') { 190 | // add devtool for production, for dev it is handled with cli flag: -d 191 | config.devtool = 'source-map'; 192 | // remove local dev server path for production 193 | config.output.publicPath = '/'; 194 | // different CSS loading for production 195 | config.module.rules.shift();// remove the first rule, replace with next rule below 196 | config.module.rules.push({// add a new rule for CSS for production 197 | test: /\.css$/, 198 | exclude: /node_modules/, // only use CSS modules and CSS next on our CSS 199 | use: ExtractTextPlugin.extract({ 200 | fallback: 'style-loader', 201 | /* A CSS Module is a CSS file in which all class names and 202 | animation names are scoped locally by default. Note that minimize uses cssnano 203 | https://github.com/css-modules/css-modules */ 204 | use: 'css-loader?modules&minimize&importLoaders=1&localIdentName=[path]__[local]__[hash:base64:3]!postcss-loader' 205 | }) 206 | }); 207 | // get rid of various test helpers, tell Webpack to use the production node environment. 208 | config.plugins.push( 209 | new webpack.DefinePlugin({ 210 | 'process.env': { 211 | NODE_ENV: JSON.stringify('production') 212 | } 213 | }) 214 | ); 215 | 216 | // saves a couple of kBs 217 | config.plugins.push( 218 | new webpack.LoaderOptionsPlugin({ 219 | minimize: true, 220 | debug: false, 221 | quiet: true 222 | }) 223 | ); 224 | // Minify and optimize the JavaScript bundle 225 | config.plugins.push( 226 | new webpack.optimize.UglifyJsPlugin({ 227 | compress: { 228 | screw_ie8: true, 229 | drop_console: true, 230 | // do not show warnings in the console (there is a lot of them) 231 | warnings: false, 232 | unused: true, 233 | dead_code: true 234 | }, 235 | mangle: { 236 | screw_ie8: true 237 | }, 238 | output: { 239 | comments: false, 240 | ascii_only: true, 241 | screw_ie8: true 242 | }, 243 | comments: false, 244 | sourceMap: true 245 | }) 246 | ); 247 | // A plugin for a more aggressive chunk merging strategy. 248 | config.plugins.push( 249 | new webpack.optimize.AggressiveMergingPlugin() 250 | ); 251 | /* only use if you want to see a visual mapping of the modules. 252 | // 253 | config.plugins.push( 254 | new BundleAnalyzerPlugin() 255 | ); 256 | */ 257 | } 258 | 259 | // have this function return an webpack config object 260 | return config; 261 | }; 262 | 263 | module.exports = finalWebpackConfig; 264 | --------------------------------------------------------------------------------