├── .gitignore ├── src ├── main.js └── App.svelte ├── public └── index.html ├── package.json ├── README.md ├── LICENSE └── esbuild.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build 3 | yarn.lock 4 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app 11 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Svelte App with esbuild 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-esbuild-template", 3 | "version": "1.0.0", 4 | "description": "A starter kit to build Svelte apps with esbuild", 5 | "repository": "https://github.com/Tazeg/svelte-esbuild-template", 6 | "author": "@JeffProd", 7 | "license": "MIT", 8 | "scripts": { 9 | "dev": "node esbuild.js dev", 10 | "build": "node esbuild.js prod" 11 | }, 12 | "devDependencies": { 13 | "esbuild": "^0.12.15", 14 | "esbuild-svelte": "^0.5.3", 15 | "live-server": "^1.2.1", 16 | "svelte": "^3.38.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte-esbuild template 2 | 3 | A starter kit to build [Svelte](https://svelte.dev/) apps with [esbuild](https://esbuild.github.io/). 4 | 5 | ## Install 6 | 7 | ```bash 8 | git clone https://github.com/Tazeg/svelte-esbuild-template 9 | cd svelte-esbuild-template 10 | yarn install # or npm 11 | ``` 12 | 13 | ## Developpement 14 | 15 | ```bash 16 | yarn run dev 17 | ``` 18 | 19 | Open your browser to 20 | 21 | ## Build for production 22 | 23 | ```bash 24 | yarn run build 25 | ``` 26 | 27 | Deploy the `public/` directory. 28 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Hello {name}!

7 |

Visit the Svelte tutorial to learn how to build Svelte apps.

8 |
9 | 10 | 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 JeffProd 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /esbuild.js: -------------------------------------------------------------------------------- 1 | const esbuild = require('esbuild') 2 | const liveServer = require("live-server") // dev server 3 | const sveltePlugin = require('esbuild-svelte') // esbuild plugin svelte 4 | 5 | function showUsage () { 6 | console.log('USAGE') 7 | console.log('node esbuild.js dev') 8 | console.log('node esbuild.js prod') 9 | process.exit(0) 10 | } 11 | 12 | if (process.argv.length < 3) { 13 | showUsage() 14 | } 15 | 16 | if (![ 'dev', 'prod' ].includes(process.argv[2])) { 17 | showUsage() 18 | } 19 | 20 | // production mode, or not 21 | const production = (process.argv[2] === 'prod') 22 | 23 | // esbuild watch in dev mode to rebuild out files 24 | let watch = false 25 | if (!production) { 26 | watch = { 27 | onRebuild(error) { 28 | if (error) console.error('esbuild: Watch build failed:', error.getMessage()) 29 | else console.log('esbuild: Watch build succeeded') 30 | } 31 | } 32 | } 33 | 34 | // esbuild build options 35 | // see: https://esbuild.github.io/api/#build-api 36 | const options = { 37 | entryPoints: ['./src/main.js'], 38 | bundle: true, 39 | watch, 40 | format: 'iife', 41 | minify: production, 42 | sourcemap: false, 43 | outfile: './public/build/bundle.js', // and bundle.css 44 | plugins: [ 45 | sveltePlugin() 46 | ] 47 | } 48 | 49 | // start web dev server 50 | if (!production) { 51 | const params = { 52 | port: 8080, // Set the server port. Defaults to 8080. 53 | root: "./public", // Set root directory that's being served. Defaults to cwd. 54 | open: false, // When false, it won't load your browser by default. 55 | wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec. 56 | logLevel: 2, // 0 = errors only, 1 = some, 2 = lots 57 | } 58 | liveServer.start(params) 59 | } 60 | 61 | // esbuild dev + prod 62 | esbuild.build(options).catch((err) => { 63 | console.error(err) 64 | process.exit(1) 65 | }) 66 | --------------------------------------------------------------------------------