Merge pull request kriasoft#493 from frenzzy/babel-node-5

Use babel-preset-node5 for npm scripts

Author: koistya

.babelrc

@@ -47,6 +47,7 @@
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-runtime": "^6.6.0",
     "babel-preset-es2015": "^6.6.0",
+    "babel-preset-node5": "^10.8.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "browser-sync": "^2.11.1",
@@ -87,6 +88,13 @@
     "webpack-hot-middleware": "^2.10.0",
     "webpack-middleware": "^1.5.1"
   },
+  "babel": {
+    "presets": [
+      "react",
+      "node5",
+      "stage-0"
+    ]
+  },
   "jest": {
     "rootDir": "./src",
     "testPathDirs": [

package.json

@@ -45,9 +45,12 @@ async function start() {
         .loaders
         .filter(x => x.loader === 'babel-loader')
         .forEach(x => (x.query = { // eslint-disable-line no-param-reassign
+          ...x.query,
+
           // Wraps all React components into arbitrary transforms
           // https://github.com/gaearon/babel-plugin-react-transform
           plugins: [
+            ...(x.query ? x.query.plugins : []),
             ['react-transform', {
               transforms: [
                 {

tools/start.js

@@ -35,44 +35,39 @@ const GLOBALS = {
 // -----------------------------------------------------------------------------
 
 const config = {
+  context: path.join(__dirname, '../src'),
+
   output: {
     publicPath: '/',
     sourcePrefix: '  ',
   },
 
-  cache: DEBUG,
-  debug: DEBUG,
-
-  stats: {
-    colors: true,
-    reasons: DEBUG,
-    hash: VERBOSE,
-    version: VERBOSE,
-    timings: true,
-    chunks: VERBOSE,
-    chunkModules: VERBOSE,
-    cached: VERBOSE,
-    cachedAssets: VERBOSE,
-  },
-
-  plugins: [
-    new webpack.optimize.OccurenceOrderPlugin(),
-  ],
-
-  resolve: {
-    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
-  },
-
   module: {
     loaders: [
       {
         test: /\.jsx?$/,
+        loader: 'babel-loader',
         include: [
           path.resolve(__dirname, '../node_modules/react-routing/src'),
           path.resolve(__dirname, '../src'),
         ],
-        loader: 'babel-loader',
-      }, {
+        query: {
+          // https://github.com/babel/babel-loader#options
+          cacheDirectory: DEBUG,
+
+          // https://babeljs.io/docs/usage/options/
+          babelrc: false,
+          presets: [
+            'react',
+            'es2015',
+            'stage-0',
+          ],
+          plugins: [
+            'transform-runtime',
+          ],
+        },
+      },
+      {
         test: /\.scss$/,
         loaders: [
           'isomorphic-style-loader',
@@ -88,26 +83,52 @@ const config = {
           })}`,
           'postcss-loader?parser=postcss-scss',
         ],
-      }, {
+      },
+      {
         test: /\.json$/,
         loader: 'json-loader',
-      }, {
+      },
+      {
         test: /\.txt$/,
         loader: 'raw-loader',
-      }, {
+      },
+      {
         test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
         loader: 'url-loader?limit=10000',
-      }, {
+      },
+      {
         test: /\.(eot|ttf|wav|mp3)$/,
         loader: 'file-loader',
-      }, {
+      },
+      {
         test: /\.jade$/,
         loader: 'jade-loader',
       },
     ],
   },
 
-  postcss: function plugins(bundler) {
+  resolve: {
+    root: path.join(__dirname, '../src'),
+    modulesDirectories: ['node_modules'],
+    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
+  },
+
+  cache: DEBUG,
+  debug: DEBUG,
+
+  stats: {
+    colors: true,
+    reasons: DEBUG,
+    hash: VERBOSE,
+    version: VERBOSE,
+    timings: true,
+    chunks: VERBOSE,
+    chunkModules: VERBOSE,
+    cached: VERBOSE,
+    cachedAssets: VERBOSE,
+  },
+
+  postcss(bundler) {
     return [
       require('postcss-import')({ addDependencyTo: bundler }),
       require('precss')(),
@@ -121,51 +142,75 @@ const config = {
 // -----------------------------------------------------------------------------
 
 const clientConfig = extend(true, {}, config, {
-  entry: './src/client.js',
+  entry: './client.js',
+
   output: {
     path: path.join(__dirname, '../build/public'),
     filename: DEBUG ? '[name].js?[hash]' : '[name].[hash].js',
+    chunkFilename: DEBUG ? '[name].[id].js?[hash]' : '[name].[id].[hash].js',
   },
 
-  // Choose a developer tool to enhance debugging
-  // http://webpack.github.io/docs/configuration.html#devtool
-  devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
+  target: 'web',
+
   plugins: [
-    ...config.plugins,
+
+    // Define free variables
+    // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
     new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': true }),
+
+    // Emit a file with assets paths
+    // https://github.com/sporto/assets-webpack-plugin#options
     new AssetsPlugin({
       path: path.join(__dirname, '../build'),
       filename: 'assets.js',
       processOutput: x => `module.exports = ${JSON.stringify(x)};`,
     }),
-    ...(!DEBUG ? [
+
+    ...(DEBUG ? [] : [
+
+      // Search for equal or similar files and deduplicate them in the output
+      // https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
       new webpack.optimize.DedupePlugin(),
+
+      // Assign the module and chunk ids by occurrence count
+      // https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
+      new webpack.optimize.OccurenceOrderPlugin(true),
+
+      // Minimize all JavaScript output of chunks
+      // https://github.com/mishoo/UglifyJS2#compressor-options
       new webpack.optimize.UglifyJsPlugin({
         compress: {
-          // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
-          screw_ie8: true,
-
-          // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
+          screw_ie8: true, // jscs:ignore requireCamelCaseOrUpperCaseIdentifiers
           warnings: VERBOSE,
         },
       }),
+
+      // A plugin for a more aggressive chunk merging strategy
+      // https://webpack.github.io/docs/list-of-plugins.html#aggressivemergingplugin
       new webpack.optimize.AggressiveMergingPlugin(),
-    ] : []),
+    ]),
   ],
+
+  // Choose a developer tool to enhance debugging
+  // http://webpack.github.io/docs/configuration.html#devtool
+  devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
 });
 
 //
 // Configuration for the server-side bundle (server.js)
 // -----------------------------------------------------------------------------
 
 const serverConfig = extend(true, {}, config, {
-  entry: './src/server.js',
+  entry: './server.js',
+
   output: {
-    path: './build',
+    path: path.join(__dirname, '../build'),
     filename: 'server.js',
     libraryTarget: 'commonjs2',
   },
+
   target: 'node',
+
   externals: [
     /^\.\/assets$/,
     function filter(context, request, cb) {
@@ -176,6 +221,19 @@ const serverConfig = extend(true, {}, config, {
       cb(null, Boolean(isExternal));
     },
   ],
+
+  plugins: [
+
+    // Define free variables
+    // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+    new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': false }),
+
+    // Adds a banner to the top of each generated chunk
+    // https://webpack.github.io/docs/list-of-plugins.html#bannerplugin
+    new webpack.BannerPlugin('require("source-map-support").install();',
+      { raw: true, entryOnly: false }),
+  ],
+
   node: {
     console: false,
     global: false,
@@ -184,13 +242,8 @@ const serverConfig = extend(true, {}, config, {
     __filename: false,
     __dirname: false,
   },
+
   devtool: 'source-map',
-  plugins: [
-    ...config.plugins,
-    new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': false }),
-    new webpack.BannerPlugin('require("source-map-support").install();',
-      { raw: true, entryOnly: false }),
-  ],
 });
 
 export default [clientConfig, serverConfig];