use vue-cli service .env file pipeline for native

jawa-the-hutt · jawa-the-hutt · commit 6b24dfc900fa · 2019-03-10T23:17:45.000-05:00
add dependencies at invoke
fix issue with non-css preprocessor style tags
diff --git a/generator/index.js b/generator/index.js
@@ -53,50 +53,51 @@ module.exports = async (api, options, rootOptions) => {
     nativescript: {
       id: 'org.nativescript.application',
       'tns-ios': {
-        version: '5.2.0'
+        version: '5.2.1'
       },
       'tns-android': {
-        version: '5.2.0'
+        version: '5.2.1'
       }
     },
     scripts: {
-      'build:android':
-        // eslint-disable-next-line max-len
-        'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=production.android tns build android --bundle --env.production && npm run remove-webpack-config',
-      'build:ios':
-        'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=production.ios tns build ios --bundle --env.production && npm run remove-webpack-config',
+      'build:android': 'npm run setup-webpack-config && tns build android --bundle --env.production && npm run remove-webpack-config',
+      'build:ios': 'npm run setup-webpack-config && tns build ios --bundle --env.production && npm run remove-webpack-config',
       'remove-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance post',
-      'serve:android': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns run android --bundle --env.development',
-      'serve:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.ios tns run ios --bundle --env.development',
+      'serve:android': 'npm run setup-webpack-config && tns run android --bundle --env.development',
+      'serve:ios': 'npm run setup-webpack-config && tns run ios --bundle --env.development',
       // 'inspect:android': 'npm run setup-webpack-config && vue inspect -- --env.android > out-android.js',
       // 'inspect:ios': 'npm run setup-webpack-config && vue inspect -- --env.ios > out-ios.js',
-      'debug:android': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns debug android --bundle --env.development',
-      'debug:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.ios tns debug ios --bundle --env.development',
-      'preview:android':
-        'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns preview --bundle --env.development --env.android',
-      'preview:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns preview --bundle --env.development --env.ios',
-      'setup-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre'
+      'debug:android': 'npm run setup-webpack-config && tns debug android --bundle --env.development',
+      'debug:ios': 'npm run setup-webpack-config && tns debug ios --bundle --env.development',
+      'preview:android': 'npm run setup-webpack-config && tns preview --bundle --env.development --env.android',
+      'preview:ios': 'npm run setup-webpack-config && tns preview --bundle --env.development --env.ios',
+      'setup-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre',
+      'clean:platforms': 'rimraf platforms',
+      'clean:android': 'rimraf platforms/android',
+      'clean:ios': 'rimraf platforms/ios'
     },
     dependencies: {
       'nativescript-vue': '^2.0.2',
       'tns-core-modules': '^5.2.1'
     },
     devDependencies: {
-      'cross-env': '^5.2.0',
       'nativescript-dev-webpack': '^0.17.0',
       'nativescript-vue-template-compiler': '^2.0.2',
       'nativescript-worker-loader': '~0.9.1',
       'node-sass': '^4.11.0',
-      'string-replace-loader': '^2.1.1'
+      'string-replace-loader': '^2.1.1',
+      rimraf: '^2.6.3',
+      webpack: '^4.29.6',
+      'webpack-cli': '^3.2.3'
     }
   });
 
   // add scripts when we are also developing for the web
   if (!options.isNativeOnly) {
     api.extendPackage({
       scripts: {
-        'serve:web': 'vue-cli-service serve --mode development.web --env.development --env.web',
-        'build:web': 'vue-cli-service build --mode production.web --env.production --env.web'
+        'serve:web': 'vue-cli-service serve --mode development.web',
+        'build:web': 'vue-cli-service build --mode production.web'
         //'inspect:web': 'npm run setup-webpack-config && vue inspect -- --env.web > out-web.js'
       }
     });
@@ -252,6 +253,13 @@ module.exports = async (api, options, rootOptions) => {
       nativeOnlyRenameFiles(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier.slice(0, -1));
     }
 
+    // remove router config for projects that don't use vue-router
+    if (!rootOptions.router) {
+      fs.remove(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'router' + genConfig.jsOrTs, (err) => {
+        if (err) throw err;
+      });
+    }
+
     if (api.hasPlugin('typescript')) {
       if (fs.existsSync(api.resolve('tslint.json'))) {
         require('../lib/tslint')({}, api, true);
diff --git a/generator/templates/nvw/src/App.vue b/generator/templates/nvw/src/App.vue
@@ -197,7 +197,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style web lang="scss">
+<style web>
   @import '~styles/style-one';
 
   .w-page {
@@ -209,7 +209,7 @@
     color: #42b983;
   }
 </style>
-<style native lang="scss">
+<style native>
   @import '~styles/style-one';
 </style>
 <%_ } _%>
diff --git a/generator/templates/nvw/src/components/HelloWorld.android.vue b/generator/templates/nvw/src/components/HelloWorld.android.vue
@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }
diff --git a/generator/templates/nvw/src/components/HelloWorld.ios.vue b/generator/templates/nvw/src/components/HelloWorld.ios.vue
@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }
diff --git a/generator/templates/nvw/src/components/HelloWorld.native.vue b/generator/templates/nvw/src/components/HelloWorld.native.vue
@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }
diff --git a/generator/templates/nvw/src/components/HelloWorld.vue b/generator/templates/nvw/src/components/HelloWorld.vue
@@ -92,7 +92,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
     display: block;
