neutrino-preset-svelte is a Neutrino preset for creation of Svelte applications for web platforms.
- Zero upfront configuration necessary to start developing and building a Svelte web app
- Modern Babel compilation supporting ES modules, last several major browser versions, async functions, dynamic imports, ES class properties, rest spread operators and automatic polyfills bound to platforms
- Webpack loaders for importing HTML Svelte components, CSS, images, icons, and fonts
- ESlint integration in Svelte components
<script>tags - Webpack Dev Server during development on "localhost" and local network IP for external devices access
- Automatic creation of HTML pages, no templating of "index.html" necessary
- Hot reloading support
- Tree-shaking to create smaller bundles
- Production-optimized bundles with Babili minification, source maps and easy chunking
- Extensible to customize your project as needed
- Node.js v6.9+
- Neutrino v8
neutrino-preset-svelte can be installed from NPM. Make sure neutrino, and neutrino-preset-svelte are development dependencies in your project. svelte is installed as an internal dependency of neutrino-preset-svelte
❯ npm install --save-dev neutrino neutrino-preset-svelteDon't install Svelte in your project because it is already included to the preset. The used Svelte version is always mentioned in the Release notes
neutrino-preset-svelte follows the standard project layout specified by Neutrino. This means that by default all project source code should live in a directory named src in the root of the project. This includes JavaScript files, CSS stylesheets, images, and any other assets that would be available to your compiled project. Only files explicitly imported or lazy loaded to your project will be bundled.
After installing Neutrino and the Svelte preset, add a new directory named src in the root of the project, with a single JS file named index.js in it. You can mount you application to the document <body>. Edit your src/index.js file with the following:
import Main from './main.html';
import './common.css';
new Main({
target: document.body
});You can change this code base to better match your needs. Create main.html Svelte component with any markup and common.css with your global styles.
Now edit your project's package.json to add commands for starting and building the application:
{
"scripts": {
"start": "neutrino start",
"build": "neutrino build"
}
}And add the new file .neutrinorc.js in the root of the project:
module.exports = {
use: [
'neutrino-preset-svelte'
]
};Start the app.
❯ npm start
✔ Development server running on: http://192.168.31.5:5000
✔ Build completedThe console shows that application started at "http://192.168.31.5:5000". But webpack-dev-server starts in both "localhost:5000" and local network IP address (e.g. "http://192.168.1.100:5000"). External IP may be useful for mobile development. The preset tries to automatically start (if not disabled in custom options) a browser with the URL of the server IP address (if not changed in custom options).
neutrino-preset-svelte builds static assets to the build directory by default when running neutrino build.
❯ npm run buildYou can either serve or deploy the contents of this build directory as a static site.
If you wish to copy files to the build directory that are not imported from application code, you can place them in a directory within src called static. All files in this directory will be copied from src/static to build/static.
neutrino-preset-svelte supports Hot Reloading of files that was changed. Hot Module Replacement is supported only in CSS files. This means that changing of CSS will re-render only a part of styles, and changing of the rest of modules will reload the page.
You can provide custom options and have them merged with this preset's default options to easily affect how this
preset builds. You can modify the preset settings from .neutrinorc.js by overriding with an options object. Use
an array pair instead of a string to supply these options in .neutrinorc.js.
The following shows how you can pass an options object to the preset and override its options, showing the defaults:
module.exports = {
use: [
['neutrino-preset-svelte', {
// options related to generating the HTML document
html: {
title: `${name} ${version}`,
filename: 'index.html',
template: path.resolve(__dirname, 'template.ejs'),
inject: 'head',
mobile: true,
minify: {
collapseWhitespace: true,
preserveLineBreaks: true
}
},
// options related to a development server
server: {
https: false,
public: true,
port: 5000,
open: true,
contentBase: neutrino.options.source
},
// supported browsers in a Browser List format
browsers: [
'last 3 chrome versions',
'last 3 firefox versions',
'last 3 edge versions',
'last 3 opera versions',
'last 3 safari versions',
'last 1 ie version',
'last 1 ie_mob version',
'last 1 blackberry version',
'last 3 and_chr versions',
'last 3 and_ff versions',
'last 3 op_mob versions',
'last 2 op_mini versions',
'ios >= 8',
'android >= 4'
]
}]
]
};Example: Enable HTTPS, disable auto-opening of a browser, change the page title, define supported browsers:
module.exports = {
use: [
['neutrino-preset-svelte', {
// Example: disable Hot Module Replacement
server: {
https: true,
open: false
},
// Example: change the page title
html: {
title: 'Svelte App'
},
// Example: change supported browsers
browsers: [
'last 3 versions'
]
}]
]
};Consumers may provide their custom configurations for different parts of the current preset that will override its defaults. Also if you want to construct your own preset based on neutrino-preset-svelte you can use information below.
To override the build configuration, start with the documentation on customization. neutrino-preset-svelte creates some conventions to make overriding the configuration easier once you are ready to make changes.
By default the Svelte preset creates these entry points to your application:
polyfill: contains platform polyfills according to the chosen browsers in the Browser List.index: maps to theindex.jsfile in the src directory. This value is provided byneutrino.options.entry.
The following is a list of rules and their identifiers which can be overridden:
compile: Compiles JS files from the src directory using Babel. Contains a single loader namedbabel;svelte: Compiles Svelte components to JavaScript modules. Contains a single loader named the samesvelte;style: Allows importing CSS stylesheets from modules. Contains two loaders namedstyleandcss;img,svg,ico: Allows import image files from modules. Each contains a single loader namedurl;woff,ttf: Allows importing WOFF and TTF font files from modules. Each contains a single loader namedurl;eot: Allows importing EOT font files from modules. Contains a single loader namedfile.
The following is a list of plugins and their identifiers which can be overridden:
env: Injects the value of NODE_ENV into the application asprocess.env.NODE_ENV;html: Creates HTML files when building.html-defer: Addsdeferattribute to<script>tags in HTML files when building;chunk: Defines chunks for manifest and vendor entry points.hot: Enables hot module reloading;clean: Clears the contents of build prior to creating a production bundle;copy: Copies files during build, defaults fromsrc/statictobuild/static.
By following the customization guide and knowing the rule, loader, and plugin IDs above,
you can override and augment the build by providing a function to your .neutrinorc.js use array. You can also make these changes from the Neutrino API in a custom middleware.
By defining an entry point named vendor you can split out external dependencies into a chunk separate
from your application code.
Example: Put lodash into a separate "vendor" chunk:
module.exports = {
use: [
'neutrino-preset-svelte',
neutrino => neutrino.config.entry('vendor').add('lodash')
]
};