├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── server.js ├── src ├── app.js ├── components │ └── main.jsx ├── index.html ├── scss │ ├── common.scss │ └── style.scss └── services │ └── utils-service.js ├── webpack.config.js └── webpack.production.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Dependency directory 6 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 7 | node_modules 8 | 9 | # Build / Distribution 10 | dist -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Mike Chabot 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cross-env-example 2 | Reproduction of https://github.com/kentcdodds/cross-env/issues/13 3 | 4 | # Details 5 | 1. git clone `git@github.com:mikechabot/cross-env-example.git` 6 | 2. `npm install` 7 | 8 | # Scripts 9 | 10 | | Script | Description | Works as expected? | 11 | | ------------- | ------------- | ------------- | 12 | | `start-dev-cross-webpack` | Uses `cross-env` for setting `NODE_ENV` to dev, builds with webpack | **No** | 13 | | `start-dev-cross-webpack` | Uses `cross-env` for setting `NODE_ENV` to production, builds with webpack | **No** | 14 | | `start-dev-set` | Uses `SET` for setting `NODE_ENV` to dev | Yes | 15 | | `start-prod-set` | Uses `SET` for setting `NODE_ENV` to production | Yes | 16 | | `start-dev-cross` | Uses `cross-env` for setting `NODE_ENV` to dev | Yes | 17 | | `start-prod-cross` | Uses `cross-env` for setting `NODE_ENV` to production | Yes | 18 | 19 | # Examples 20 | 21 | ## Working example, using `start-dev-set`: 22 | 23 | mchabot@XG01484 MINGW64 /c/_workspaces/cross-env-example 24 | $ npm run start-dev-set 25 | 26 | > cross-env-example@1.0.0 start-dev-set C:\_workspaces\cross-env-example 27 | > set NODE_ENV=dev&& webpack --config webpack.config.js && node server.js 28 | 29 | Hash: bbca8417fe228733dd70 30 | Version: webpack 1.12.14 31 | Time: 1607ms 32 | Asset Size Chunks Chunk Names 33 | bundle.js 1 MB 0 [emitted] main 34 | index.html 323 bytes [emitted] 35 | [0] multi main 52 bytes {0} [built] 36 | + 247 hidden modules 37 | * * * 38 | * * * Running in dev mode 39 | * * * 40 | Listening at localhost:3040 41 | 42 | **Note**: See above `* * * Running in dev mode` 43 | 44 | ## Non-working example, using `start-dev-cross-webpack`: 45 | 46 | mchabot@XG01484 MINGW64 /c/_workspaces/cross-env-example 47 | $ npm run start-dev-cross-webpack 48 | 49 | > cross-env-example@1.0.0 start-dev-cross-webpack C:\_workspaces\cross-env-example 50 | > cross-env NODE_ENV=production webpack --config webpack.production.config.js && node server.js 51 | 52 | Hash: 0e3abc02723234b01496 53 | Version: webpack 1.12.14 54 | Time: 1298ms 55 | Asset Size Chunks Chunk Names 56 | bundle.js 680 kB 0 [emitted] main 57 | index.html 323 bytes [emitted] 58 | + 160 hidden modules 59 | * * * 60 | * * * Running in undefined mode 61 | * * * 62 | Listening at localhost:3040 63 | 64 | **Note**: See above `* * * Running in undefined mode` 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cross-env-example", 3 | "version": "1.0.0", 4 | "description": "example of cross-env issue", 5 | "scripts": { 6 | "start-dev-set": "set NODE_ENV=dev&& webpack --config webpack.config.js && node server.js", 7 | "start-prod-set": "set NODE_ENV=production&& webpack --config webpack.production.config.js && node server.js", 8 | "start-dev-cross": "cross-env NODE_ENV=dev node server.js", 9 | "start-prod-cross": "cross-env NODE_ENV=production node server.js", 10 | "start-dev-cross-webpack": "cross-env NODE_ENV=dev webpack --config webpack.config.js && cross-env NODE_ENV=dev node server.js", 11 | "start-prod-cross-webpack": "cross-env NODE_ENV=production webpack --config webpack.production.config.js && cross-env NODE_ENV=production node server.js" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/mikechabot/cross-env-example.git" 16 | }, 17 | "keywords": [ 18 | "markov", 19 | "text generator" 20 | ], 21 | "author": "Mike Chabot", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/mikechabot/cross-env-example/issues" 25 | }, 26 | "homepage": "https://github.com/mikechabot/cross-env-example#readme", 27 | "devDependencies": { 28 | "autoprefixer": "^6.3.1", 29 | "babel-core": "^6.0.20", 30 | "babel-loader": "^6.0.1", 31 | "babel-preset-es2015": "^6.0.15", 32 | "babel-preset-react": "^6.0.15", 33 | "babel-preset-stage-0": "^6.0.15", 34 | "html-webpack-plugin": "^1.7.0", 35 | "react-hot-loader": "^1.3.0", 36 | "webpack": "^1.12.2", 37 | "webpack-dev-server": "^1.12.1" 38 | }, 39 | "dependencies": { 40 | "cross-env": "^1.0.7", 41 | "lodash": "^4.2.1", 42 | "react": "^0.14.0", 43 | "react-dom": "^0.14.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var WebpackDevServer = require('webpack-dev-server'); 3 | var config = require('./webpack.config'); 4 | 5 | console.log('* * *'); 6 | console.log(`* * * Running in ${process.env.NODE_ENV} mode `); 7 | console.log('* * *'); 8 | 9 | new WebpackDevServer(webpack(config), { 10 | hot: true, 11 | historyApiFallback: true 12 | }).listen(3040, 'localhost', function (error, result) { 13 | if (error) { 14 | console.log(err); 15 | } 16 | console.log('Listening at localhost:3040'); 17 | }); 18 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Main from './components/main'; 4 | 5 | 6 | ReactDOM.render( 7 |
, 8 | document.getElementById('example') 9 | ); -------------------------------------------------------------------------------- /src/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Main = (props) => ( 4 |
hello, world!
5 | ); 6 | 7 | Main.propTypes = {}; 8 | 9 | export default Main; -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | example 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /src/scss/common.scss: -------------------------------------------------------------------------------- 1 | $font-stack: 'Raleway', sans-serif; 2 | 3 | /* Material Colors 4 | ========================================================================== */ 5 | 6 | $white: #FFFFFF; 7 | $black: #000000; 8 | 9 | $grey50: #FAFAFA; 10 | $grey100: #F5F5F5; 11 | $grey200: #EEEEEE; 12 | $grey300: #E0E0E0; 13 | $grey400: #BDBDBD; 14 | $grey500: #9E9E9E; 15 | $grey600: #757575; 16 | $grey700: #616161; 17 | $grey800: #424242; 18 | $grey900: #212121; 19 | 20 | $green50: #E8F5E9; 21 | $green100: #C8E6C9; 22 | $green200: #A5D6A7; 23 | $green300: #81C784; 24 | $green400: #66BB6A; 25 | $green500: #4CAF50; 26 | $green600: #43A047; 27 | $green700: #388E3C; 28 | $green800: #2E7D32; 29 | $green900: #1B5E20; 30 | $greenA100: #B9F6CA; 31 | $greenA200: #69F0AE; 32 | $greenA400: #00E676; 33 | $greenA700: #00C853; 34 | 35 | $lightGreen50: #F1F8E9; 36 | $lightGreen100: #DCEDC8; 37 | $lightGreen200: #C5E1A5; 38 | $lightGreen300: #AED581; 39 | $lightGreen400: #9CCC65; 40 | $lightGreen500: #8BC34A; 41 | $lightGreen600: #7CB342; 42 | $lightGreen700: #689F38; 43 | $lightGreen800: #558B2F; 44 | $lightGreen900: #33691E; 45 | $lightGreenA100: #CCFF90; 46 | $lightGreenA200: #B2FF59; 47 | $lightGreenA400: #76FF03; 48 | $lightGreenA700: #64DD17; 49 | 50 | $blue50: #E3F2FD; 51 | $blue100: #BBDEFB; 52 | $blue200: #90CAF9; 53 | $blue300: #64B5F6; 54 | $blue400: #42A5F5; 55 | $blue500: #2196F3; 56 | $blue600: #1E88E5; 57 | $blue700: #1976D2; 58 | $blue800: #1565C0; 59 | $blue900: #0D47A1; 60 | $blueA100: #82B1FF; 61 | $blueA200: #448AFF; 62 | $blueA400: #2979FF; 63 | $blueA700: #2962FF; 64 | 65 | $brown50: #EFEBE9; 66 | $brown100: #D7CCC8; 67 | $brown200: #BCAAA4; 68 | $brown300: #A1887F; 69 | $brown400: #8D6E63; 70 | $brown500: #795548; 71 | $brown600: #6D4C41; 72 | $brown700: #5D4037; 73 | $brown800: #4E342E; 74 | $brown900: #3E2723; 75 | 76 | $indigo50: #E8EAF6; 77 | $indigo100: #C5CAE9; 78 | $indigo200: #9FA8DA; 79 | $indigo300: #7986CB; 80 | $indigo400: #5C6BC0; 81 | $indigo500: #3F51B5; 82 | $indigo600: #3949AB; 83 | $indigo700: #303F9F; 84 | $indigo800: #283593; 85 | $indigo900: #1A237E; 86 | 87 | $primary-color-dark: $indigo700; 88 | $primary-color: $indigo500; 89 | $primary-color-light: $indigo100; 90 | $primary-color-text: $white; 91 | $accent-color: $grey500; 92 | $primary-text-color: $grey900; 93 | $secondary-text-color: $grey600; 94 | $divider-color: $grey400; 95 | 96 | 97 | 98 | /* SCSS Mixins 99 | ========================================================================== */ 100 | 101 | @mixin border($color) { 102 | border: 1px solid $color; 103 | } 104 | 105 | @mixin border-radius($radius) { 106 | border-radius: $radius; 107 | } 108 | 109 | @mixin margin($margin) { 110 | margin: $margin; 111 | } 112 | 113 | @mixin padding($padding) { 114 | padding: $padding; 115 | } 116 | 117 | @mixin height($height) { 118 | height: $height; 119 | } 120 | 121 | @mixin width($width) { 122 | width: $width; 123 | } 124 | 125 | @mixin background-color($color) { 126 | background-color: $color; 127 | } 128 | 129 | @mixin color($color) { 130 | color: $color; 131 | } 132 | 133 | @mixin flex { 134 | display: flex; 135 | } 136 | 137 | @mixin flex-column { 138 | flex-direction: column; 139 | } 140 | 141 | @mixin flex-grow($grow) { 142 | flex-grow: $grow; 143 | } 144 | 145 | @mixin justify-center { 146 | justify-content: center; 147 | } 148 | 149 | @mixin justify-space-between { 150 | justify-content: space-between; 151 | } 152 | 153 | @mixin align-center { 154 | align-items: center; 155 | } 156 | 157 | @mixin content-center { 158 | align-content: center; 159 | } 160 | 161 | @mixin text-center { 162 | text-align: center; 163 | } 164 | 165 | @mixin flex-wrap { 166 | flex-wrap: wrap; 167 | } 168 | 169 | @mixin full-height { 170 | @include height(100%); 171 | } 172 | 173 | @mixin full-width { 174 | @include width(100%); 175 | } 176 | 177 | @mixin background-primary { 178 | @include background-color($primary-color); 179 | } 180 | 181 | @mixin full-center { 182 | @include justify-center; 183 | @include align-center; 184 | @include content-center; 185 | @include text-center; 186 | } 187 | 188 | @mixin app-bar { 189 | @include flex; 190 | @include height(50px); 191 | @include background-primary; 192 | @include align-center; 193 | @include border-radius(5px); 194 | @include color($white); 195 | @include padding(5px) 196 | font-weight: 600; 197 | font-size: 125%; 198 | margin-top: 10px; 199 | } 200 | 201 | 202 | /* Common Styles 203 | ========================================================================== */ 204 | 205 | .flex { 206 | @include flex; 207 | } 208 | 209 | .flex-column { 210 | @include flex; 211 | @include flex-column; 212 | } 213 | 214 | .flex-wrap { 215 | @include flex-wrap; 216 | } 217 | 218 | .align-center { 219 | @include align-center; 220 | } 221 | 222 | .justify-space-between { 223 | @include justify-space-between; 224 | } 225 | 226 | .full-height { 227 | @include full-height; 228 | } 229 | 230 | .full-center { 231 | @include full-center; 232 | } 233 | 234 | .justify-center { 235 | @include justify-center; 236 | } 237 | 238 | .content-center { 239 | @include content-center; 240 | } 241 | 242 | .align-center { 243 | @include align-center; 244 | } 245 | 246 | .text-center { 247 | @include text-center; 248 | } 249 | 250 | .full-width { 251 | @include full-width; 252 | } 253 | 254 | .app-bar { 255 | @include app-bar; 256 | } -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import 'common'; 2 | 3 | body { 4 | font: 100% $font-stack; 5 | color: $grey600; 6 | } 7 | 8 | /* Supernote 9 | ========================================================================== */ 10 | 11 | #markov { 12 | @include flex; 13 | @include full-width; 14 | } 15 | 16 | .markov-container { 17 | @include flex; 18 | @include flex-column; 19 | @include align-center; 20 | .item { 21 | width: 100%; 22 | max-width: 700px; 23 | min-width: 400px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/services/utils-service.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | 3 | /** Author: Mike Chabot 4 | * Description: Utilities for markovify 5 | */ 6 | 7 | const _space = ' '; 8 | 9 | export const _randomNumberUpTo = (max) => { 10 | return Math.floor(Math.random() * max); 11 | } 12 | 13 | export const _splitOnSpace = (str) => { 14 | return str.split(_space); 15 | }; 16 | 17 | export const _joinWithSpace = (arr) => { 18 | return arr.join(_space) 19 | }; 20 | 21 | export const _shiftArray = (arr) => { 22 | arr.shift(); 23 | return arr; 24 | }; 25 | 26 | export const _splitOnSpaceShiftAndJoin = (str) => { 27 | let words = _splitOnSpace(str); 28 | words = _shiftArray(words); 29 | return _joinWithSpace(words); 30 | }; 31 | 32 | export const _scrub = (str) => { 33 | if (str) { 34 | return str.replace(/[^a-zA-Z\'\,\.\!\?\;\t ]/g, ""); 35 | } 36 | }; 37 | 38 | export const _contains = (arr, entry) => { 39 | if (!arr || _.isEmpty(arr)) return; 40 | return _.indexOf(arr, entry) !== -1; 41 | }; 42 | 43 | export default { 44 | _randomNumberUpTo, 45 | _splitOnSpace, 46 | _joinWithSpace, 47 | _shiftArray, 48 | _splitOnSpaceShiftAndJoin, 49 | _scrub, 50 | _contains 51 | }; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | module.exports = { 6 | devtool: 'eval', 7 | entry: [ 8 | 'webpack-dev-server/client?http://localhost:3040', 9 | 'webpack/hot/only-dev-server', 10 | './src/app' 11 | ], 12 | output: { 13 | path: path.join(__dirname, 'dist'), 14 | filename: 'bundle.js' 15 | }, 16 | resolve: { 17 | extensions: ['', '.js', '.jsx'] 18 | }, 19 | plugins: [ 20 | new webpack.HotModuleReplacementPlugin(), 21 | new HtmlWebpackPlugin({ 22 | template: path.resolve(__dirname, 'src/index.html'), 23 | inject: 'body' 24 | }) 25 | ], 26 | module: { 27 | loaders: [ 28 | { 29 | test: /\.(js|jsx)$/, 30 | loaders: ['react-hot', 'babel'], 31 | include: path.join(__dirname, 'src') 32 | } 33 | ] 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: './src/app', 7 | output: { 8 | path: path.join(__dirname, 'dist'), 9 | filename: 'bundle.js' 10 | }, 11 | resolve: { 12 | extensions: ['', '.js', '.jsx'] 13 | }, 14 | plugins: [ 15 | new HtmlWebpackPlugin({ 16 | template: path.resolve(__dirname, 'src/index.html'), 17 | inject: 'body' 18 | }) 19 | ], 20 | module: { 21 | loaders: [ 22 | { 23 | test: /\.(js|jsx)$/, 24 | loaders: ['react-hot', 'babel'], 25 | include: path.join(__dirname, 'src') 26 | } 27 | ] 28 | } 29 | }; --------------------------------------------------------------------------------