use Rollup

package.json

@@ -4,8 +4,8 @@
   "version": "0.0.1",
   "scripts": {
     "dev": "sapper dev",
-    "build": "sapper build",
+    "build": "sapper build --legacy",
-    "export": "sapper export",
+    "export": "sapper export --legacy",
     "start": "node build",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
@@ -14,13 +14,24 @@
   "dependencies": {
     "compression": "^1.7.1",
     "polka": "^0.4.0",
-    "sapper": "^0.18.6",
+    "sapper": "^0.19.0",
     "sirv": "^0.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "chokidar": "^2.0.4",
     "npm-run-all": "^4.1.2",
-    "svelte": "^2.0.0",
+    "rollup": "^0.65.0",
-    "svelte-loader": "^2.9.0",
+    "rollup-plugin-babel": "^4.0.2",
-    "webpack": "^4.7.0"
+    "rollup-plugin-commonjs": "^9.1.6",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-svelte": "^4.2.1",
+    "rollup-plugin-terser": "^1.0.1",
+    "svelte": "^2.0.0"
   }
 }

rollup/client.config.js

@@ -0,0 +1,58 @@
+import resolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import commonjs from 'rollup-plugin-commonjs';
+import svelte from 'rollup-plugin-svelte';
+import babel from 'rollup-plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+import config from 'sapper/config/rollup.js';
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+const legacy = !!process.env.SAPPER_LEGACY_BUILD;
+
+export default {
+	input: config.client.input(),
+	output: config.client.output(),
+	plugins: [
+		svelte({
+			dev,
+			hydratable: true,
+			emitCss: true
+		}),
+		resolve(),
+		replace({
+			'process.browser': true,
+			'process.env.NODE_ENV': JSON.stringify(mode)
+		}),
+		commonjs(),
+
+		legacy && babel({
+			extensions: ['.js', '.html'],
+			runtimeHelpers: true,
+			exclude: ['node_modules/@babel/**'],
+			presets: [
+				['@babel/preset-env', {
+					targets: '> 0.25%, not dead'
+				}]
+			],
+			plugins: [
+				'@babel/plugin-syntax-dynamic-import',
+				['@babel/plugin-transform-runtime', {
+					useESModules: true
+				}]
+			]
+		}),
+
+		!dev && terser({
+			module: true
+		})
+	],
+
+	// temporary, pending Rollup 1.0
+	experimentalCodeSplitting: true,
+
+	// temporary, pending https://github.com/rollup/rollup/pull/2432
+	watch: {
+		chokidar: { disableGlobbing: true }
+	}
+};

rollup/server.config.js

@@ -0,0 +1,37 @@
+import resolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import commonjs from 'rollup-plugin-commonjs';
+import svelte from 'rollup-plugin-svelte';
+import config from 'sapper/config/rollup.js';
+import pkg from '../package.json';
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+
+export default {
+	input: config.server.input(),
+	output: config.server.output(),
+	plugins: [
+		svelte({
+			generate: 'ssr',
+			dev
+		}),
+		resolve(),
+		replace({
+			'process.browser': true,
+			'process.env.NODE_ENV': JSON.stringify(mode)
+		}),
+		commonjs()
+	],
+	external: Object.keys(pkg.dependencies).concat(
+		require('module').builtinModules
+	),
+
+	// temporary, pending Rollup 1.0
+	experimentalCodeSplitting: true,
+
+	// temporary, pending https://github.com/rollup/rollup/pull/2432
+	watch: {
+		chokidar: { disableGlobbing: true }
+	}
+};

rollup/service-worker.config.js

@@ -0,0 +1,27 @@
+import resolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import commonjs from 'rollup-plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+import config from 'sapper/config/rollup.js';
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+
+export default {
+	input: config.serviceworker.input(),
+	output: config.serviceworker.output(),
+	plugins: [
+		resolve(),
+		replace({
+			'process.browser': true,
+			'process.env.NODE_ENV': JSON.stringify(mode)
+		}),
+		commonjs(),
+		!dev && terser()
+	],
+
+	// temporary, pending https://github.com/rollup/rollup/pull/2432
+	watch: {
+		chokidar: { disableGlobbing: true }
+	}
+};

routes/index.html

@@ -9,7 +9,7 @@
 	<figcaption>HIGH FIVE!</figcaption>
 </figure>
 
-<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
+<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
 
 <style>
 	h1, figure, p {

webpack/client.config.js

@@ -1,38 +0,0 @@
-const webpack = require('webpack');
-const config = require('sapper/config/webpack.js');
-
-const mode = process.env.NODE_ENV;
-const dev = mode === 'development';
-
-module.exports = {
-	entry: config.client.entry(),
-	output: config.client.output(),
-	resolve: {
-		extensions: ['.js', '.json', '.html'],
-		mainFields: ['svelte', 'module', 'browser', 'main']
-	},
-	module: {
-		rules: [
-			{
-				test: /\.html$/,
-				use: {
-					loader: 'svelte-loader',
-					options: {
-						dev,
-						hydratable: true,
-						hotReload: true
-					}
-				}
-			}
-		]
-	},
-	mode,
-	plugins: [
-		dev && new webpack.HotModuleReplacementPlugin(),
-		new webpack.DefinePlugin({
-			'process.browser': true,
-			'process.env.NODE_ENV': JSON.stringify(mode)
-		}),
-	].filter(Boolean),
-	devtool: dev && 'inline-source-map'
-};

webpack/server.config.js

@@ -1,34 +0,0 @@
-const config = require('sapper/config/webpack.js');
-const pkg = require('../package.json');
-
-const dev = process.env.NODE_ENV === 'development';
-
-module.exports = {
-	entry: config.server.entry(),
-	output: config.server.output(),
-	target: 'node',
-	resolve: {
-		extensions: ['.js', '.json', '.html'],
-		mainFields: ['svelte', 'module', 'browser', 'main']
-	},
-	externals: Object.keys(pkg.dependencies),
-	module: {
-		rules: [
-			{
-				test: /\.html$/,
-				use: {
-					loader: 'svelte-loader',
-					options: {
-						css: false,
-						generate: 'ssr',
-						dev
-					}
-				}
-			}
-		]
-	},
-	mode: process.env.NODE_ENV,
-	performance: {
-		hints: false // it doesn't matter if server.js is large
-	}
-};

webpack/service-worker.config.js

@@ -1,7 +0,0 @@
-const config = require('sapper/config/webpack.js');
-
-module.exports = {
-	entry: config.serviceworker.entry(),
-	output: config.serviceworker.output(),
-	mode: process.env.NODE_ENV
-};