Skip to content

Commit 6b24dfc

Browse files
jawa-the-huttjawa-the-hutt
committed
use vue-cli service .env file pipeline for native
add dependencies at invoke fix issue with non-css preprocessor style tags
1 parent 93d55af commit 6b24dfc

18 files changed

+150
-109
lines changed

‎generator/index.js

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -53,50 +53,51 @@ module.exports = async (api, options, rootOptions) => {
5353
nativescript: {
5454
id: 'org.nativescript.application',
5555
'tns-ios': {
56-
version: '5.2.0'
56+
version: '5.2.1'
5757
},
5858
'tns-android': {
59-
version: '5.2.0'
59+
version: '5.2.1'
6060
}
6161
},
6262
scripts: {
63-
'build:android':
64-
// eslint-disable-next-line max-len
65-
'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=production.android tns build android --bundle --env.production && npm run remove-webpack-config',
66-
'build:ios':
67-
'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=production.ios tns build ios --bundle --env.production && npm run remove-webpack-config',
63+
'build:android': 'npm run setup-webpack-config && tns build android --bundle --env.production && npm run remove-webpack-config',
64+
'build:ios': 'npm run setup-webpack-config && tns build ios --bundle --env.production && npm run remove-webpack-config',
6865
'remove-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance post',
69-
'serve:android': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns run android --bundle --env.development',
70-
'serve:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.ios tns run ios --bundle --env.development',
66+
'serve:android': 'npm run setup-webpack-config && tns run android --bundle --env.development',
67+
'serve:ios': 'npm run setup-webpack-config && tns run ios --bundle --env.development',
7168
// 'inspect:android': 'npm run setup-webpack-config && vue inspect -- --env.android > out-android.js',
7269
// 'inspect:ios': 'npm run setup-webpack-config && vue inspect -- --env.ios > out-ios.js',
73-
'debug:android': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns debug android --bundle --env.development',
74-
'debug:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.ios tns debug ios --bundle --env.development',
75-
'preview:android':
76-
'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns preview --bundle --env.development --env.android',
77-
'preview:ios': 'npm run setup-webpack-config && cross-env-shell VUE_CLI_MODE=development.android tns preview --bundle --env.development --env.ios',
78-
'setup-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre'
70+
'debug:android': 'npm run setup-webpack-config && tns debug android --bundle --env.development',
71+
'debug:ios': 'npm run setup-webpack-config && tns debug ios --bundle --env.development',
72+
'preview:android': 'npm run setup-webpack-config && tns preview --bundle --env.development --env.android',
73+
'preview:ios': 'npm run setup-webpack-config && tns preview --bundle --env.development --env.ios',
74+
'setup-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre',
75+
'clean:platforms': 'rimraf platforms',
76+
'clean:android': 'rimraf platforms/android',
77+
'clean:ios': 'rimraf platforms/ios'
7978
},
8079
dependencies: {
8180
'nativescript-vue': '^2.0.2',
8281
'tns-core-modules': '^5.2.1'
8382
},
8483
devDependencies: {
85-
'cross-env': '^5.2.0',
8684
'nativescript-dev-webpack': '^0.17.0',
8785
'nativescript-vue-template-compiler': '^2.0.2',
8886
'nativescript-worker-loader': '~0.9.1',
8987
'node-sass': '^4.11.0',
90-
'string-replace-loader': '^2.1.1'
88+
'string-replace-loader': '^2.1.1',
89+
rimraf: '^2.6.3',
90+
webpack: '^4.29.6',
91+
'webpack-cli': '^3.2.3'
9192
}
9293
});
9394

