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

Commit 1041e14

Browse files
vchimevvchimev
committed
chore(TypeScriptApp): add webpack.config.js file
Clean up npm scripts.
1 parent 2c0bc26 commit 1041e14

File tree

3 files changed

+241
-7
lines changed

3 files changed

+241
-7
lines changed

Diff for: ‎demo/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,5 @@ tsconfig.aot.json
1515

1616
vendor.js
1717
vendor.ts
18+
19+
tsconfig.esm.json

Diff for: ‎demo/TypeScriptApp/package.json

-7
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,6 @@
3434
"typescript": "~2.7.2"
3535
},
3636
"scripts": {
37-
"ns-bundle": "ns-bundle",
38-
"start-android-bundle": "npm run ns-bundle --android --run-app",
39-
"start-ios-bundle": "npm run ns-bundle --ios --run-app",
40-
"build-android-bundle": "npm run ns-bundle --android --build-app",
41-
"build-ios-bundle": "npm run ns-bundle --ios --build-app",
42-
"publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
43-
"generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
4437
"e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json",
4538
"compile-tests": "tsc -p e2e --watch"
4639
}

Diff for: ‎demo/TypeScriptApp/webpack.config.js

+239
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
const { join, relative, resolve, sep } = require("path");
2+
3+
const webpack = require("webpack");
4+
const nsWebpack = require("nativescript-dev-webpack");
5+
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
6+
const CleanWebpackPlugin = require("clean-webpack-plugin");
7+
const CopyWebpackPlugin = require("copy-webpack-plugin");
8+
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
9+
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
10+
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
11+
12+
module.exports = env => {
13+
// Add your custom Activities, Services and other Android app components here.
14+
const appComponents = [
15+
"tns-core-modules/ui/frame",
16+
"tns-core-modules/ui/frame/activity",
17+
];
18+
19+
const platform = env && (env.android && "android" || env.ios && "ios");
20+
if (!platform) {
21+
throw new Error("You need to provide a target platform!");
22+
}
23+
24+
const platforms = ["ios", "android"];
25+
const projectRoot = __dirname;
26+
27+
// Default destination inside platforms/<platform>/...
28+
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
29+
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
30+
31+
const {
32+
// The 'appPath' and 'appResourcesPath' values are fetched from
33+
// the nsconfig.json configuration file
34+
// when bundling with `tns run android|ios --bundle`.
35+
appPath = "app",
36+
appResourcesPath = "app/App_Resources",
37+
38+
// You can provide the following flags when running 'tns run android|ios'
39+
snapshot, // --env.snapshot
40+
uglify, // --env.uglify
41+
report, // --env.report
42+
} = env;
43+
44+
const appFullPath = resolve(projectRoot, appPath);
45+
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
46+
47+
const entryModule = nsWebpack.getEntryModule(appFullPath);
48+
const entryPath = `.${sep}${entryModule}.ts`;
49+
50+
const config = {
51+
mode: uglify ? "production" : "development",
52+
context: appFullPath,
53+
watchOptions: {
54+
ignored: [
55+
appResourcesFullPath,
56+
// Don't watch hidden files
57+
"**/.*",
58+
]
59+
},
60+
target: nativescriptTarget,
61+
entry: {
62+
bundle: entryPath,
63+
},
64+
output: {
65+
pathinfo: false,
66+
path: dist,
67+
libraryTarget: "commonjs2",
68+
filename: "[name].js",
69+
globalObject: "global",
70+
},
71+
resolve: {
72+
extensions: [".ts", ".js", ".scss", ".css"],
73+
// Resolve {N} system modules from tns-core-modules
74+
modules: [
75+
resolve(__dirname, "node_modules/tns-core-modules"),
76+
resolve(__dirname, "node_modules"),
77+
"node_modules/tns-core-modules",
78+
"node_modules",
79+
],
80+
alias: {
81+
'~': appFullPath
82+
},
83+
// don't resolve symlinks to symlinked modules
84+
symlinks: false
85+
},
86+
resolveLoader: {
87+
// don't resolve symlinks to symlinked loaders
88+
symlinks: false
89+
},
90+
node: {
91+
// Disable node shims that conflict with NativeScript
92+
"http": false,
93+
"timers": false,
94+
"setImmediate": false,
95+
"fs": "empty",
96+
"__dirname": false,
97+
},
98+
devtool: "none",
99+
optimization: {
100+
splitChunks: {
101+
cacheGroups: {
102+
vendor: {
103+
name: "vendor",
104+
chunks: "all",
105+
test: (module, chunks) => {
106+
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
107+
return /[\\/]node_modules[\\/]/.test(moduleName) ||
108+
appComponents.some(comp => comp === moduleName);
109+
110+
},
111+
enforce: true,
112+
},
113+
}
114+
},
115+
minimize: !!uglify,
116+
minimizer: [
117+
new UglifyJsPlugin({
118+
uglifyOptions: {
119+
parallel: true,
120+
cache: true,
121+
output: {
122+
comments: false,
123+
},
124+
compress: {
125+
// The Android SBG has problems parsing the output
126+
// when these options are enabled
127+
'collapse_vars': platform !== "android",
128+
sequences: platform !== "android",
129+
}
130+
}
131+
})
132+
],
133+
},
134+
module: {
135+
rules: [
136+
{
137+
test: new RegExp(entryPath),
138+
use: [
139+
// Require all Android app components
140+
platform === "android" && {
141+
loader: "nativescript-dev-webpack/android-app-components-loader",
142+
options: { modules: appComponents }
143+
},
144+
145+
{
146+
loader: "nativescript-dev-webpack/bundle-config-loader",
147+
options: {
148+
loadCss: !snapshot, // load the application css if in debug mode
149+
}
150+
},
151+
].filter(loader => !!loader)
152+
},
153+
154+
{ test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"},
155+
156+
{
157+
test: /\.css$/,
158+
use: { loader: "css-loader", options: { minimize: false, url: false } }
159+
},
160+
161+
{
162+
test: /\.scss$/,
163+
use: [
164+
{ loader: "css-loader", options: { minimize: false, url: false } },
165+
"sass-loader"
166+
]
167+
},
168+
169+
{
170+
test: /\.ts$/,
171+
use: {
172+
loader: "awesome-typescript-loader",
173+
options: { configFileName: "tsconfig.esm.json" },
174+
}
175+
},
176+
]
177+
},
178+
plugins: [
179+
// Define useful constants like TNS_WEBPACK
180+
new webpack.DefinePlugin({
181+
"global.TNS_WEBPACK": "true",
182+
}),
183+
// Remove all files from the out dir.
184+
new CleanWebpackPlugin([ `${dist}/**/*` ]),
185+
// Copy native app resources to out dir.
186+
new CopyWebpackPlugin([
187+
{
188+
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
189+
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
190+
context: projectRoot
191+
},
192+
]),
193+
// Copy assets to out dir. Add your own globs as needed.
194+
new CopyWebpackPlugin([
195+
{ from: "fonts/**" },
196+
{ from: "**/*.jpg" },
197+
{ from: "**/*.png" },
198+
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
199+
// Generate a bundle starter script and activate it in package.json
200+
new nsWebpack.GenerateBundleStarterPlugin([
201+
"./vendor",
202+
"./bundle",
203+
]),
204+
// For instructions on how to set up workers with webpack
205+
// check out https://github.com/nativescript/worker-loader
206+
new NativeScriptWorkerPlugin(),
207+
new nsWebpack.PlatformFSPlugin({
208+
platform,
209+
platforms,
210+
}),
211+
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
212+
new nsWebpack.WatchStateLoggerPlugin(),
213+
],
214+
};
215+
216+
if (report) {
217+
// Generate report files for bundles content
218+
config.plugins.push(new BundleAnalyzerPlugin({
219+
analyzerMode: "static",
220+
openAnalyzer: false,
221+
generateStatsFile: true,
222+
reportFilename: resolve(projectRoot, "report", `report.html`),
223+
statsFilename: resolve(projectRoot, "report", `stats.json`),
224+
}));
225+
}
226+
227+
if (snapshot) {
228+
config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
229+
chunk: "vendor",
230+
requireModules: [
231+
"tns-core-modules/bundle-entry-points",
232+
],
233+
projectRoot,
234+
webpackConfig: config,
235+
}));
236+
}
237+
238+
return config;
239+
};

0 commit comments

Comments
 (0)