gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(news): Initial app with webpack

Browse Source
This commit is contained in:
Stuart Taylor
2018-07-31 16:33:56 +01:00
committed by mrugesh mohapatra
parent 42a97da763
commit c84a9c8b57
7 changed files with 315 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.babelrc
View File

@ -1,5 +1,5 @@
{
"presets": [ "es2015", "react", "stage-0" ],
"presets": [ "env", "react", "stage-0" ],
"plugins": [
"transform-runtime",
"babel-plugin-add-module-exports",

28
gulpfile.js
View File

@ -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',

14
news/NewsApp.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
const propTypes = {};
function NewsApp() {
return (
<h1>This is the news!</h1>
);
}
NewsApp.displayName = 'NewsApp';
NewsApp.propTypes = propTypes;
export default NewsApp;

12
news/index.js Normal file
View File

@ -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(
<NewsApp/>,
newsMountPoint,
() => console.log('react has rendered and is ready to go go go go go go!!')
);

257
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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",

23
webpack.config.js
View File

@ -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'