From 146834621c1b32ee40afa6f30ba1de4116fbb59f Mon Sep 17 00:00:00 2001 From: steelbrain Date: Thu, 28 Jul 2016 12:03:01 -0700 Subject: [PATCH 1/9] :fire: Remove react stuff from manifest --- package.json | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/package.json b/package.json index c4999d12558..de9898fb559 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "autoprefixer": "6.3.7", "babel-core": "6.11.4", "babel-eslint": "6.1.2", - "babel-loader": "6.2.4", "babel-plugin-syntax-trailing-function-commas": "6.8.0", "babel-plugin-transform-class-properties": "6.11.5", "babel-plugin-transform-object-rest-spread": "6.8.0", @@ -42,29 +41,18 @@ "babel-runtime": "6.11.6", "chalk": "1.1.3", "cross-spawn": "4.0.0", - "css-loader": "0.23.1", "detect-port": "0.1.4", "eslint": "3.1.1", - "eslint-loader": "1.4.1", "eslint-plugin-flow-vars": "0.5.0", "eslint-plugin-import": "1.12.0", "eslint-plugin-jsx-a11y": "2.0.1", "eslint-plugin-react": "5.2.2", - "extract-text-webpack-plugin": "1.0.1", - "file-loader": "0.9.0", "filesize": "3.3.0", "fs-extra": "0.30.0", "gzip-size": "3.0.0", - "html-webpack-plugin": "2.22.0", - "json-loader": "0.5.4", "opn": "4.0.2", - "postcss-loader": "0.9.1", "promise": "7.1.1", "rimraf": "2.5.4", - "style-loader": "0.13.1", - "url-loader": "0.5.7", - "webpack": "1.13.1", - "webpack-dev-server": "1.14.1", "whatwg-fetch": "1.0.0" }, "devDependencies": { From 643e7f5546e853b53cf0c59d414257f4851c7eef Mon Sep 17 00:00:00 2001 From: steelbrain Date: Thu, 28 Jul 2016 12:04:35 -0700 Subject: [PATCH 2/9] :new: Add pundle and friends to manifest --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index de9898fb559..3ce381e7e32 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "babel-preset-es2015": "6.9.0", "babel-preset-es2016": "6.11.3", "babel-preset-react": "6.11.1", + "babel-pundle": "^1.0.0", "babel-runtime": "6.11.6", "chalk": "1.1.3", "cross-spawn": "4.0.0", @@ -52,6 +53,8 @@ "gzip-size": "3.0.0", "opn": "4.0.2", "promise": "7.1.1", + "pundle": "^1.0.2", + "pundle-dev": "^1.0.2", "rimraf": "2.5.4", "whatwg-fetch": "1.0.0" }, From 4aba8c744815737a4f9402b6c3365a2f5a723673 Mon Sep 17 00:00:00 2001 From: steelbrain Date: Thu, 28 Jul 2016 13:30:06 -0700 Subject: [PATCH 3/9] :new: Use the Pundle dev server --- config/babel.dev.js | 1 - package.json | 1 + scripts/start.js | 238 ++++++++---------------------------------- template/index.html | 1 + template/src/App.js | 4 +- template/src/index.js | 1 - 6 files changed, 49 insertions(+), 197 deletions(-) diff --git a/config/babel.dev.js b/config/babel.dev.js index 64545127d07..16e4ce0f256 100644 --- a/config/babel.dev.js +++ b/config/babel.dev.js @@ -9,7 +9,6 @@ module.exports = { babelrc: false, - cacheDirectory: true, presets: [ 'babel-preset-es2015', 'babel-preset-es2016', diff --git a/package.json b/package.json index 3ce381e7e32..1350d1f06ae 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "fs-extra": "0.30.0", "gzip-size": "3.0.0", "opn": "4.0.2", + "process-bootstrap": "^1.0.0", "promise": "7.1.1", "pundle": "^1.0.2", "pundle-dev": "^1.0.2", diff --git a/scripts/start.js b/scripts/start.js index 15243229d37..94b7eea9736 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -1,192 +1,46 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -process.env.NODE_ENV = 'development'; - -var path = require('path'); -var chalk = require('chalk'); -var webpack = require('webpack'); -var WebpackDevServer = require('webpack-dev-server'); -var execSync = require('child_process').execSync; -var opn = require('opn'); -var detect = require('detect-port'); -var prompt = require('./utils/prompt'); -var config = require('../config/webpack.config.dev'); - -// Tools like Cloud9 rely on this -var DEFAULT_PORT = process.env.PORT || 3000; -var compiler; - -// TODO: hide this behind a flag and eliminate dead code on eject. -// This shouldn't be exposed to the user. -var handleCompile; -var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1); -if (isSmokeTest) { - handleCompile = function (err, stats) { - if (err || stats.hasErrors() || stats.hasWarnings()) { - process.exit(1); - } else { - process.exit(0); - } - }; -} - -var friendlySyntaxErrorLabel = 'Syntax error:'; - -function isLikelyASyntaxError(message) { - return message.indexOf(friendlySyntaxErrorLabel) !== -1; -} - -// This is a little hacky. -// It would be easier if webpack provided a rich error object. - -function formatMessage(message) { - return message - // Make some common errors shorter: - .replace( - // Babel syntax error - 'Module build failed: SyntaxError:', - friendlySyntaxErrorLabel - ) - .replace( - // Webpack file not found error - /Module not found: Error: Cannot resolve 'file' or 'directory'/, - 'Module not found:' - ) - // Internal stacks are generally useless so we strip them - .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y - // Webpack loader names obscure CSS filenames - .replace('./~/css-loader!./~/postcss-loader!', ''); -} - -function clearConsole() { - process.stdout.write('\x1bc'); -} - -function setupCompiler(port) { - compiler = webpack(config, handleCompile); - - compiler.plugin('invalid', function() { - clearConsole(); - console.log('Compiling...'); - }); - - compiler.plugin('done', function(stats) { - clearConsole(); - var hasErrors = stats.hasErrors(); - var hasWarnings = stats.hasWarnings(); - if (!hasErrors && !hasWarnings) { - console.log(chalk.green('Compiled successfully!')); - console.log(); - console.log('The app is running at http://localhost:' + port + '/'); - console.log(); - return; - } - - var json = stats.toJson(); - var formattedErrors = json.errors.map(message => - 'Error in ' + formatMessage(message) - ); - var formattedWarnings = json.warnings.map(message => - 'Warning in ' + formatMessage(message) - ); - - if (hasErrors) { - console.log(chalk.red('Failed to compile.')); - console.log(); - if (formattedErrors.some(isLikelyASyntaxError)) { - // If there are any syntax errors, show just them. - // This prevents a confusing ESLint parsing error - // preceding a much more useful Babel syntax error. - formattedErrors = formattedErrors.filter(isLikelyASyntaxError); - } - formattedErrors.forEach(message => { - console.log(message); - console.log(); - }); - // If errors exist, ignore warnings. - return; - } - - if (hasWarnings) { - console.log(chalk.yellow('Compiled with warnings.')); - console.log(); - formattedWarnings.forEach(message => { - console.log(message); - console.log(); - }); - - console.log('You may use special comments to disable some warnings.'); - console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.'); - console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'); - } - }); -} - -function openBrowser(port) { - if (process.platform === 'darwin') { - try { - // Try our best to reuse existing tab - // on OS X Google Chrome with AppleScript - execSync('ps cax | grep "Google Chrome"'); - execSync( - 'osascript ' + - path.resolve(__dirname, './utils/chrome.applescript') + - ' http://localhost:' + port + '/' - ); - return; - } catch (err) { - // Ignore errors. - } - } - // Fallback to opn - // (It will always open new tab) - opn('http://localhost:' + port + '/'); -} - -function runDevServer(port) { - new WebpackDevServer(compiler, { - historyApiFallback: true, - hot: true, // Note: only CSS is currently hot reloaded - publicPath: config.output.publicPath, - quiet: true - }).listen(port, (err, result) => { - if (err) { - return console.log(err); - } - - clearConsole(); - console.log(chalk.cyan('Starting the development server...')); - console.log(); - openBrowser(port); - }); -} - -function run(port) { - setupCompiler(port); - runDevServer(port); -} - -detect(DEFAULT_PORT).then(port => { - if (port === DEFAULT_PORT) { - run(port); - return; - } - - clearConsole(); - var question = - chalk.yellow('Something is already running at port ' + DEFAULT_PORT + '.') + - '\n\nWould you like to run the app at another port instead?'; - - prompt(question, true).then(shouldChangePort => { - if (shouldChangePort) { - run(port); - } - }); -}); +require('process-bootstrap')('react-app', 'REACT-APP') + +const Path = require('path') +const debug = require('debug') +const Server = require('pundle-dev') +const debugInfo = debug('REACT-APP:Info') +const debugError = debug('REACT-APP:Error') + +const port = 8056 + +const server = new Server({ + pundle: { + entry: ['index.js'], + rootDirectory: Path.normalize(Path.join(__dirname, '../template/src')), + pathType: 'filePath', + moduleDirectories: ['node_modules'], + }, + server: { + port, + error(error) { + debugError(error) + }, + ready() { + debugInfo('Ready') + }, + generated() { + debugInfo('Regenerated') + }, + hmr: true, + sourceMap: true, + sourceRoot: Path.normalize(Path.join(__dirname, '../template')), + }, + watcher: {}, + generator: { + sourceMap: true, + wrapper: 'hmr', + }, +}) + +server.pundle.loadPlugins([ + [require.resolve('babel-pundle'), { + config: require('../config/babel.dev'), + }], +]).then(function() { + return server.activate() +}).catch((e) => console.log('error', e)) diff --git a/template/index.html b/template/index.html index 72e10e94c6c..4d6799da4f5 100644 --- a/template/index.html +++ b/template/index.html @@ -7,6 +7,7 @@
+