[react-packager] Add dev option to CLI | James Ide

Summary:
Exposes the dev option that is already there to the CLI so that you can turn off invariant checks, etc. I also made it omit the inlined source map when dev=false which made it a lot faster to run on a phone, both due to smaller download size and fewer bytes to copy from Obj-C to JS and evaluate.
Closes https://github.com/facebook/react-native/pull/112
Github Author: James Ide <ide@jameside.com>

Test Plan:
* ./runJestTests.sh
* test bundle creation with `bundle.sh`
* test `load_dependencies.js` script
* start the server and click around shell app
This commit is contained in:
James Ide 2015-03-02 20:46:45 -08:00
parent bb7040808e
commit e5d86aeb5b
4 changed files with 23 additions and 11 deletions

View File

@ -29,6 +29,10 @@ var options = parseCommandLine([{
}, { }, {
command: 'root', command: 'root',
description: 'add another root(s) to be used by the packager in this project', description: 'add another root(s) to be used by the packager in this project',
}, {
command: 'dev',
default: true,
description: 'produce development packages with extra warnings enabled',
}]); }]);
if (!options.projectRoots) { if (!options.projectRoots) {
@ -93,7 +97,7 @@ function openStackFrameInEditor(req, res, next) {
function getAppMiddleware(options) { function getAppMiddleware(options) {
return ReactPackager.middleware({ return ReactPackager.middleware({
dev: true, dev: options.dev,
projectRoots: options.projectRoots, projectRoots: options.projectRoots,
blacklistRE: blacklist(false), blacklistRE: blacklist(false),
cacheVersion: '2', cacheVersion: '2',

View File

@ -40,12 +40,17 @@ Package.prototype.finalize = function(options) {
Object.seal(this._modules); Object.seal(this._modules);
}; };
Package.prototype.getSource = function() { Package.prototype.getSource = function(options) {
return this._source || ( if (!this._source) {
this._source = _.pluck(this._modules, 'transformedCode').join('\n') + '\n' + options = options || {};
'RAW_SOURCE_MAP = ' + JSON.stringify(this.getSourceMap({excludeSource: true})) + this._source = _.pluck(this._modules, 'transformedCode').join('\n');
';\n' + '\/\/@ sourceMappingURL=' + this._sourceMapUrl if (options.inlineSourceMap) {
); var sourceMap = this.getSourceMap({excludeSource: true});
this._source += '\nRAW_SOURCE_MAP = ' + JSON.stringify(sourceMap) + ';';
}
this._source += '\n\/\/@ sourceMappingURL=' + this._sourceMapUrl;
}
return this._source;
}; };
Package.prototype.getSourceMap = function(options) { Package.prototype.getSourceMap = function(options) {

View File

@ -21,7 +21,7 @@ describe('Package', function() {
ppackage.addModule('transformed foo;', 'source foo', 'foo path'); ppackage.addModule('transformed foo;', 'source foo', 'foo path');
ppackage.addModule('transformed bar;', 'source bar', 'bar path'); ppackage.addModule('transformed bar;', 'source bar', 'bar path');
ppackage.finalize({}); ppackage.finalize({});
expect(ppackage.getSource()).toBe([ expect(ppackage.getSource({inlineSourceMap: true})).toBe([
'transformed foo;', 'transformed foo;',
'transformed bar;', 'transformed bar;',
'RAW_SOURCE_MAP = "test-source-map";', 'RAW_SOURCE_MAP = "test-source-map";',
@ -34,7 +34,7 @@ describe('Package', function() {
ppackage.addModule('transformed bar;', 'source bar', 'bar path'); ppackage.addModule('transformed bar;', 'source bar', 'bar path');
ppackage.setMainModuleId('foo'); ppackage.setMainModuleId('foo');
ppackage.finalize({runMainModule: true}); ppackage.finalize({runMainModule: true});
expect(ppackage.getSource()).toBe([ expect(ppackage.getSource({inlineSourceMap: true})).toBe([
'transformed foo;', 'transformed foo;',
'transformed bar;', 'transformed bar;',
';require("foo");', ';require("foo");',

View File

@ -51,6 +51,7 @@ var validateOpts = declareOpts({
function Server(options) { function Server(options) {
var opts = validateOpts(options); var opts = validateOpts(options);
this._dev = opts.dev;
this._projectRoots = opts.projectRoots; this._projectRoots = opts.projectRoots;
this._packages = Object.create(null); this._packages = Object.create(null);
this._packager = new Packager(opts); this._packager = new Packager(opts);
@ -72,13 +73,14 @@ Server.prototype._onFileChange = function(type, filepath, root) {
}; };
Server.prototype._rebuildPackages = function() { Server.prototype._rebuildPackages = function() {
var dev = this._dev;
var buildPackage = this._buildPackage.bind(this); var buildPackage = this._buildPackage.bind(this);
var packages = this._packages; var packages = this._packages;
Object.keys(packages).forEach(function(key) { Object.keys(packages).forEach(function(key) {
var options = getOptionsFromPath(url.parse(key).pathname); var options = getOptionsFromPath(url.parse(key).pathname);
packages[key] = buildPackage(options).then(function(p) { packages[key] = buildPackage(options).then(function(p) {
// Make a throwaway call to getSource to cache the source string. // Make a throwaway call to getSource to cache the source string.
p.getSource(); p.getSource({inlineSourceMap: dev});
return p; return p;
}); });
}); });
@ -159,10 +161,11 @@ Server.prototype.processRequest = function(req, res, next) {
var options = getOptionsFromPath(url.parse(req.url).pathname); var options = getOptionsFromPath(url.parse(req.url).pathname);
var building = this._packages[req.url] || this._buildPackage(options); var building = this._packages[req.url] || this._buildPackage(options);
this._packages[req.url] = building; this._packages[req.url] = building;
var dev = this._dev;
building.then( building.then(
function(p) { function(p) {
if (requestType === 'bundle') { if (requestType === 'bundle') {
res.end(p.getSource()); res.end(p.getSource({inlineSourceMap: dev}));
Activity.endEvent(startReqEventId); Activity.endEvent(startReqEventId);
} else if (requestType === 'map') { } else if (requestType === 'map') {
res.end(JSON.stringify(p.getSourceMap())); res.end(JSON.stringify(p.getSourceMap()));