diff --git a/generator/templates/nvw/src/views/About.vue b/generator/templates/nvw/src/views/About.vue
@@ -105,7 +105,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   @import '~styles/style-two';
   @import '~styles/style-one';
 
diff --git a/generator/templates/nvw/src/views/Home.vue b/generator/templates/nvw/src/views/Home.vue
@@ -122,7 +122,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   @import '~styles/style-one';
   @import '~styles/style-two';
 
diff --git a/generator/templates/simple/src/App.vue b/generator/templates/simple/src/App.vue
@@ -198,15 +198,15 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style web lang="scss">
+<style web>
   @import '~styles/style-one';
 
   .w-page {
     height: 100%;
     width: 100%;
   }
 </style>
-<style native lang="scss">
+<style native>
   @import '~styles/style-one';
 </style>
 <%_ } _%>
diff --git a/generator/templates/simple/src/components/HelloWorld.android.vue b/generator/templates/simple/src/components/HelloWorld.android.vue
@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }
diff --git a/generator/templates/simple/src/components/HelloWorld.ios.vue b/generator/templates/simple/src/components/HelloWorld.ios.vue
@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }
diff --git a/generator/templates/simple/src/components/HelloWorld.native.vue b/generator/templates/simple/src/components/HelloWorld.native.vue
@@ -78,7 +78,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
   }
