From 685c005518dfb57a8635657d0a7293570f243adf Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 30 Jan 2017 12:49:03 +0530 Subject: [PATCH 1/6] Let webpack2 to handle ES2015 module system Since Node.js can't do that, we need to transpile ES2015 module system in the emit-file-loader. --- server/build/babel/preset.js | 2 +- server/build/loaders/emit-file-loader.js | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/server/build/babel/preset.js b/server/build/babel/preset.js index 7b57a72286dde..03370e8b4a4cb 100644 --- a/server/build/babel/preset.js +++ b/server/build/babel/preset.js @@ -3,7 +3,7 @@ const babelRuntimePath = require.resolve('babel-runtime/package') module.exports = { presets: [ - require.resolve('babel-preset-es2015'), + [require.resolve('babel-preset-es2015'), { modules: false }], require.resolve('babel-preset-react') ], plugins: [ diff --git a/server/build/loaders/emit-file-loader.js b/server/build/loaders/emit-file-loader.js index 6452139deea6a..905b174138e8c 100644 --- a/server/build/loaders/emit-file-loader.js +++ b/server/build/loaders/emit-file-loader.js @@ -1,4 +1,5 @@ import loaderUtils from 'loader-utils' +import { transform } from 'babel-core' module.exports = function (content, sourceMap) { this.cacheable() @@ -10,7 +11,14 @@ module.exports = function (content, sourceMap) { const opts = { context, content, regExp } const interpolatedName = loaderUtils.interpolateName(this, name, opts) - this.emitFile(interpolatedName, content, sourceMap) + const transpiled = transform(content, { + presets: [ + 'es2015' + ], + sourceMaps: 'both', + inputSourceMap: sourceMap + }) - this.callback(null, content, sourceMap) + this.emitFile(interpolatedName, transpiled.code, transpiled.map) + this.callback(null, transpiled.code, transpiled.map) } From ee6752b56ebf734d00fe3e8ea6916f48cdce1b45 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 30 Jan 2017 13:35:17 +0530 Subject: [PATCH 2/6] Use sourceMaps only in dev. --- server/build/loaders/emit-file-loader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/build/loaders/emit-file-loader.js b/server/build/loaders/emit-file-loader.js index 905b174138e8c..4fd5a2aff6712 100644 --- a/server/build/loaders/emit-file-loader.js +++ b/server/build/loaders/emit-file-loader.js @@ -15,7 +15,7 @@ module.exports = function (content, sourceMap) { presets: [ 'es2015' ], - sourceMaps: 'both', + sourceMaps: process.env.NODE_ENV === 'production' ? false : 'both', inputSourceMap: sourceMap }) From 8020f39ce81a18aae5c11c2a065e5b408045f961 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 30 Jan 2017 15:03:37 +0530 Subject: [PATCH 3/6] Introduce a transform option to emit-file-loader So, we can move our ES2015 transpile code with that option. --- server/build/loaders/emit-file-loader.js | 22 +++++++++++----------- server/build/webpack.js | 19 ++++++++++++++++++- 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/server/build/loaders/emit-file-loader.js b/server/build/loaders/emit-file-loader.js index 4fd5a2aff6712..afd932cccc7b3 100644 --- a/server/build/loaders/emit-file-loader.js +++ b/server/build/loaders/emit-file-loader.js @@ -1,7 +1,6 @@ import loaderUtils from 'loader-utils' -import { transform } from 'babel-core' -module.exports = function (content, sourceMap) { +module.exports = function (content, sourceMap, options) { this.cacheable() const query = loaderUtils.parseQuery(this.query) @@ -11,14 +10,15 @@ module.exports = function (content, sourceMap) { const opts = { context, content, regExp } const interpolatedName = loaderUtils.interpolateName(this, name, opts) - const transpiled = transform(content, { - presets: [ - 'es2015' - ], - sourceMaps: process.env.NODE_ENV === 'production' ? false : 'both', - inputSourceMap: sourceMap - }) + const emit = (code, map) => { + this.emitFile(interpolatedName, code, map) + this.callback(null, code, map) + } - this.emitFile(interpolatedName, transpiled.code, transpiled.map) - this.callback(null, transpiled.code, transpiled.map) + if (query.transform) { + const transformed = query.transform({ content, sourceMap }) + return emit(transformed.content, transformed.sourceMap) + } + + return emit(content, sourceMap) } diff --git a/server/build/webpack.js b/server/build/webpack.js index 4ce5ea762cfe8..2b8b0e22e6e1f 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -10,6 +10,7 @@ import UnlinkFilePlugin from './plugins/unlink-file-plugin' import WatchPagesPlugin from './plugins/watch-pages-plugin' import JsonPagesPlugin from './plugins/json-pages-plugin' import getConfig from '../config' +import * as babelCore from 'babel-core' const documentPage = join('pages', '_document.js') const defaultPages = [ @@ -144,7 +145,23 @@ export default async function createCompiler (dir, { dev = false, quiet = false return /node_modules/.test(str) && str.indexOf(nextPagesDir) !== 0 }, options: { - name: 'dist/[path][name].[ext]' + name: 'dist/[path][name].[ext]', + // By default, our babel config does not transpile ES2015 module syntax because + // webpack knows how to handle them. + // But Node.js doesn't know handle them. + // So, we have to transpile them here. + transform ({ content, sourceMap }) { + const transpiled = babelCore.transform(content, { + presets: ['es2015'], + sourceMaps: process.env.NODE_ENV === 'production' ? false : 'both', + inputSourceMap: sourceMap + }) + + return { + content: transpiled.code, + sourceMap: transpiled.map + } + } } }, { loader: 'babel-loader', From d93d6c699b25134ef3d7196569637742343a4c6c Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 30 Jan 2017 15:04:55 +0530 Subject: [PATCH 4/6] Remove unwanted argument options. --- server/build/loaders/emit-file-loader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/build/loaders/emit-file-loader.js b/server/build/loaders/emit-file-loader.js index afd932cccc7b3..e7138d434efda 100644 --- a/server/build/loaders/emit-file-loader.js +++ b/server/build/loaders/emit-file-loader.js @@ -1,6 +1,6 @@ import loaderUtils from 'loader-utils' -module.exports = function (content, sourceMap, options) { +module.exports = function (content, sourceMap) { this.cacheable() const query = loaderUtils.parseQuery(this.query) From 8a6f34f087ada36c3f02ea26067948b179989cd4 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 30 Jan 2017 15:06:38 +0530 Subject: [PATCH 5/6] Update comments. --- server/build/webpack.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/server/build/webpack.js b/server/build/webpack.js index 2b8b0e22e6e1f..db0004b316945 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -147,9 +147,8 @@ export default async function createCompiler (dir, { dev = false, quiet = false options: { name: 'dist/[path][name].[ext]', // By default, our babel config does not transpile ES2015 module syntax because - // webpack knows how to handle them. - // But Node.js doesn't know handle them. - // So, we have to transpile them here. + // webpack knows how to handle them. (That's how it can do tree-shaking) + // But Node.js doesn't know how to handle them. So, we have to transpile them here. transform ({ content, sourceMap }) { const transpiled = babelCore.transform(content, { presets: ['es2015'], From 4cfae746c8a098361e6958ed62b938b14f18f085 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 30 Jan 2017 18:53:36 +0530 Subject: [PATCH 6/6] Use dev flag instead of NODE_ENV --- server/build/webpack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/build/webpack.js b/server/build/webpack.js index db0004b316945..3399356ac037b 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -152,7 +152,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false transform ({ content, sourceMap }) { const transpiled = babelCore.transform(content, { presets: ['es2015'], - sourceMaps: process.env.NODE_ENV === 'production' ? false : 'both', + sourceMaps: dev ? 'both' : false, inputSourceMap: sourceMap })