Skip to content

Commit 6b34499

Browse files
IjzerenHeinIjzerenHein
committed
Added support for npx and added a —verbose option
Also, the files for each project are now stored in their own temp folder
1 parent cb80c64 commit 6b34499

File tree

4 files changed

+95
-21
lines changed

4 files changed

+95
-21
lines changed

‎README.md‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ Sometimes, importing a single javascript library can drastically increase your b
1212

1313
## Usage
1414

15-
Install as a dev-dependency:
15+
`npx react-native-bundle-visualizer@next`
16+
17+
### Or install as a dev-dependency
1618

1719
`yarn add --dev react-native-bundle-visualizer@next`
1820

@@ -30,12 +32,13 @@ And run it:
3032

3133
All command-line arguments are optional. By default a production build will be created for the `ios` platform.
3234

33-
| Option | Description | Example |
34-
| --------------- | -------------------------------------------------- | --------------------------------- |
35-
| `platform` | Platform to build (default is **ios**) | `--platform android` |
36-
| `dev` | Dev or production build (default is **false**) | `--dev false` |
37-
| `entry-file` | Entry-file (when omitted tries to auto-resolve it) | `--entry-file ./index.android.js` |
38-
| `bundle-output` | Output bundle-file (default is **tmp**) | `--bundle-output ./myapp.bundle` |
35+
| Option | Description | Example |
36+
| --------------- | ------------------------------------------------------------- | --------------------------------- |
37+
| `platform` | Platform to build (default is **ios**) | `--platform android` |
38+
| `dev` | Dev or production build (default is **false**) | `--dev false` |
39+
| `entry-file` | Entry-file (when omitted tries to auto-resolve it) | `--entry-file ./index.android.js` |
40+
| `bundle-output` | Output bundle-file (default is **tmp**) | `--bundle-output ./myapp.bundle` |
41+
| `verbose` | Dumps additional output to the console (default is **false**) | `--verbose` |
3942

4043

4144

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@
1818
"bugs": "https://github.com/IjzerenHein/react-native-bundle-visualizer/issues",
1919
"license": "MIT",
2020
"dependencies": {
21+
"chalk": "^2.4.2",
2122
"execa": "^2.0.3",
2223
"minimist": "^1.2.0",
24+
"open": "^6.4.0",
25+
"rimraf": "^2.6.3",
2326
"source-map-explorer": "^2.0.1"
2427
}
2528
}

‎src/react-native-bundle-visualizer.js‎

Lines changed: 80 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
#!/usr/bin/env node
2+
const chalk = require('chalk');
23
const fs = require('fs');
3-
const tmpdir = require('os').tmpdir() + '/react-native-bundle-visualizer';
4+
const os = require('os');
45
const argv = require('minimist')(process.argv.slice(2));
56
const execa = require('execa');
7+
const rimraf = require('rimraf');
8+
const open = require('open');
9+
const { explore } = require('source-map-explorer');
10+
const pkgJSON = JSON.parse(fs.readFileSync('./package.json'));
11+
12+
function getAppName() {
13+
if (pkgJSON.name) return pkgJSON.name;
14+
try {
15+
const appJSON = JSON.parse(fs.readFileSync('./app.json'));
16+
return appJSON.name || appJSON.expo.name || 'UnknownApp';
17+
} catch (err) {
18+
return 'UnknownApp';
19+
}
20+
}
621

722
function getEntryPoint() {
8-
const pkgJSON = JSON.parse(fs.readFileSync('./package.json'));
923
let entry = pkgJSON.main || 'index.js';
1024
if (entry[0] !== '.' && entry[0] !== '/' && entry[0] !== '\\') {
1125
entry = './' + entry;
@@ -14,17 +28,24 @@ function getEntryPoint() {
1428
}
1529

1630
// Get (default) arguments
31+
const baseDir = os.tmpdir() + '/react-native-bundle-visualizer';
32+
const tmpDir = baseDir + '/' + getAppName();
1733
const entryFile = argv['entry-file'] || getEntryPoint();
1834
const platform = argv.platform || 'ios';
1935
const dev = argv.dev || false;
36+
const verbose = argv.verbose || false;
2037
const bundleOutput =
21-
argv['bundle-output'] || tmpdir + '/' + platform + '.bundle';
38+
argv['bundle-output'] || tmpDir + '/' + platform + '.bundle';
2239
const bundleOutputSourceMap = bundleOutput + '.map';
40+
const bundleOutputExplorerHTML = tmpDir + '/output/explorer.html';
2341

2442
// Make sure output dir exists
25-
if (!fs.existsSync(tmpdir)) fs.mkdirSync(tmpdir);
43+
if (!fs.existsSync(baseDir)) fs.mkdirSync(baseDir);
44+
if (fs.existsSync(tmpDir)) rimraf.sync(tmpDir);
45+
fs.mkdirSync(tmpDir);
2646

27-
// Start
47+
// Bundle
48+
console.log(chalk.green.bold('Generating bundle...'));
2849
const bundlePromise = execa('./node_modules/.bin/react-native', [
2950
'bundle',
3051
'--platform',
@@ -39,10 +60,57 @@ const bundlePromise = execa('./node_modules/.bin/react-native', [
3960
bundleOutputSourceMap
4061
]);
4162
bundlePromise.stdout.pipe(process.stdout);
42-
bundlePromise.then(() => {
43-
const explorerPromise = execa('./node_modules/.bin/source-map-explorer', [
44-
bundleOutput,
45-
bundleOutputSourceMap
46-
]);
47-
explorerPromise.stdout.pipe(process.stdout);
48-
});
63+
64+
// Upon bundle completion, run `source-map-explorer`
65+
bundlePromise
66+
.then(
67+
() => {
68+
const stats = fs.statSync(bundleOutput);
69+
console.log(
70+
chalk.green.bold(
71+
'Bundle is ' +
72+
Math.round((stats.size / (1024 * 1024)) * 10) / 10 +
73+
' MB in size'
74+
)
75+
);
76+
return explore(
77+
{
78+
code: bundleOutput,
79+
map: bundleOutputSourceMap
80+
},
81+
{
82+
output: {
83+
format: 'html',
84+
filename: bundleOutputExplorerHTML
85+
}
86+
}
87+
);
88+
}
89+
90+
// Log info and open html file
91+
)
92+
.then(result => {
93+
if (verbose) {
94+
result.bundles.forEach(bundle => {
95+
Object.keys(bundle.files).forEach(file => {
96+
console.log(
97+
chalk.green(file + ', size: ' + bundle.files[file] + ' bytes')
98+
);
99+
});
100+
});
101+
}
102+
103+
// Log any errors
104+
if (result.errors) {
105+
result.errors.forEach(error => {
106+
if (error.isWarning) {
107+
console.log(chalk.yellow.bold(error.message));
108+
} else {
109+
console.log(chalk.red.bold(error.message));
110+
}
111+
});
112+
}
113+
114+
// Open html file
115+
return open(bundleOutputExplorerHTML);
116+
});

‎yarn.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ onetime@^5.1.0:
272272
dependencies:
273273
mimic-fn "^2.1.0"
274274

275-
open@^6.3.0:
275+
open@^6.3.0, open@^6.4.0:
276276
version "6.4.0"
277277
resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
278278
integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
@@ -341,7 +341,7 @@ require-main-filename@^2.0.0:
341341
resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
342342
integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
343343

344-
rimraf@~2.6.2:
344+
rimraf@^2.6.3, rimraf@~2.6.2:
345345
version "2.6.3"
346346
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
347347
integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==

0 commit comments

Comments
 (0)