diff --git a/generator/templates/simple/src/components/HelloWorld.vue b/generator/templates/simple/src/components/HelloWorld.vue
@@ -89,7 +89,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   .message {
     color: #42b983;
     display: block;
diff --git a/generator/templates/simple/src/views/About.vue b/generator/templates/simple/src/views/About.vue
@@ -80,7 +80,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   @import '~styles/style-two';
   @import '~styles/style-one';
 </style>
diff --git a/generator/templates/simple/src/views/Home.vue b/generator/templates/simple/src/views/Home.vue
@@ -115,7 +115,7 @@
 <%_   } _%>
 <%_ } else { _%>
 <%# -------------------- IS Using standard CSS -------------------- -%>
-<style scoped lang="scss">
+<style scoped>
   @import '~styles/style-one';
   @import '~styles/style-two';
 
diff --git a/index.js b/index.js
@@ -84,15 +84,30 @@ const getBlockRegex = (tag, mode) => {
 
 module.exports = (api, projectOptions) => {
   const jsOrTs = api.hasPlugin('typescript') ? '.ts' : '.js';
+  let env = new Object();
+  let flags = new Array();
 
-  // get the --env command line options and put them in the env variable
-  const [, , ...processArgs] = process.argv;
-  const flags = [...processArgs].filter((f) => f.startsWith('--env.')).map((f) => f.substring(6));
   const addOption = (all, current) => {
     all[current] = true;
     return all;
   };
-  const env = flags.reduce(addOption, {});
+
+  // are we using the vue cli or not and if so are we passing in the correct options
+  if (api && api.service.mode && api.service.mode !== 'development') {
+    // will convert the --mode options into an array for later use
+    flags = api.service.mode.split('.');
+  } else {
+    // get the --env command line options and put them in the env variable
+    const [, , ...processArgs] = process.argv;
+    flags = [...processArgs].filter((f) => f.startsWith('--env.')).map((f) => f.substring(6));
+
+    // take advantage of the vue cli api to load the --env items into process.env.
+    // we are filtering out the items, by catching the '=' sign, brought in from nsconfig.json as those don't need loaded into process.env
+    api.service.loadEnv(flags.filter((o) => !o.includes('=')).join('.'));
+  }
+
+  // setup the traditional {N} webpack 'env' variable
+  env = flags.reduce(addOption, {});
 
   const platform = env && ((env.android && 'android') || (env.ios && 'ios') || (env.web && 'web'));
 
@@ -449,7 +464,8 @@ const nativeConfig = (api, projectOptions, env, jsOrTs, projectRoot, platform) =
             .get('options'),
           {
             minimize: false,
-            url: false
+            url: false,
+            importLoaders: 1
           }
         )
       )
@@ -730,9 +746,7 @@ const nativeConfig = (api, projectOptions, env, jsOrTs, projectRoot, platform) =
       .plugin('define')
       .use(DefinePlugin, [
         Object.assign(config.plugin('define').get('args')[0], {
-          TNS_ENV: JSON.stringify(mode),
-          TNS_APP_PLATFORM: JSON.stringify(process.env.VUE_APP_PLATFORM),
-          TNS_APP_MODE: JSON.stringify(process.env.VUE_APP_MODE)
+          TNS_ENV: JSON.stringify(mode)
         })
       ])
       .end();
@@ -995,18 +1009,18 @@ const webConfig = (api, projectOptions, env, jsOrTs, projectRoot) => {
       .options(imageLoaderOptions)
       .end();
 
-    // Define useful constants like TNS_WEBPACK
-    // Merge DefinePlugin options that come in native from CLI 3
-    config
-      .plugin('define')
-      .use(DefinePlugin, [
-        Object.assign(config.plugin('define').get('args')[0], {
-          TNS_ENV: JSON.stringify(mode),
-          TNS_APP_PLATFORM: JSON.stringify(process.env.VUE_APP_PLATFORM),
-          TNS_APP_MODE: JSON.stringify(process.env.VUE_APP_MODE)
-        })
-      ])
-      .end();
+    // // // // Define useful constants like TNS_WEBPACK
+    // // // // Merge DefinePlugin options that come in native from CLI 3
+    // // // config
+    // // //   .plugin('define')
+    // // //   .use(DefinePlugin, [
+    // // //     Object.assign(config.plugin('define').get('args')[0], {
+    // // //       TNS_ENV: JSON.stringify(mode),
+    // // //       TNS_APP_PLATFORM: JSON.stringify(process.env.VUE_APP_PLATFORM),
+    // // //       TNS_APP_MODE: JSON.stringify(process.env.VUE_APP_MODE)
+    // // //     })
+    // // //   ])
+    // // //   .end();
 
     // Remove all files from the out dir.
     config
@@ -1090,8 +1104,6 @@ const webConfig = (api, projectOptions, env, jsOrTs, projectRoot) => {
       // directly to edit it.
       const forTSPluginConfig = config.plugin('fork-ts-checker').get('args')[0];
 
-
-
       forTSPluginConfig.tsconfig = resolve(projectRoot, 'tsconfig.json');
       forTSPluginConfig.tslint = fs.pathExistsSync(resolve(projectRoot, 'src')) ? resolve(projectRoot, 'tslint.json') : false;
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@`
`78`	`78`	`<%_ } _%>`
`79`	`79`	`<%_ } else { _%>`
`80`	`80`	`<%# -------------------- IS Using standard CSS -------------------- -%>`
`81`		`-<style scoped lang="scss">`
	`81`	`+<style scoped>`
`82`	`82`	`.message {`
`83`	`83`	`color: #42b983;`
`84`	`84`	`}`