totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-12 02:15:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

generate rollup and webpack templates from a single unified branch

Browse Source
This commit is contained in:
Conduitry
2019-01-20 12:14:58 -05:00
parent 1234971da5
commit 3f6a1c5f67
10 changed files with 203 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -2,4 +2,4 @@
node_modules
yarn-error.log
/cypress/screenshots/
/__sapper__
/__sapper__/

8
.travis.yml
View File

@@ -5,7 +5,7 @@ node_js:
env:
global:
- BUILD_TIMEOUT=10000
install:
- npm install
- npm install cypress
branches:
only:
- master
script: _template/build.sh

17
README.md
View File

@@ -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.

13
_template/build-pkg.js Normal file
View File

@@ -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'
);

33
_template/build.sh Executable file
View File

@@ -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

26
package.json
View File

@@ -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"
}
}

53
package_template.json Normal file
View File

@@ -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"
}
}
}
}

87
rollup.config.js Normal file
View File

@@ -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()
]
}
};

2
src/routes/index.html
View File

@@ -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 {

4
src/service-worker.js
View File

@@ -2,7 +2,7 @@ import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by webpack,
// `shell` is an array of all the files generated by the bundler,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(files);
const cached = new Set(to_cache);
@@ -42,7 +42,7 @@ self.addEventListener('fetch', event => {
// ignore dev server requests
if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
// always serve assets and webpack-generated files from cache
// always serve static files and bundler-generated assets from cache
if (url.host === self.location.host && cached.has(url.pathname)) {
event.respondWith(caches.match(event.request));
return;