From 3f6a1c5f67acfbb440e83c0e87bd3e6cfb3e5f0e Mon Sep 17 00:00:00 2001 From: Conduitry Date: Sun, 20 Jan 2019 12:14:58 -0500 Subject: [PATCH] generate rollup and webpack templates from a single unified branch --- .gitignore | 2 +- .travis.yml | 8 ++-- README.md | 17 +++++---- _template/build-pkg.js | 13 +++++++ _template/build.sh | 33 ++++++++++++++++ package.json | 26 ------------- package_template.json | 53 +++++++++++++++++++++++++ rollup.config.js | 87 ++++++++++++++++++++++++++++++++++++++++++ src/routes/index.html | 2 +- src/service-worker.js | 4 +- 10 files changed, 203 insertions(+), 42 deletions(-) create mode 100644 _template/build-pkg.js create mode 100755 _template/build.sh delete mode 100644 package.json create mode 100644 package_template.json create mode 100644 rollup.config.js diff --git a/.gitignore b/.gitignore index 938a5b5..ed567f2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ node_modules yarn-error.log /cypress/screenshots/ -/__sapper__ \ No newline at end of file +/__sapper__/ diff --git a/.travis.yml b/.travis.yml index 8ad1fc3..53c7097 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,7 +5,7 @@ node_js: env: global: - BUILD_TIMEOUT=10000 -install: - - npm install - - npm install cypress - +branches: + only: + - master +script: _template/build.sh diff --git a/README.md b/README.md index da6784b..369a775 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,12 @@ # sapper-template -The default [Sapper](https://github.com/sveltejs/sapper) template. To clone it and get started: +The default [Sapper](https://github.com/sveltejs/sapper) template, with branches for Rollup and webpack. To clone it and get started: ```bash -npx degit sveltejs/sapper-template my-app +# for Rollup +npx degit sveltejs/sapper-template#rollup my-app +# for webpack +npx degit sveltejs/sapper-template#webpack my-app cd my-app npm install # or yarn! npm run dev @@ -13,8 +16,6 @@ Open up [localhost:3000](http://localhost:3000) and start clicking around. Consult [sapper.svelte.technology](https://sapper.svelte.technology) for help getting started. -*[Click here for the Rollup version of this template](https://github.com/sveltejs/sapper-template/tree/rollup)* - ## Structure Sapper expects to find three directories in the root of your project — `app`, `assets` and `routes`. @@ -53,14 +54,14 @@ There are three simple rules for naming the files that define your routes: * Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route -## Webpack config +## Bundler config -Sapper uses webpack to provide code-splitting, dynamic imports and hot module reloading, as well as compiling your Svelte components. As long as you don't do anything daft, you can edit the configuration files to add whatever loaders and plugins you'd like. +Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like. ## Production mode and deployment -To start a production version of your app, run `npm run build && npm start`. This will disable hot module replacement, and activate the appropriate webpack plugins. +To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins. You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands: @@ -70,7 +71,7 @@ now ``` -## Using external components +## Using external components with webpack When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller. diff --git a/_template/build-pkg.js b/_template/build-pkg.js new file mode 100644 index 0000000..30df946 --- /dev/null +++ b/_template/build-pkg.js @@ -0,0 +1,13 @@ +const fs = require('fs'); + +const type = process.argv[2]; + +const pkg = require('../package_template.json'); +for (const key in pkg['merge-configs'][type]) { + Object.assign(pkg[key], pkg['merge-configs'][type][key]); +} +delete pkg['merge-configs']; +fs.writeFileSync( + __dirname + '/../package.json', + JSON.stringify(pkg, null, ' ') + '\n' +); diff --git a/_template/build.sh b/_template/build.sh new file mode 100755 index 0000000..a69d58c --- /dev/null +++ b/_template/build.sh @@ -0,0 +1,33 @@ +#!/bin/bash +cd "$(dirname $0)"/.. + +# write out SSH key +[ "$SSH_KEY" ] || exit 1 +echo "$SSH_KEY" > ~/.ssh/id_rsa +chmod 600 ~/.ssh/id_rsa + +# make sure we're on master, and delete the rollup and webpack branches +git symbolic-ref HEAD refs/heads/master +git reset --hard +git branch -D rollup webpack + +# create the rollup branch off the current master +git checkout -b rollup +node _template/build-pkg.js rollup +git rm -r --cached .travis.yml _template package_template.json webpack.config.js +git add package.json +git commit -m 'Sapper template for Rollup' +git symbolic-ref HEAD refs/heads/master +git reset --hard + +# create the webpack branch off the current master +git checkout -b webpack +node _template/build-pkg.js webpack +git rm -r --cached .travis.yml _template package_template.json rollup.config.js +git add package.json +git commit -m 'Sapper template for webpack' +git symbolic-ref HEAD refs/heads/master +git reset --hard + +# force push rollup and webpack branches +git push git@github.com:sveltejs/sapper-template.git rollup webpack -f diff --git a/package.json b/package.json deleted file mode 100644 index 5543791..0000000 --- a/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "TODO", - "description": "TODO", - "version": "0.0.1", - "scripts": { - "dev": "sapper dev", - "build": "sapper build", - "export": "sapper export", - "start": "node __sapper__/build", - "cy:run": "cypress run", - "cy:open": "cypress open", - "test": "run-p --race dev cy:run" - }, - "dependencies": { - "compression": "^1.7.1", - "polka": "^0.4.0", - "sirv": "^0.2.0" - }, - "devDependencies": { - "npm-run-all": "^4.1.5", - "sapper": "^0.22.1", - "svelte": "^2.0.0", - "svelte-loader": "^2.9.0", - "webpack": "^4.7.0" - } -} diff --git a/package_template.json b/package_template.json new file mode 100644 index 0000000..5505683 --- /dev/null +++ b/package_template.json @@ -0,0 +1,53 @@ +{ + "name": "TODO", + "description": "TODO", + "version": "0.0.1", + "scripts": { + "dev": "sapper dev", + "build": "sapper build", + "export": "sapper export", + "start": "node __sapper__/build", + "cy:run": "cypress run", + "cy:open": "cypress open", + "test": "run-p --race dev cy:run" + }, + "dependencies": { + "compression": "^1.7.1", + "polka": "^0.4.0", + "sirv": "^0.2.0" + }, + "devDependencies": { + "npm-run-all": "^4.1.5", + "sapper": "^0.24.2", + "svelte": "^2.0.0" + }, + "merge-configs": { + "rollup": { + "scripts": { + "build": "sapper build --legacy", + "export": "sapper export --legacy" + }, + "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", + "rollup": "^1.0.0", + "rollup-plugin-babel": "^4.0.2", + "rollup-plugin-commonjs": "^9.1.6", + "rollup-plugin-node-resolve": "^4.0.0", + "rollup-plugin-replace": "^2.0.0", + "rollup-plugin-svelte": "^5.0.1", + "rollup-plugin-terser": "^1.0.1" + } + }, + "webpack": { + "devDependencies": { + "svelte-loader": "^2.9.0", + "webpack": "^4.7.0" + } + } + } +} diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..736a913 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,87 @@ +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'; +import pkg from './package.json'; + +const mode = process.env.NODE_ENV; +const dev = mode === 'development'; +const legacy = !!process.env.SAPPER_LEGACY_BUILD; + +export default { + client: { + input: config.client.input(), + output: config.client.output(), + plugins: [ + replace({ + 'process.browser': true, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + svelte({ + dev, + hydratable: true, + emitCss: true + }), + resolve(), + 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 + }) + ], + }, + + server: { + input: config.server.input(), + output: config.server.output(), + plugins: [ + replace({ + 'process.browser': false, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + svelte({ + generate: 'ssr', + dev + }), + resolve(), + commonjs() + ], + external: Object.keys(pkg.dependencies).concat( + require('module').builtinModules || Object.keys(process.binding('natives')) + ), + }, + + serviceworker: { + input: config.serviceworker.input(), + output: config.serviceworker.output(), + plugins: [ + resolve(), + replace({ + 'process.browser': true, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + commonjs(), + !dev && terser() + ] + } +}; diff --git a/src/routes/index.html b/src/routes/index.html index 95b2980..d7ef047 100644 --- a/src/routes/index.html +++ b/src/routes/index.html @@ -9,7 +9,7 @@
HIGH FIVE!
-

Try editing this file (routes/index.html) to test hot module reloading.

+

Try editing this file (routes/index.html) to test live reloading.