Document a How To on using Svelte with Babel
#3388
Comments
|
In the official website, you've got instructions that will clone a template into your machine, and I don't recall any gotcha with the configuration(either webpack or rollup) other than the fact that you have to turn off HMR with webpack because it's broken. If you would like to see my configuration, here it is(webpack): I omitted the irrelevant parts. |
|
+1 Would love to see a correct way to include transpilation and polyfills with rollup and svelte |
|
Just sharing my solution for getting Babel working for anyone struggling with this: In babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
include: ['src/**', 'node_modules/svelte/**'],
}),In module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3,
},
],
],
}Note that I'm using
|
|
After setting up babel, i'm now getting this error cant find any thing that talks about this. edit |
|
@northkode do you have the "@babel/runtime" dependencies installed ? I just had the same problem than you with : _classCallCheck is not defined After installing "@babel/runtime" to my svelte project, it worked. |
|
@damienMellet can you share a snippet ? I am struggling with it too. |
|
I'm using babel with svelte and sapper. Here are snippets of my package.json and rollup.config.js file if it's helpful... |
|
@ayZagen Here is my config package.json : and rollup.config.js |
|
@caschbre @damienMellet Thanks a lot! I was using webpack so I am posting here my configs in case anyone struggles with it too. These configs are also configured to transpile typescript and svelte with babel too. //babel-config.js
module.exports = function(api) {
api.cache(true);
const presets = [
["@babel/preset-env", {
useBuiltIns: "entry", // or "entry"
corejs: 2,
}],
"@babel/typescript",
];
const plugins = [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread",
"@babel/plugin-proposal-optional-chaining",
];
return {
comments: true,
ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/],
presets,
plugins,
};
};//webpack.config.js
const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const sveltePreprocess = require("svelte-preprocess");
const TerserPlugin = require("terser-webpack-plugin");
const mode = process.env.NODE_ENV || "development";
module.exports = {
mode,
entry: "./src/index.ts",
output: {
library: "MyLibrary",
libraryTarget: "umd",
libraryExport: "default",
path: path.resolve(__dirname, "dist"),
filename: "bundle.min.js",
umdNamedDefine: true
},
resolve: {
// here is the deal breaker.
//mjs extension must be before js to use correct svelte lib files.
extensions: [".mjs", ".ts", ".tsx", ".js", ".json", ".svelte"],
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
output: {
comments: false, // in case of magic comments
},
},
extractComments: false,
}),
],
},
module: {
rules: [
{
test: /\.(js|ts|mjs|svelte)$/,
use: {
loader: 'babel-loader'
},
},
{
test: /\.svelte$/,
exclude: /node_modules/,
use: {
loader: "svelte-loader",
options: {
emitCss: false, // I would like to keep my css in js so If you want to have separate files change this to be true
hotReload: true,
preprocess: {
style: sveltePreprocess({}).style
},
},
},
},
{
test: /\.(sass|scss)$/,
use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
},
],
},
plugins: [
new CleanWebpackPlugin()
]
};// I haven't tried building declaration files
//tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"declaration": true,
"outDir": "dist/types",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
}
} |
This doesn't work for me, would you mind sharing some more example code? When I follow what you've done, the build still builds ES6 and doesn't work in IE11. |
Sure. Below are my package.json {
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"rollup": "^1.12.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^5.1.2",
"svelte": "^3.0.0"
},
"dependencies": {
"core-js": "^3.4.5",
"sirv-cli": "^0.4.4"
}
}babel.config.js module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3,
},
],
],
}rollup.config.js import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import babel from 'rollup-plugin-babel';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/build/bundle.css');
}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration —
// consult the documentation for details:
// https://github.com/rollup/rollup-plugin-commonjs
resolve({
browser: true,
dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
}),
commonjs(),
babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
include: ['src/**', 'node_modules/svelte/**'],
}),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
}
}
};
} |
|
@christopherbecker did you find a solution? i have the same issue, still getting es6 code using @rmtracey 's configuration... |
|
got it working now using this guide: https://blog.az.sg/posts/svelte-and-ie11/ |
|
For webpack + svelte + babel |
|
I am having issues with getting this config to accept the null coalescing operator in Svelte component code. Any ideas how I can use this syntax? |
|
@ayZagen I've tested your setup and |
|
@Klustre I have used optional chaining in ts files but not in svelte components. So as you asked, I tried and it fails on svelte components. To make it work you need to update preprocess: sveltePreprocess({
babel: {
presets: [
["@babel/preset-env", {
loose: true,
modules: false,
targets: {
esmodules: true,
}
}],
"@babel/typescript",
] ,
plugins: [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread",
"@babel/plugin-proposal-optional-chaining",
]
}
})Hope it helps you |
|
Thanks a lot @ayZagen 👍 |
pngwn
added
popular
|
Closing this, as I think by now there are enough resources out there (including https://sveltesociety.dev/recipes/build-setup/transpiling-es6-to-es5-for-legacy-browser-support) and also in this thread (thanks for everyone posting their solutions!) which help people setting up Bable with Svelte. With the rise of Vite, it's furthermore unlikely that people will setup this stuff as it was expected 4 years ago when this issue was opened. |
Is your feature request related to a problem? Please describe.
It's a common request to be able to serve a website to users with older browsers, like IE11 or iOS Safari 9.
This requires all sorts of polyfilling & transpilation happening behind the scenes.
However, there's a few gotchas in getting Babel, the de facto tool for transpiling modern code into digestable ES5, to work together with Rollup/Webpack and Svelte. Would be nice, if there was a well documented, visibly linked and thoroughly explained starting point to fork from. Or at least something to copy-paste from.
For example, this golden nugget of information was hidden in a comment inside a closed issue:
Trying to search the Svelte website for "Babel" gets exactly 0 results. Which is stupid.
Describe the solution you'd like
I'd like a clear how-to on the Svelte website with copy-paste config examples on getting Babel to run with Svelte, so people could spend their time doing actual work or being outdoors ☀️
How important is this feature to you?
It's not very important to myself anymore, as I already sacrificed a fair amount of my own time to fiddle together a working setup. However, I believe it is useful for the general public, and very easy to implement.
The text was updated successfully, but these errors were encountered: