Skip to content

Commit 2f4ddc4

Browse files
PeterStaevPeterStaev
committed
added webpack
1 parent 7674098 commit 2f4ddc4

15 files changed

+244
-18
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,4 @@ node_modules
5555
platforms
5656
demo/lib
5757
*.log
58+
!webpack.*.js

‎.vscode/settings.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"**/.git": true,
55
"**/.DS_Store": true,
66
"demo": true,
7+
"demo-ng": true,
78
"bin/**": true
89
}
910
}

‎.vscode/tasks.json

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,8 @@
1212
"args": [],
1313
"isBuildCommand": true,
1414
"problemMatcher": ["$tsc", {
15-
"owner": "tslint",
16-
"fileLocation": [
17-
"relative",
18-
"${workspaceRoot}"
19-
],
20-
"severity": "warning",
21-
"pattern": "$tslint4"
15+
"base": "$tslint4",
16+
"fileLocation": "relative"
2217
}]
2318
}
2419
]

‎README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,3 +209,28 @@ dd.selectedIndex = itemSource.getIndex("FL");
209209
```TypeScript
210210
let selectedValue = itemSource.getValue(dd.selectedIndex);
211211
```
212+
213+
## Working with Webpack+Uglify
214+
In case you are uing webpack and also are minifying/uglifying your code, there are some specific names that should be excluded from the uglification for the widget to work properly. The DropDown widget export those and you need to add them to the mangle exclude option of the uglifyjs plugin in the `webpack.common.js` file:
215+
```js
216+
var dropDownMangleExcludes = require("nativescript-drop-down/uglify-mangle-excludes").default;
217+
//......
218+
module.exports = function (platform, destinationApp) {
219+
//......
220+
if (process.env.npm_config_uglify) {
221+
plugins.push(new webpack.LoaderOptionsPlugin({
222+
minimize: true
223+
}));
224+
225+
//Work around an Android issue by setting compress = false
226+
var compress = platform !== "android";
227+
plugins.push(new webpack.optimize.UglifyJsPlugin({
228+
mangle: {
229+
except: nsWebpack.uglifyMangleExcludes.concat(dropDownMangleExcludes),
230+
},
231+
compress: compress,
232+
}));
233+
}
234+
//......
235+
}
236+
```

‎demo/app/app.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import "./bundle-config";
2+
13
import application = require("application");
24

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

‎demo/app/bundle-config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
if ((global as any).TNS_WEBPACK) {
2+
// registers tns-core-modules UI framework modules
3+
// tslint:disable-next-line:no-var-requires
4+
require("bundle-entry-points");
5+
6+
global.registerModule("nativescript-drop-down", () => require("nativescript-drop-down"));
7+
8+
// Views
9+
global.registerModule("main-page", () => require("./main-page"));
10+
}

‎demo/app/vendor-platform.android.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Resolve JavaScript classes that extend a Java class, and need to resolve
2+
// their JavaScript module from a bundled script. For example:
3+
// NativeScriptApplication, NativeScriptActivity, etc.
4+
//
5+
// This module gets bundled together with the rest of the app code and the
6+
// `require` calls get resolved to the correct bundling import call.
7+
//
8+
// At runtime the module gets loaded *before* the rest of the app code, so code
9+
// placed here needs to be careful about its dependencies.
10+
11+
require("application");
12+
require("ui/frame");
13+
require("ui/frame/activity");
14+
15+
if (global.TNS_WEBPACK) {
16+
global.__requireOverride = function (name, dir) {
17+
if (name === "./tns_modules/application/application.js") {
18+
return require("application");
19+
} else if (name === "./tns_modules/ui/frame/frame.js") {
20+
return require("ui/frame");
21+
} else if (name === "./tns_modules/ui/frame/activity.js") {
22+
return require("ui/frame/activity");
23+
}
24+
};
25+
}

‎demo/app/vendor-platform.ios.ts

Whitespace-only changes.

‎demo/app/vendor.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
require("./vendor-platform");
2+
3+
require("bundle-entry-points");

‎demo/package.json

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,44 @@
11
{
22
"nativescript": {
33
"id": "com.tangrainc.dropdownsample",
4-
"tns-ios": {
4+
"tns-android": {
55
"version": "3.0.0-rc.1"
66
},
7-
"tns-android": {
7+
"tns-ios": {
88
"version": "3.0.0-rc.1"
99
}
1010
},
1111
"scripts": {
1212
"android": "npm uninstall nativescript-drop-down && tns platform remove android && tns platform add android@rc && tns run android",
1313
"ios": "npm uninstall nativescript-drop-down && tns run ios --emulator",
14-
"debug-ios": "npm uninstall nativescript-drop-down && tns debug ios --emulator"
14+
"debug-ios": "npm uninstall nativescript-drop-down && tns debug ios --emulator",
15+
"ns-bundle": "ns-bundle",
16+
"start-android-bundle": "npm run ns-bundle --android --start-app",
17+
"start-ios-bundle": "npm run ns-bundle --ios --start-app --uglify",
18+
"build-android-bundle": "npm run ns-bundle --android --build-app",
19+
"build-ios-bundle": "npm run ns-bundle --ios --build-app"
1520
},
1621
"dependencies": {
1722
"nativescript-drop-down": "file:../bin/dist",
1823
"tns-core-modules": "rc"
1924
},
2025
"devDependencies": {
26+
"awesome-typescript-loader": "~3.0.0-beta.9",
2127
"babel-traverse": "6.10.4",
2228
"babel-types": "6.11.1",
2329
"babylon": "6.8.2",
30+
"copy-webpack-plugin": "~3.0.1",
31+
"extract-text-webpack-plugin": "~2.0.0-beta.4",
2432
"filewalker": "0.1.3",
2533
"lazy": "1.0.11",
34+
"nativescript-css-loader": "~0.26.0",
2635
"nativescript-dev-typescript": "^0.4.0",
36+
"nativescript-dev-webpack": "^0.3.7",
37+
"raw-loader": "~0.5.1",
38+
"resolve-url-loader": "~1.6.0",
39+
"tns-platform-declarations": "rc",
2740
"typescript": "^2.2.2",
28-
"tns-platform-declarations": "rc"
41+
"webpack": "2.2.0",
42+
"webpack-sources": "~0.1.3"
2943
}
3044
}

‎demo/webpack.android.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var makeConfig = require("./webpack.common");
2+
module.exports = makeConfig("android");

‎demo/webpack.common.js

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
var webpack = require("webpack");
2+
var nsWebpack = require("nativescript-dev-webpack");
3+
var nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
4+
var dropDownMangleExcludes = require("nativescript-drop-down/uglify-mangle-excludes").default;
5+
var path = require("path");
6+
var CopyWebpackPlugin = require("copy-webpack-plugin");
7+
var ExtractTextPlugin = require("extract-text-webpack-plugin");
8+
9+
module.exports = function (platform, destinationApp) {
10+
if (!destinationApp) {
11+
//Default destination inside platforms/<platform>/...
12+
destinationApp = nsWebpack.getAppPath(platform);
13+
}
14+
var entry = {};
15+
//Discover entry module from package.json
16+
entry.bundle = "./" + nsWebpack.getEntryModule();
17+
//Vendor entry with third party libraries.
18+
entry.vendor = "./vendor";
19+
//app.css bundle
20+
entry["app.css"] = "./app.css";
21+
22+
var plugins = [
23+
new ExtractTextPlugin("app.css"),
24+
//Vendor libs go to the vendor.js chunk
25+
new webpack.optimize.CommonsChunkPlugin({
26+
name: ["vendor"]
27+
}),
28+
//Define useful constants like TNS_WEBPACK
29+
new webpack.DefinePlugin({
30+
"global.TNS_WEBPACK": "true",
31+
}),
32+
//Copy assets to out dir. Add your own globs as needed.
33+
new CopyWebpackPlugin([
34+
{ from: "app.css" },
35+
{ from: "css/**" },
36+
{ from: "fonts/**" },
37+
{ from: "**/*.jpg" },
38+
{ from: "**/*.png" },
39+
{ from: "**/*.xml" },
40+
], { ignore: ["App_Resources/**"] }),
41+
//Generate a bundle starter script and activate it in package.json
42+
new nsWebpack.GenerateBundleStarterPlugin([
43+
"./vendor",
44+
"./bundle",
45+
]),
46+
];
47+
48+
if (process.env.npm_config_uglify) {
49+
plugins.push(new webpack.LoaderOptionsPlugin({
50+
minimize: true
51+
}));
52+
53+
//Work around an Android issue by setting compress = false
54+
var compress = platform !== "android";
55+
plugins.push(new webpack.optimize.UglifyJsPlugin({
56+
mangle: {
57+
except: nsWebpack.uglifyMangleExcludes.concat(dropDownMangleExcludes),
58+
},
59+
compress: compress,
60+
}));
61+
}
62+
63+
return {
64+
context: path.resolve("./app"),
65+
target: nativescriptTarget,
66+
entry: entry,
67+
output: {
68+
pathinfo: true,
69+
path: path.resolve(destinationApp),
70+
libraryTarget: "commonjs2",
71+
filename: "[name].js",
72+
},
73+
resolve: {
74+
//Resolve platform-specific modules like module.android.js
75+
extensions: [
76+
".ts",
77+
".js",
78+
".css",
79+
"." + platform + ".ts",
80+
"." + platform + ".js",
81+
"." + platform + ".css",
82+
],
83+
//Resolve {N} system modules from tns-core-modules
84+
modules: [
85+
"node_modules/tns-core-modules",
86+
"node_modules"
87+
]
88+
},
89+
node: {
90+
//Disable node shims that conflict with NativeScript
91+
"http": false,
92+
"timers": false,
93+
"setImmediate": false,
94+
"fs": "empty",
95+
},
96+
module: {
97+
loaders: [
98+
{
99+
test: /\.html$/,
100+
loader: "raw-loader"
101+
},
102+
// Root app.css file gets extracted with bundled dependencies
103+
{
104+
test: /app\.css$/,
105+
loader: ExtractTextPlugin.extract([
106+
"resolve-url-loader",
107+
"nativescript-css-loader",
108+
"nativescript-dev-webpack/platform-css-loader",
109+
]),
110+
},
111+
// Other CSS files get bundled using the raw loader
112+
{
113+
test: /\.css$/,
114+
exclude: /app\.css$/,
115+
loaders: [
116+
"raw-loader",
117+
]
118+
},
119+
// Compile TypeScript files, replace templateUrl and styleUrls.
120+
{
121+
test: /\.ts$/,
122+
loaders: [
123+
"awesome-typescript-loader"
124+
]
125+
},
126+
// SASS support
127+
{
128+
test: /\.scss$/,
129+
loaders: [
130+
"raw-loader",
131+
"resolve-url-loader",
132+
"sass-loader"
133+
]
134+
},
135+
]
136+
},
137+
plugins: plugins,
138+
};
139+
};

‎demo/webpack.ios.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var makeConfig = require("./webpack.common");
2+
module.exports = makeConfig("ios");

‎drop-down.ios.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,6 @@ export * from "./drop-down-common";
5050
const TOOLBAR_HEIGHT = 44;
5151
const HINT_COLOR = new Color("#3904041E");
5252

53-
export const mangleExclude = [
54-
"DropDownListDataSource",
55-
"DropDownListPickerDelegateImpl",
56-
"TNSDropDownLabel",
57-
"TapHandler"
58-
];
59-
6053
export class DropDown extends DropDownBase {
6154
public _listPicker: UIPickerView;
6255
public nativeView: TNSDropDownLabel;

‎uglify-mangle-excludes.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default [
2+
"DropDown",
3+
4+
// iOS
5+
"DropDownListDataSource",
6+
"DropDownListPickerDelegateImpl",
7+
"TNSDropDownLabel",
8+
"TapHandler",
9+
10+
// Android
11+
"DropDownAdapter",
12+
"DropDownItemSelectedListener",
13+
"DropDownTouchListener"
14+
];

0 commit comments

Comments
 (0)