9495
// add scripts when we are also developing for the web
9596
if (!options.isNativeOnly) {
9697
api.extendPackage({
9798
scripts: {
98-
'serve:web': 'vue-cli-service serve --mode development.web --env.development --env.web',
99-
'build:web': 'vue-cli-service build --mode production.web --env.production --env.web'
99+
'serve:web': 'vue-cli-service serve --mode development.web',
100+
'build:web': 'vue-cli-service build --mode production.web'
100101
//'inspect:web': 'npm run setup-webpack-config && vue inspect -- --env.web > out-web.js'
101102
}
102103
});
@@ -252,6 +253,13 @@ module.exports = async (api, options, rootOptions) => {
252253
nativeOnlyRenameFiles(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier.slice(0, -1));
253254
}
254255

256+
// remove router config for projects that don't use vue-router
257+
if (!rootOptions.router) {
258+
fs.remove(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'router' + genConfig.jsOrTs, (err) => {
259+
if (err) throw err;
260+
});
261+
}
262+
255263
if (api.hasPlugin('typescript')) {
256264
if (fs.existsSync(api.resolve('tslint.json'))) {
257265
require('../lib/tslint')({}, api, true);

‎generator/templates/nvw/src/App.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@
197197
<%_ } _%>
198198
<%_ } else { _%>
199199
<%# -------------------- IS Using standard CSS -------------------- -%>
200-
<style web lang="scss">
200+
<style web>
201201
@import '~styles/style-one';
202202

203203
.w-page {
@@ -209,7 +209,7 @@
209209
color: #42b983;
210210
}
211211
</style>
212-
<style native lang="scss">
212+
<style native>
213213
@import '~styles/style-one';
214214
</style>
215215
<%_ } _%>

‎generator/templates/nvw/src/components/HelloWorld.android.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<%_ } _%>
7979
<%_ } else { _%>
8080
<%# -------------------- IS Using standard CSS -------------------- -%>
81-
<style scoped lang="scss">
81+
<style scoped>
8282
.message {
8383
color: #42b983;
8484
}

‎generator/templates/nvw/src/components/HelloWorld.ios.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<%_ } _%>
7979
<%_ } else { _%>
8080
<%# -------------------- IS Using standard CSS -------------------- -%>
81-
<style scoped lang="scss">
81+
<style scoped>
8282
.message {
8383
color: #42b983;
8484
}

‎generator/templates/nvw/src/components/HelloWorld.native.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<%_ } _%>
7979
<%_ } else { _%>
8080
<%# -------------------- IS Using standard CSS -------------------- -%>
81-
<style scoped lang="scss">
81+
<style scoped>
8282
.message {
8383
color: #42b983;
8484
}

‎generator/templates/nvw/src/components/HelloWorld.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
<%_ } _%>
9393
<%_ } else { _%>
9494
<%# -------------------- IS Using standard CSS -------------------- -%>
95-
<style scoped lang="scss">
95+
<style scoped>
9696
.message {
9797
color: #42b983;
9898
display: block;

‎generator/templates/nvw/src/views/About.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
<%_ } _%>
106106
<%_ } else { _%>
107107
<%# -------------------- IS Using standard CSS -------------------- -%>
108-
<style scoped lang="scss">
108+
<style scoped>
109109
@import '~styles/style-two';
110110
@import '~styles/style-one';
111111

‎generator/templates/nvw/src/views/Home.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@
122122
<%_ } _%>
123123
<%_ } else { _%>
124124
<%# -------------------- IS Using standard CSS -------------------- -%>
125-
<style scoped lang="scss">
125+
<style scoped>
126126
@import '~styles/style-one';
127127
@import '~styles/style-two';
128128

‎generator/templates/simple/src/App.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,15 +198,15 @@
198198
<%_ } _%>
199199
<%_ } else { _%>
200200
<%# -------------------- IS Using standard CSS -------------------- -%>
201-
<style web lang="scss">
201+
<style web>
202202
@import '~styles/style-one';
203203

204204
.w-page {
205205
height: 100%;
206206
width: 100%;
207207
}
208208
</style>
209-
<style native lang="scss">
209+
<style native>
210210
@import '~styles/style-one';
211211
</style>
212212
<%_ } _%>

