Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

Commit 2de4c68

Browse files
Fatmerosen-vladimirov
Fatme
authored and
rosen-vladimirov
committed
feat: introduce webpack only workflow (#882)
* fix: don't provide fake paths to the {N} CLI - relative to the `app` folder * feat: remove not needed hooks * feat: remove webpack compiler logic * fix: don't copy app_resources to the platforms folder * fix: respect --env.verbose * feat: respect production mode based on release option Implements: #911 * fix: watch platform specific files from node_modules Rel to: NativeScript/nativescript-cli#4480 * fix: don't emit absolute webpack's runtime files Previously we needed to emit files with full paths as {N} CLI relies on this and expected them in a such format. With the changes for "webpack-only" mode, {N} CLI expects only relative paths. So we need to fix this in order to ensure that runtime.js file will not be transferred on device on change in hmr mode. * fix: don't process runtime.js files We needed a special processing for `runtime.js` files as we excluded them when transferring the files on device. As the CLI is filtering and emit only hot-update files we don't need this logic anymore. * fix: emit runtime files and entry point files * fix: update webpack config files of demo apps * fix: don't use short imports in demo apps * fix: update dependencies of demo apps so they are compatible with 6.0 release
1 parent fc4e415 commit 2de4c68

32 files changed

+163
-622
lines changed

‎demo/AngularApp/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,8 @@
4242
"mocha": "~5.2.0",
4343
"mochawesome": "~3.1.2",
4444
"nativescript-dev-appium": "next",
45-
"nativescript-dev-sass": "next",
46-
"nativescript-dev-typescript": "next",
4745
"nativescript-dev-webpack": "next",
46+
"node-sass": "^4.12.0",
4847
"typescript": "~3.4.5"
4948
},
5049
"scripts": {

‎demo/AngularApp/webpack.config.js

+14-18
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,15 @@ module.exports = env => {
4444

4545
// You can provide the following flags when running 'tns run android|ios'
4646
aot, // --env.aot
47-
snapshot, // --env.snapshot
47+
snapshot, // --env.snapshot,
48+
production, // --env.production
4849
uglify, // --env.uglify
4950
report, // --env.report
5051
sourceMap, // --env.sourceMap
5152
hiddenSourceMap, // --env.hiddenSourceMap
5253
hmr, // --env.hmr,
5354
unitTesting, // --env.unitTesting
55+
verbose, // --env.verbose
5456
} = env;
5557

5658
const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
@@ -60,8 +62,9 @@ module.exports = env => {
6062
const tsConfigName = "tsconfig.tns.json";
6163
const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
6264
const entryPath = `.${sep}${entryModule}`;
63-
const entries = { bundle: entryPath, application: "./application.android" };
64-
if (platform === "ios") {
65+
const entries = { bundle: entryPath };
66+
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
67+
if (platform === "ios" && !areCoreModulesExternal) {
6568
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
6669
};
6770

@@ -101,8 +104,14 @@ module.exports = env => {
101104

102105
let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
103106

107+
const itemsToClean = [`${dist}/**/*`];
108+
if (platform === "android") {
109+
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
110+
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
111+
}
112+
104113
const config = {
105-
mode: uglify ? "production" : "development",
114+
mode: production ? "production" : "development",
106115
context: appFullPath,
107116
externals,
108117
watchOptions: {
@@ -257,7 +266,7 @@ module.exports = env => {
257266
"process": undefined,
258267
}),
259268
// Remove all files from the out dir.
260-
new CleanWebpackPlugin([`${dist}/**/*`]),
269+
new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
261270
// Copy assets to out dir. Add your own globs as needed.
262271
new CopyWebpackPlugin([
263272
{ from: { glob: "fonts/**" } },
@@ -274,19 +283,6 @@ module.exports = env => {
274283
],
275284
};
276285

277-
// Copy the native app resources to the out dir
278-
// only if doing a full build (tns run/build) and not previewing (tns preview)
279-
if (!externals || externals.length === 0) {
280-
config.plugins.push(new CopyWebpackPlugin([
281-
{
282-
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
283-
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
284-
context: projectRoot
285-
},
286-
]));
287-
}
288-
289-
290286
if (report) {
291287
// Generate report files for bundles content
292288
config.plugins.push(new BundleAnalyzerPlugin({

‎demo/JavaScriptApp/app/activity.android.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const frame = require("ui/frame");
1+
const frame = require("tns-core-modules/ui/frame");
22

33
const superProto = androidx.appcompat.app.AppCompatActivity.prototype;
44
androidx.appcompat.app.AppCompatActivity.extend("org.myApp.MainActivity", {

‎demo/JavaScriptApp/app/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ You can use this file to perform app-level initialization, but the primary
44
purpose of the file is to pass control to the app’s first module.
55
*/
66

7-
var application = require("application");
7+
var application = require("tns-core-modules/application");
88

99
application.start({ moduleName: "main-page" });
1010

‎demo/JavaScriptApp/app/main-page.android.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var frameModule = require("ui/frame");
1+
var frameModule = require("tns-core-modules/ui/frame");
22
var createViewModel = require("./main-view-model").createViewModel;
33

44
function onNavigatingTo(args) {

‎demo/JavaScriptApp/app/main-page.ios.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var frameModule = require("ui/frame");
1+
var frameModule = require("tns-core-modules/ui/frame");
22
var createViewModel = require("./main-view-model").createViewModel;
33

44
function onNavigatingTo(args) {

‎demo/JavaScriptApp/app/main-view-model.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var Observable = require("data/observable").Observable;
1+
var Observable = require("tns-core-modules/data/observable").Observable;
22

33
function getMessage(counter) {
44
if (counter <= 0) {

‎demo/JavaScriptApp/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,8 @@
2727
"mocha": "~5.2.0",
2828
"mochawesome": "~3.1.2",
2929
"nativescript-dev-appium": "next",
30-
"nativescript-dev-sass": "next",
3130
"nativescript-dev-webpack": "next",
32-
"node-sass": "^4.7.1"
31+
"node-sass": "4.12.0"
3332
},
3433
"scripts": {
3534
"setup": "npm pack ../../ && npm i -D nativescript-dev-webpack*.tgz",

‎demo/JavaScriptApp/webpack.config.js

+17-16
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const nsWebpack = require("nativescript-dev-webpack");
55
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
66
const CleanWebpackPlugin = require("clean-webpack-plugin");
77
const CopyWebpackPlugin = require("copy-webpack-plugin");
8+
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
89
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
910
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
1011
const TerserPlugin = require("terser-webpack-plugin");
@@ -39,12 +40,14 @@ module.exports = env => {
3940

4041
// You can provide the following flags when running 'tns run android|ios'
4142
snapshot, // --env.snapshot
43+
production, // --env.production
4244
uglify, // --env.uglify
4345
report, // --env.report
4446
sourceMap, // --env.sourceMap
4547
hiddenSourceMap, // --env.hiddenSourceMap
4648
hmr, // --env.hmr,
47-
unitTesting, // --env.unitTesting
49+
unitTesting, // --env.unitTesting,
50+
verbose, // --env.verbose
4851
} = env;
4952

5053
const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
@@ -55,14 +58,21 @@ module.exports = env => {
5558
const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
5659
const entryPath = `.${sep}${entryModule}.js`;
5760
const entries = { bundle: entryPath, application: "./application.android" };
58-
if (platform === "ios") {
61+
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
62+
if (platform === "ios" && !areCoreModulesExternal) {
5963
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
6064
};
6165

6266
let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
6367

68+
const itemsToClean = [`${dist}/**/*`];
69+
if (platform === "android") {
70+
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
71+
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
72+
}
73+
6474
const config = {
65-
mode: uglify ? "production" : "development",
75+
mode: production ? "production" : "development",
6676
context: appFullPath,
6777
externals,
6878
watchOptions: {
@@ -208,7 +218,7 @@ module.exports = env => {
208218
"process": undefined,
209219
}),
210220
// Remove all files from the out dir.
211-
new CleanWebpackPlugin([`${dist}/**/*`]),
221+
new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
212222
// Copy assets to out dir. Add your own globs as needed.
213223
new CopyWebpackPlugin([
214224
{ from: { glob: "fonts/**" } },
@@ -226,21 +236,12 @@ module.exports = env => {
226236
}),
227237
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
228238
new nsWebpack.WatchStateLoggerPlugin(),
239+
new ExtraWatchWebpackPlugin({
240+
files: [`node_modules/**/*.${platform}.js`]
241+
})
229242
],
230243
};
231244

232-
// Copy the native app resources to the out dir
233-
// only if doing a full build (tns run/build) and not previewing (tns preview)
234-
if (!externals || externals.length === 0) {
235-
config.plugins.push(new CopyWebpackPlugin([
236-
{
237-
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
238-
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
239-
context: projectRoot
240-
},
241-
]));
242-
}
243-
244245
if (report) {
245246
// Generate report files for bundles content
246247
config.plugins.push(new BundleAnalyzerPlugin({

‎demo/TypeScriptApp/app/activity.android.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {setActivityCallbacks, AndroidActivityCallbacks} from "ui/frame";
1+
import {setActivityCallbacks, AndroidActivityCallbacks} from "tns-core-modules/ui/frame";
22

33
@JavaProxy("org.myApp.MainActivity")
44
class Activity extends androidx.appcompat.app.AppCompatActivity {

‎demo/TypeScriptApp/app/app.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ You can use this file to perform app-level initialization, but the primary
44
purpose of the file is to pass control to the app’s first module.
55
*/
66

7-
import * as app from 'application';
7+
import * as app from 'tns-core-modules/application';
88

99
app.start({ moduleName: 'main-page' });
1010

‎demo/TypeScriptApp/app/main-page.ios.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ a code-behind file. The code-behind is a great place to place your view
44
logic, and to set up your page’s data binding.
55
*/
66

7-
import { EventData } from 'data/observable';
8-
import { Page } from 'ui/page';
7+
import { EventData } from 'tns-core-modules/data/observable';
8+
import { Page } from 'tns-core-modules/ui/page';
99
import { HelloWorldModel } from './main-view-model';
10-
import { Label } from 'ui/label';
11-
import * as frameModule from 'ui/frame';
10+
import { Label } from 'tns-core-modules/ui/label';
11+
import * as frameModule from 'tns-core-modules/ui/frame';
1212

1313
// Event handler for Page "navigatingTo" event attached in main-page.xml
1414
export function onNavigatingTo(args: EventData) {

‎demo/TypeScriptApp/app/main-view-model.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Observable} from 'data/observable';
1+
import {Observable} from 'tns-core-modules/data/observable';
22

33
export class HelloWorldModel extends Observable {
44

‎demo/TypeScriptApp/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,9 @@
2727
"mocha": "~5.2.0",
2828
"mochawesome": "~3.1.2",
2929
"nativescript-dev-appium": "next",
30-
"nativescript-dev-sass": "next",
31-
"nativescript-dev-typescript": "next",
3230
"nativescript-dev-webpack": "next",
33-
"typescript": "~3.2.2"
31+
"typescript": "~3.2.2",
32+
"node-sass": "^4.12.0"
3433
},
3534
"scripts": {
3635
"setup": "npm pack ../../ && npm i -D nativescript-dev-webpack*.tgz",

‎demo/TypeScriptApp/webpack.config.js

+30-24
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target
66
const CleanWebpackPlugin = require("clean-webpack-plugin");
77
const CopyWebpackPlugin = require("copy-webpack-plugin");
88
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
9+
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
910
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
1011
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
1112
const TerserPlugin = require("terser-webpack-plugin");
@@ -40,12 +41,14 @@ module.exports = env => {
4041

4142
// You can provide the following flags when running 'tns run android|ios'
4243
snapshot, // --env.snapshot
44+
production, // --env.production
4345
uglify, // --env.uglify
4446
report, // --env.report
4547
sourceMap, // --env.sourceMap
4648
hiddenSourceMap, // --env.hiddenSourceMap
4749
hmr, // --env.hmr,
48-
unitTesting, // --env.unitTesting
50+
unitTesting, // --env.unitTesting,
51+
verbose, // --env.verbose
4952
} = env;
5053
const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
5154
const externals = nsWebpack.getConvertedExternals(env.externals);
@@ -59,14 +62,21 @@ module.exports = env => {
5962

6063
const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
6164

62-
if (platform === "ios") {
65+
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
66+
if (platform === "ios" && !areCoreModulesExternal) {
6367
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
6468
};
6569

6670
let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
6771

72+
const itemsToClean = [`${dist}/**/*`];
73+
if (platform === "android") {
74+
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
75+
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
76+
}
77+
6878
const config = {
69-
mode: uglify ? "production" : "development",
79+
mode: production ? "production" : "development",
7080
context: appFullPath,
7181
externals,
7282
watchOptions: {
@@ -212,10 +222,13 @@ module.exports = env => {
212222
loader: "ts-loader",
213223
options: {
214224
configFile: tsConfigPath,
215-
transpileOnly: !!hmr,
225+
// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
226+
// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
227+
transpileOnly: true,
216228
allowTsInNodeModules: true,
217229
compilerOptions: {
218-
sourceMap: isAnySourceMapEnabled
230+
sourceMap: isAnySourceMapEnabled,
231+
declaration: false
219232
}
220233
},
221234
}
@@ -229,7 +242,7 @@ module.exports = env => {
229242
"process": undefined,
230243
}),
231244
// Remove all files from the out dir.
232-
new CleanWebpackPlugin([`${dist}/**/*`]),
245+
new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
233246
// Copy assets to out dir. Add your own globs as needed.
234247
new CopyWebpackPlugin([
235248
{ from: { glob: "fonts/**" } },
@@ -246,21 +259,20 @@ module.exports = env => {
246259
}),
247260
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
248261
new nsWebpack.WatchStateLoggerPlugin(),
262+
// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
263+
// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
264+
new ForkTsCheckerWebpackPlugin({
265+
tsconfig: tsConfigPath,
266+
async: false,
267+
useTypescriptIncrementalApi: true,
268+
memoryLimit: 4096
269+
}),
270+
new ExtraWatchWebpackPlugin({
271+
files: [`node_modules/**/*.${platform}.ts`]
272+
})
249273
],
250274
};
251275

252-
// Copy the native app resources to the out dir
253-
// only if doing a full build (tns run/build) and not previewing (tns preview)
254-
if (!externals || externals.length === 0) {
255-
config.plugins.push(new CopyWebpackPlugin([
256-
{
257-
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
258-
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
259-
context: projectRoot
260-
},
261-
]));
262-
}
263-
264276
if (report) {
265277
// Generate report files for bundles content
266278
config.plugins.push(new BundleAnalyzerPlugin({
@@ -285,12 +297,6 @@ module.exports = env => {
285297

286298
if (hmr) {
287299
config.plugins.push(new webpack.HotModuleReplacementPlugin());
288-
289-
// With HMR ts-loader should run in `transpileOnly` mode,
290-
// so assure type-checking with fork-ts-checker-webpack-plugin
291-
config.plugins.push(new ForkTsCheckerWebpackPlugin({
292-
tsconfig: tsConfigPath
293-
}));
294300
}
295301

296302

‎lib/after-prepare.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ const { installSnapshotArtefacts } = require("../snapshot/android/project-snapsh
22
const { shouldSnapshot } = require("./utils");
33

44
module.exports = function (hookArgs) {
5-
const env = hookArgs.env || {};
6-
env.hmr = hookArgs.appFilesUpdaterOptions.useHotModuleReload;
5+
const env = hookArgs.prepareData.env || {};
76
const shouldSnapshotOptions = {
8-
platform: hookArgs.platform,
9-
bundle: hookArgs.appFilesUpdaterOptions.bundle,
10-
release: hookArgs.appFilesUpdaterOptions.release
7+
platform: hookArgs.prepareData.platform,
8+
release: hookArgs.prepareData.release
119
};
1210

1311
if (env.snapshot && shouldSnapshot(shouldSnapshotOptions)) {
14-
installSnapshotArtefacts(hookArgs.projectData.projectDir);
12+
installSnapshotArtefacts(hookArgs.prepareData.projectDir);
1513
}
1614
}

0 commit comments

Comments
 (0)