From c84a9c8b57fa5db051ddfd23b72b3844a1d693d1 Mon Sep 17 00:00:00 2001 From: Stuart Taylor Date: Tue, 31 Jul 2018 16:33:56 +0100 Subject: [PATCH] feat(news): Initial app with webpack --- .babelrc | 2 +- gulpfile.js | 28 +++-- news/NewsApp.js | 14 +++ news/index.js | 12 +++ package-lock.json | 257 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 4 + webpack.config.js | 23 ++--- 7 files changed, 315 insertions(+), 25 deletions(-) create mode 100644 news/NewsApp.js create mode 100644 news/index.js diff --git a/.babelrc b/.babelrc index e4b307e90b..300ae2519f 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { - "presets": [ "es2015", "react", "stage-0" ], + "presets": [ "env", "react", "stage-0" ], "plugins": [ "transform-runtime", "babel-plugin-add-module-exports", diff --git a/gulpfile.js b/gulpfile.js index 062e15c405..5b4b395ce9 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -12,6 +12,7 @@ const Rx = require('rx'), del = require('del'), // utils plumber = require('gulp-plumber'), + named = require('vinyl-named'), notify = require('gulp-notify'), gutil = require('gulp-util'), reduce = require('gulp-reduce-file'), @@ -77,6 +78,8 @@ const paths = { dest: 'common/app' }, + reactFiles: ['./client/**/*.js', './news/**/*.js', 'common/**/*.js'], + syncWatch: ['public/**/*.*'] }; @@ -146,10 +149,13 @@ gulp.task('serve', function(cb) { const syncDepenedents = ['serve', 'less']; gulp.task('dev-server', syncDepenedents, function() { - webpackConfig.entry.bundle = [ + const devMiddleware = [ 'webpack/hot/dev-server', 'webpack-hot-middleware/client' - ].concat(webpackConfig.entry.bundle); + ]; + Object.keys(webpackConfig.entry).forEach(key => { + webpackConfig.entry[key] = [webpackConfig.entry[key]].concat(devMiddleware); + }); const bundler = webpack(webpackConfig); sync.init(null, { @@ -176,29 +182,33 @@ gulp.task('dev-server', syncDepenedents, function() { }); }); -gulp.task('pack-client', function() { +gulp.task('pack-apps', function() { if (!__DEV__) { - console.log('\n\nbundling www - production\n\n'); + console.log('\n\nbundling apps - production\n\n'); } const dest = webpackConfig.output.path; + const sources = Object.keys(webpackConfig.entry).map( + key => webpackConfig.entry[key] + ); return gulp - .src(webpackConfig.entry.bundle) + .src(sources) + .pipe(named()) .pipe(plumber({ errorHandler })) .pipe(webpackStream(webpackConfig)) .pipe(gulp.dest(dest)); }); const webpackManifestFiles = ['react-manifest.json', 'chunk-manifest.json']; -gulp.task('move-webpack-manifest', ['pack-client'], function() { +gulp.task('move-webpack-manifest', ['pack-apps'], function() { const files = webpackManifestFiles.map(function(filename) { return path.join(webpackConfig.output.path, filename); }); return gulp.src(files).pipe(gulp.dest(paths.manifest)); }); -const cleanDeps = ['pack-client', 'move-webpack-manifest']; +const cleanDeps = ['pack-apps', 'move-webpack-manifest']; gulp.task('clean-webpack-manifest', cleanDeps, function() { return del( webpackManifestFiles.map(function(filename) { @@ -250,7 +260,7 @@ function done(manifest) { return sortKeys(manifest); } -const buildDependents = ['less', 'pack-client', 'move-webpack-manifest']; +const buildDependents = ['less', 'pack-apps', 'move-webpack-manifest']; gulp.task('build-manifest', buildDependents, function() { return gulp @@ -265,7 +275,7 @@ gulp.task('generate-migration-map', done => { gulp.task('build', [ 'less', - 'pack-client', + 'pack-apps', 'move-webpack-manifest', 'clean-webpack-manifest', 'build-manifest', diff --git a/news/NewsApp.js b/news/NewsApp.js new file mode 100644 index 0000000000..cd8a037755 --- /dev/null +++ b/news/NewsApp.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const propTypes = {}; + +function NewsApp() { + return ( +

This is the news!

+ ); +} + +NewsApp.displayName = 'NewsApp'; +NewsApp.propTypes = propTypes; + +export default NewsApp; diff --git a/news/index.js b/news/index.js new file mode 100644 index 0000000000..6dbca1a30e --- /dev/null +++ b/news/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from 'react-dom'; + +import NewsApp from './NewsApp'; + +const newsMountPoint = document.getElementById('news-app-mount'); + +render( + , + newsMountPoint, + () => console.log('react has rendered and is ready to go go go go go go!!') +); diff --git a/package-lock.json b/package-lock.json index f03e675c07..7c9a8e357b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2159,6 +2159,44 @@ } } }, + "babel-preset-env": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.7.0.tgz", + "integrity": "sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==", + "dev": true, + "requires": { + "babel-plugin-check-es2015-constants": "6.22.0", + "babel-plugin-syntax-trailing-function-commas": "6.22.0", + "babel-plugin-transform-async-to-generator": "6.24.1", + "babel-plugin-transform-es2015-arrow-functions": "6.22.0", + "babel-plugin-transform-es2015-block-scoped-functions": "6.22.0", + "babel-plugin-transform-es2015-block-scoping": "6.26.0", + "babel-plugin-transform-es2015-classes": "6.24.1", + "babel-plugin-transform-es2015-computed-properties": "6.24.1", + "babel-plugin-transform-es2015-destructuring": "6.23.0", + "babel-plugin-transform-es2015-duplicate-keys": "6.24.1", + "babel-plugin-transform-es2015-for-of": "6.23.0", + "babel-plugin-transform-es2015-function-name": "6.24.1", + "babel-plugin-transform-es2015-literals": "6.22.0", + "babel-plugin-transform-es2015-modules-amd": "6.24.1", + "babel-plugin-transform-es2015-modules-commonjs": "6.26.2", + "babel-plugin-transform-es2015-modules-systemjs": "6.24.1", + "babel-plugin-transform-es2015-modules-umd": "6.24.1", + "babel-plugin-transform-es2015-object-super": "6.24.1", + "babel-plugin-transform-es2015-parameters": "6.24.1", + "babel-plugin-transform-es2015-shorthand-properties": "6.24.1", + "babel-plugin-transform-es2015-spread": "6.22.0", + "babel-plugin-transform-es2015-sticky-regex": "6.24.1", + "babel-plugin-transform-es2015-template-literals": "6.22.0", + "babel-plugin-transform-es2015-typeof-symbol": "6.23.0", + "babel-plugin-transform-es2015-unicode-regex": "6.24.1", + "babel-plugin-transform-exponentiation-operator": "6.24.1", + "babel-plugin-transform-regenerator": "6.26.0", + "browserslist": "3.2.8", + "invariant": "2.2.2", + "semver": "5.4.1" + } + }, "babel-preset-es2015": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz", @@ -3055,6 +3093,16 @@ "pako": "1.0.6" } }, + "browserslist": { + "version": "3.2.8", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz", + "integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==", + "dev": true, + "requires": { + "caniuse-lite": "1.0.30000865", + "electron-to-chromium": "1.3.52" + } + }, "bs-recipes": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz", @@ -3278,6 +3326,12 @@ "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000756.tgz", "integrity": "sha1-6TimuZFjDzDSJj3TRYvrZdNiJos=" }, + "caniuse-lite": { + "version": "1.0.30000865", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz", + "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw==", + "dev": true + }, "canonical-json": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/canonical-json/-/canonical-json-0.0.4.tgz", @@ -4710,6 +4764,34 @@ "css-stringify": "1.0.5" } }, + "css-loader": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz", + "integrity": "sha512-tMXlTYf3mIMt3b0dDCOQFJiVvxbocJ5Ho577WiGPYPZcqVEO218L2iU22pDXzkTZCLDE+9AmGSUkWxeh/nZReA==", + "dev": true, + "requires": { + "babel-code-frame": "6.26.0", + "css-selector-tokenizer": "0.7.0", + "icss-utils": "2.1.0", + "loader-utils": "1.1.0", + "lodash.camelcase": "4.3.0", + "postcss": "6.0.23", + "postcss-modules-extract-imports": "1.2.0", + "postcss-modules-local-by-default": "1.2.0", + "postcss-modules-scope": "1.1.0", + "postcss-modules-values": "1.3.0", + "postcss-value-parser": "3.3.0", + "source-list-map": "2.0.0" + }, + "dependencies": { + "source-list-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz", + "integrity": "sha512-I2UmuJSRr/T8jisiROLU3A3ltr+swpniSmNPI4Ml3ZCX6tVnDsuZzK7F2hl5jTqbZBWCEKlj5HRQiPExXLgE8A==", + "dev": true + } + } + }, "css-parse": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.0.4.tgz", @@ -4726,6 +4808,30 @@ "nth-check": "1.0.1" } }, + "css-selector-tokenizer": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz", + "integrity": "sha1-5piEdK6MlTR3v15+/s/OzNnPTIY=", + "dev": true, + "requires": { + "cssesc": "0.1.0", + "fastparse": "1.1.1", + "regexpu-core": "1.0.0" + }, + "dependencies": { + "regexpu-core": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz", + "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=", + "dev": true, + "requires": { + "regenerate": "1.4.0", + "regjsgen": "0.2.0", + "regjsparser": "0.1.5" + } + } + } + }, "css-stringify": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/css-stringify/-/css-stringify-1.0.5.tgz", @@ -4736,6 +4842,12 @@ "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz", "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=" }, + "cssesc": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", + "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=", + "dev": true + }, "cssom": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz", @@ -5369,6 +5481,12 @@ "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.5.7.tgz", "integrity": "sha1-zIcsFoiArjxxiXYv1f/ACJbJUYo=" }, + "electron-to-chromium": { + "version": "1.3.52", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz", + "integrity": "sha1-0tnxJwuko7lnuDHEDvcftNmrXOA=", + "dev": true + }, "elliptic": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz", @@ -6519,6 +6637,12 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "fastparse": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz", + "integrity": "sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=", + "dev": true + }, "fbjs": { "version": "0.8.17", "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", @@ -9204,6 +9328,21 @@ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" }, + "icss-replace-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz", + "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=", + "dev": true + }, + "icss-utils": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz", + "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=", + "dev": true, + "requires": { + "postcss": "6.0.23" + } + }, "idtoken-verifier": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/idtoken-verifier/-/idtoken-verifier-1.2.0.tgz", @@ -15241,6 +15380,105 @@ "resolved": "https://registry.npmjs.org/posix-getopt/-/posix-getopt-1.2.0.tgz", "integrity": "sha1-Su7rfa3mb8qKk2XdqfawBXQctiE=" }, + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "2.4.1", + "source-map": "0.6.1", + "supports-color": "5.4.0" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "1.9.0" + } + }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "3.2.1", + "escape-string-regexp": "1.0.5", + "supports-color": "5.4.0" + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "dev": true, + "requires": { + "has-flag": "3.0.0" + } + } + } + }, + "postcss-modules-extract-imports": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz", + "integrity": "sha1-ZhQOzs447wa/DT41XWm/WdFB6oU=", + "dev": true, + "requires": { + "postcss": "6.0.23" + } + }, + "postcss-modules-local-by-default": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz", + "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=", + "dev": true, + "requires": { + "css-selector-tokenizer": "0.7.0", + "postcss": "6.0.23" + } + }, + "postcss-modules-scope": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz", + "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=", + "dev": true, + "requires": { + "css-selector-tokenizer": "0.7.0", + "postcss": "6.0.23" + } + }, + "postcss-modules-values": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz", + "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=", + "dev": true, + "requires": { + "icss-replace-symbols": "1.1.0", + "postcss": "6.0.23" + } + }, + "postcss-value-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", + "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", + "dev": true + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -18508,6 +18746,16 @@ "integrity": "sha1-ISqQDfq1rgTmKOIbWABjK9DZ40c=", "dev": true }, + "style-loader": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.21.0.tgz", + "integrity": "sha512-T+UNsAcl3Yg+BsPKs1vd22Fr8sVT+CJMtzqc6LEw9bbJZb43lm9GoeIfUcDEefBSWC0BhYbcdupV1GtI4DGzxg==", + "dev": true, + "requires": { + "loader-utils": "1.1.0", + "schema-utils": "0.4.5" + } + }, "subarg": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz", @@ -20084,6 +20332,15 @@ } } }, + "vinyl-named": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/vinyl-named/-/vinyl-named-1.1.0.tgz", + "integrity": "sha1-lOT+dB442w7DA+Wz2Giyl6Leq2Y=", + "dev": true, + "requires": { + "through": "2.3.8" + } + }, "vinyl-sourcemaps-apply": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz", diff --git a/package.json b/package.json index 1fabdd8c07..b96d77f0af 100644 --- a/package.json +++ b/package.json @@ -158,12 +158,14 @@ "babel-plugin-lodash": "^3.2.11", "babel-plugin-transform-imports": "^1.4.1", "babel-plugin-transform-runtime": "^6.23.0", + "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.3.13", "babel-preset-stage-3": "^6.24.1", "browser-sync": "^2.9.12", "browserify": "^16.1.1", "chunk-manifest-webpack-plugin": "^1.1.2", "commitizen": "^2.9.6", + "css-loader": "^1.0.0", "cz-freecodecamp": "^1.0.1", "del": "^2.2.0", "diff": "^3.5.0", @@ -196,11 +198,13 @@ "rev-del": "^1.0.5", "sinon": "^2.0.0", "sort-keys": "^1.1.1", + "style-loader": "^0.21.0", "tap-difflet": "^0.7.0", "tap-spec": "^4.1.1", "tape": "^4.2.2", "uglifyjs-webpack-plugin": "^1.2.7", "validate-commit-msg": "^2.12.2", + "vinyl-named": "^1.1.0", "webpack": "^4.16.3", "webpack-cli": "^3.1.0", "webpack-dev-middleware": "^3.1.3", diff --git a/webpack.config.js b/webpack.config.js index 78a15d3328..910c2a0d08 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -9,7 +9,8 @@ var __DEV__ = process.env.NODE_ENV !== 'production'; module.exports = { entry: { - bundle: './client' + client: './client/index.js', + news: './news/index.js' }, devtool: __DEV__ ? 'inline-source-map' : 'source-map', mode: __DEV__ ? 'development' : 'production', @@ -21,25 +22,17 @@ module.exports = { net: 'empty' }, output: { - filename: __DEV__ ? '[name].js' : '[name]-[hash].js', + filename: __DEV__ ? '[name]-app.js' : '[name]-app-[hash].js', chunkFilename: __DEV__ ? - '[name].js' : - '[name]-[chunkhash].js', - path: path.join(__dirname, '/public/js/') - }, - resolve: { - alias: { - 'dist/rx.all.js': 'rx/dist/rx.all.js' - } + '[name]-chunk.js' : + '[name]-chunk-[chunkhash].js', + path: path.join(__dirname, '/public/js/'), + publicPath: '/js' }, module: { rules: [{ test: /\.jsx?$/, - include: [ - path.join(__dirname, 'client/'), - path.join(__dirname, 'common/'), - path.join(__dirname, 'server/') - ], + exclude: /node_modules/, use: [ __DEV__ && 'react-hot-loader', 'babel-loader'