‎generator/templates/simple/src/components/HelloWorld.android.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<%_ } _%>
7979
<%_ } else { _%>
8080
<%# -------------------- IS Using standard CSS -------------------- -%>
81-
<style scoped lang="scss">
81+
<style scoped>
8282
.message {
8383
color: #42b983;
8484
}

‎generator/templates/simple/src/components/HelloWorld.ios.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<%_ } _%>
7979
<%_ } else { _%>
8080
<%# -------------------- IS Using standard CSS -------------------- -%>
81-
<style scoped lang="scss">
81+
<style scoped>
8282
.message {
8383
color: #42b983;
8484
}

‎generator/templates/simple/src/components/HelloWorld.native.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<%_ } _%>
7979
<%_ } else { _%>
8080
<%# -------------------- IS Using standard CSS -------------------- -%>
81-
<style scoped lang="scss">
81+
<style scoped>
8282
.message {
8383
color: #42b983;
8484
}

‎generator/templates/simple/src/components/HelloWorld.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
<%_ } _%>
9090
<%_ } else { _%>
9191
<%# -------------------- IS Using standard CSS -------------------- -%>
92-
<style scoped lang="scss">
92+
<style scoped>
9393
.message {
9494
color: #42b983;
9595
display: block;

‎generator/templates/simple/src/views/About.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
<%_ } _%>
8181
<%_ } else { _%>
8282
<%# -------------------- IS Using standard CSS -------------------- -%>
83-
<style scoped lang="scss">
83+
<style scoped>
8484
@import '~styles/style-two';
8585
@import '~styles/style-one';
8686
</style>

‎generator/templates/simple/src/views/Home.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
<%_ } _%>
116116
<%_ } else { _%>
117117
<%# -------------------- IS Using standard CSS -------------------- -%>
118-
<style scoped lang="scss">
118+
<style scoped>
119119
@import '~styles/style-one';
120120
@import '~styles/style-two';
121121

‎index.js

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,30 @@ const getBlockRegex = (tag, mode) => {
8484

8585
module.exports = (api, projectOptions) => {
8686
const jsOrTs = api.hasPlugin('typescript') ? '.ts' : '.js';
87+
let env = new Object();
88+
let flags = new Array();
8789

88-
// get the --env command line options and put them in the env variable
89-
const [, , ...processArgs] = process.argv;
90-
const flags = [...processArgs].filter((f) => f.startsWith('--env.')).map((f) => f.substring(6));
9190
const addOption = (all, current) => {
9291
all[current] = true;
9392
return all;
9493
};
95-
const env = flags.reduce(addOption, {});
94+
95+
// are we using the vue cli or not and if so are we passing in the correct options
96+
if (api && api.service.mode && api.service.mode !== 'development') {
97+
// will convert the --mode options into an array for later use
98+
flags = api.service.mode.split('.');
99+
} else {
100+
// get the --env command line options and put them in the env variable
101+
const [, , ...processArgs] = process.argv;
102+
flags = [...processArgs].filter((f) => f.startsWith('--env.')).map((f) => f.substring(6));
103+
104+
// take advantage of the vue cli api to load the --env items into process.env.
105+
// we are filtering out the items, by catching the '=' sign, brought in from nsconfig.json as those don't need loaded into process.env
106+
api.service.loadEnv(flags.filter((o) => !o.includes('=')).join('.'));
107+
}
108+
109+
// setup the traditional {N} webpack 'env' variable
110+
env = flags.reduce(addOption, {});
96111

97112
const platform = env && ((env.android && 'android') || (env.ios && 'ios') || (env.web && 'web'));
98113

@@ -449,7 +464,8 @@ const nativeConfig = (api, projectOptions, env, jsOrTs, projectRoot, platform) =
449464
.get('options'),
450465
{
451466
minimize: false,
452-
url: false
467+
url: false,
468+
importLoaders: 1
453469
}
454470
)
455471
)
@@ -730,9 +746,7 @@ const nativeConfig = (api, projectOptions, env, jsOrTs, projectRoot, platform) =
730746
.plugin('define')
731747
.use(DefinePlugin, [
732748
Object.assign(config.plugin('define').get('args')[0], {
733-
TNS_ENV: JSON.stringify(mode),
734-
TNS_APP_PLATFORM: JSON.stringify(process.env.VUE_APP_PLATFORM),
735-
TNS_APP_MODE: JSON.stringify(process.env.VUE_APP_MODE)
749+
TNS_ENV: JSON.stringify(mode)
736750
})
737751
])
738752
.end();
@@ -995,18 +1009,18 @@ const webConfig = (api, projectOptions, env, jsOrTs, projectRoot) => {
9951009
.options(imageLoaderOptions)
9961010
.end();
9971011

998-
// Define useful constants like TNS_WEBPACK
999-
// Merge DefinePlugin options that come in native from CLI 3
1000-
config
1001-
.plugin('define')
1002-
.use(DefinePlugin, [
1003-
Object.assign(config.plugin('define').get('args')[0], {
1004-
TNS_ENV: JSON.stringify(mode),
1005-
TNS_APP_PLATFORM: JSON.stringify(process.env.VUE_APP_PLATFORM),
1006-
TNS_APP_MODE: JSON.stringify(process.env.VUE_APP_MODE)
1007-
})
1008-
])
1009-
.end();
1012+
// // // // Define useful constants like TNS_WEBPACK
1013+
// // // // Merge DefinePlugin options that come in native from CLI 3
1014+
// // // config
1015+
// // // .plugin('define')
1016+
// // // .use(DefinePlugin, [
1017+
// // // Object.assign(config.plugin('define').get('args')[0], {
1018+
// // // TNS_ENV: JSON.stringify(mode),
1019+
// // // TNS_APP_PLATFORM: JSON.stringify(process.env.VUE_APP_PLATFORM),
1020+
// // // TNS_APP_MODE: JSON.stringify(process.env.VUE_APP_MODE)
1021+
// // // })
1022+
// // // ])
1023+
// // // .end();
10101024

10111025
// Remove all files from the out dir.
10121026
config
@@ -1090,8 +1104,6 @@ const webConfig = (api, projectOptions, env, jsOrTs, projectRoot) => {
10901104
// directly to edit it.
10911105
const forTSPluginConfig = config.plugin('fork-ts-checker').get('args')[0];
10921106

1093-
1094-
10951107
forTSPluginConfig.tsconfig = resolve(projectRoot, 'tsconfig.json');
10961108
forTSPluginConfig.tslint = fs.pathExistsSync(resolve(projectRoot, 'src')) ? resolve(projectRoot, 'tslint.json') : false;
10971109

0 commit comments

Comments
 (0)