Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Babel to frontend workflow; Upgrading Webpack to version 2. #2736

Merged
merged 3 commits into from
Mar 2, 2017
Merged

Adding Babel to frontend workflow; Upgrading Webpack to version 2. #2736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e41fa65
Adding babel to frontend workflow; Upgradging Webpack to version 2.
Feb 8, 2017
424160c
Adding shrinkwrap file
Feb 8, 2017
dd4c4d8
Fix for diffs
Mar 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"presets": ["es2015", "stage-2"],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious: Why'd you choose stage 2? Have you looked at babel-preset-env that lets you target the browsers your project supports? (Although now that I think about it, because we support old versions of IE it probably would end up applying every plugin and transform imaginable).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why'd you choose stage 2?

It was just and arbitrary starting point. We can adjust if we find language features we want to use but find missing. The process is quite interesting, as it appears features are moving in / out of stages based on the TC39 process. https://github.com/tc39/proposals.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me. 👍

"env": {
// only happens if NODE_ENV is undefined or set to 'development'
"development": {
// ignored when NODE_ENV is production!
}
}
}
23 changes: 16 additions & 7 deletions config/webpack-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,26 @@ var modernConf = {
// so it needs to be defined here as an external script to ignore for
// unmet dependency references.
externals: { jquery: 'jQuery' },
context: path.join( __dirname, '/../', paths.unprocessed, JS_ROUTES_PATH ),
entry: scriptsManifest.getDirectoryMap( paths.unprocessed +
JS_ROUTES_PATH ),
cache: true,
context: path.join( __dirname, '/../', paths.unprocessed, JS_ROUTES_PATH ),
entry: scriptsManifest.getDirectoryMap( paths.unprocessed + JS_ROUTES_PATH ),
module: {
rules: [ {
test: /\.js$/,
use: [ {
loader: 'babel-loader?cacheDirectory=true'
} ],
exclude: /node_modules/
} ]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IIRC the redundant commons chunk calls here were for the scenario where all included scripts included a reference to a module EXCEPT common.js. In that case, since all scripts reference a module, the module's declaration should be moved to common.js automatically by webpack, instead of leaving them redundantly in each script. I tested this behavior in the old setup and the new setup and it still works as expected 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are correct but in order for that to work you need to set the minChunks property. The default is infinity. You can test this by setting minChunks: 3 and running gulp build. It should increase the size of common.js and decrease the size of each of individual modules. That decrease is due to the standardType being added to common.js as it's required by atleast 3 modules. Do you think we should set the minChunks property?

},
output: {
path: path.join( __dirname, 'js' ),
path: path.join( __dirname, 'js' ),
filename: '[name]'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin( COMMON_BUNDLE_NAME ),
new webpack.optimize.CommonsChunkPlugin( COMMON_BUNDLE_NAME,
[ COMMON_BUNDLE_NAME ] ),
new webpack.optimize.CommonsChunkPlugin( {
name: COMMON_BUNDLE_NAME
} ),
// Change `warnings` flag to true to view linter-style warnings at runtime.
new webpack.optimize.UglifyJsPlugin( {
compress: { warnings: false }
Expand Down
7 changes: 4 additions & 3 deletions gulp/tasks/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ var gulpReplace = require( 'gulp-replace' );
var gulpUglify = require( 'gulp-uglify' );
var handleErrors = require( '../utils/handle-errors' );
var paths = require( '../../config/environment' ).paths;
var webpack = require( 'webpack' );
var webpackConfig = require( '../../config/webpack-config.js' );
var webpackStream = require( 'webpack-stream' );
var configLegacy = require( '../config.js' ).legacy;
Expand All @@ -30,7 +31,7 @@ var configLegacy = require( '../config.js' ).legacy;
*/
function _processScript( config, src, dest ) {
return gulp.src( paths.unprocessed + src )
.pipe( webpackStream( config ) )
.pipe( webpackStream( config, webpack ) )
.on( 'error', handleErrors )
.pipe( gulp.dest( paths.processed + dest ) )
.pipe( browserSync.reload( {
Expand Down Expand Up @@ -108,7 +109,7 @@ function scriptsOnDemand() {
*/
function scriptsNonResponsive() {
return gulp.src( paths.unprocessed + '/js/routes/on-demand/header.js' )
.pipe( webpackStream( webpackConfig.onDemandHeaderRawConf ) )
.pipe( webpackStream( webpackConfig.onDemandHeaderRawConf, webpack ) )
.on( 'error', handleErrors )
.pipe( gulpRename( 'header.nonresponsive.js' ) )
.pipe( gulpReplace( 'breakpointState.isInDesktop()', 'true' ) )
Expand Down Expand Up @@ -146,7 +147,7 @@ function scriptsEs5Shim() {
output: {
filename: 'es5-shim.js'
}
} ) )
}, webpack ) )
.pipe( gulpUglify() )
.on( 'error', handleErrors )
.pipe( gulp.dest( paths.processed + '/js/' ) )
Expand Down
Loading