Merge pull request #15 from simon0191/add-environment-support

Add environment vars support

Author: Matt Levy

template/config/webpack.config.base.js

@@ -1,5 +1,4 @@
 const helpers = require("./helpers"),
-  DefinePlugin = require('webpack/lib/DefinePlugin'),
   CopyWebpackPlugin = require('copy-webpack-plugin');
 
 let config = {
@@ -29,12 +28,6 @@ let config = {
       {from: 'src/assets', to: '../assets'},
       {from: 'src/css', to: '../css'}
     ]),
-    new DefinePlugin({
-      'process.env': {
-        'ENV': process.env.NODE_ENV,
-        'NODE_ENV': process.env.NODE_ENV
-      }
-    })
   ]
 };
 

template/config/webpack.config.coverage.js

@@ -1,4 +1,6 @@
-const webpackConfig = require("./webpack.config.base");
+const webpackConfig = require("./webpack.config.base")
+  DefinePlugin = require('webpack/lib/DefinePlugin'),
+  env = require('../environment/dev.env');
 
 webpackConfig.module.rules[1].query = {
   compilerOptions: {
@@ -24,4 +26,10 @@ webpackConfig.module.rules = [...webpackConfig.module.rules,
 
 webpackConfig.devtool = "inline-source-map";
 
+webpackConfig.plugins = [...webpackConfig.plugins,
+  new DefinePlugin({
+    'process.env': env
+  })
+];
+
 module.exports = webpackConfig;

template/config/webpack.config.dev.js

@@ -1,5 +1,7 @@
 const helpers = require("./helpers"),
-  webpackConfig = require("./webpack.config.base")
+  webpackConfig = require("./webpack.config.base"),
+  DefinePlugin = require('webpack/lib/DefinePlugin'),
+  env = require('../environment/dev.env');
 
 webpackConfig.devServer = {
   port: 8080,
@@ -10,4 +12,10 @@ webpackConfig.devServer = {
   open: true
 };
 
+webpackConfig.plugins = [...webpackConfig.plugins,
+  new DefinePlugin({
+    'process.env': env
+  })
+]
+
 module.exports = webpackConfig;

template/config/webpack.config.prod.js

@@ -1,7 +1,9 @@
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'),
   CompressionPlugin = require('compression-webpack-plugin'),
   webpackConfig = require("./webpack.config.base"),
-  helpers = require("./helpers");
+  helpers = require("./helpers"),
+  DefinePlugin = require('webpack/lib/DefinePlugin'),
+  env = require('../environment/prod.env');
 
 webpackConfig.entry["main.min"] = helpers.root("/src/main.ts");
 
@@ -13,6 +15,9 @@ webpackConfig.plugins = [...webpackConfig.plugins,
   new CompressionPlugin({
     asset: "[path].gz[query]",
     test: /\.min\.js$/
+  }),
+  new DefinePlugin({
+    'process.env': env
   })
 ];
 

template/config/webpack.config.test.js

@@ -1,5 +1,7 @@
 var webpack = require('webpack'),
-    webpackConfig = require('./webpack.config.base');
+    webpackConfig = require('./webpack.config.base'),
+    DefinePlugin = require('webpack/lib/DefinePlugin'),
+    env = require('../environment/dev.env');
 
 webpackConfig.module.rules = [{
     test: /\.ts$/,
@@ -19,11 +21,14 @@ webpackConfig.module.rules = [{
   }
 ];
 
-webpackConfig.plugins = [
-    new webpack.SourceMapDevToolPlugin({
-        filename: null, // if no value is provided the sourcemap is inlined
-        test: /\.(ts|js)($|\?)/i
-    })
+webpackConfig.plugins = [...webpackConfig.plugins,
+  new webpack.SourceMapDevToolPlugin({
+    filename: null, // if no value is provided the sourcemap is inlined
+    test: /\.(ts|js)($|\?)/i
+  }),
+  new DefinePlugin({
+    'process.env': env
+  })
 ];
 
 webpackConfig.devtool = 'inline-source-map';

template/environment/dev.env.js

@@ -0,0 +1,6 @@
+module.exports = {
+  ENV: '"development"',
+  NODE_ENV: '"development"',
+  DEBUG_MODE: true,
+  API_KEY: '"XXXX-XXXXX-XXXX-XXXX"',
+}

template/environment/prod.env.js

@@ -0,0 +1,6 @@
+module.exports = {
+  ENV: '"production"',
+  NODE_ENV: '"production"',
+  DEBUG_MODE: false,
+  API_KEY: '"XXXX-XXXXX-XXXX-XXXX"',
+}

template/karma.unit.js

@@ -1,4 +1,4 @@
-var webpackConfig = require('./config/webpack.config.base');
+var webpackConfig = require('./config/webpack.config.test');
 
 module.exports = function(config) {
   config.set({
@@ -11,10 +11,7 @@ module.exports = function(config) {
     preprocessors: {
       'src/test.ts': ['webpack']
     },
-    webpack: {
-      resolve: webpackConfig.resolve,
-      module: webpackConfig.module
-    },
+    webpack: webpackConfig,
     webpackServer: { noInfo: true },
     reporters: ['mocha'],
     port: 9876,

template/src/components/home/home.html

@@ -2,7 +2,7 @@
     <div class="row">
         <div class="content col-md-4">
             <h1><strong>Thank you for using <span class="text-primary package">\{{package}}</span></strong></h1>
-
+            <p>This project is running in <strong class="mode">\{{mode}} mode</strong></p>
             <p>Make sure to follow the project on <a v-bind:href="repo">GitHub</a> to stay up to date with the latest releases, or contribute to the broject by opening an issue or making a pull-request!</p>
         </div>
     </div>

template/src/components/home/home.spec.ts

@@ -13,6 +13,8 @@ describe('Home component', () => {
     directiveTest.createComponent();
     await directiveTest.execute((vm) => {
       debugger;
+      const mode = process.env.ENV;
+      expect(vm.$el.querySelector('.mode').textContent).to.equal(`${mode} mode`);
       expect(vm.$el.querySelector('.package').textContent).to.equal('vue-webpack-typescript');
     });
   });