I'm having a devil of a time figuring out how to build a single .js file from Vite in my Svelte project that includes all of the built javascript and CSS from my Svelte projects. By default, Vite bundles the app into one html file (this is ok), two .js files (why??), and one .css file (just want this bundled into the one js file).
I ran this very basic command to get a starter project:
npx degit sveltejs/template myproject
I tried adding a couple of plugins, but nothing I added achieved the results I wanted. Primarily, the plugins I found seem to want to create a single HTML file with everything in it. It seems like PostCSS might be able to help, but I don't understand what configuration I can set via Vite to get it to do what I want.
What is the magic set of plugins and config that will output a single HTML file with a single js file that renders my Svelte app and its CSS onto the page?
Two steps,
We can inject css into js assets with vite-plugin-css-injected-by-js.
We can emit a single js asset by disabling chunks in rollup's config.
Final result,
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
export default defineConfig({
plugins: [cssInjectedByJsPlugin()],
build: {
rollupOptions: {
output: {
manualChunks: undefined,
},
},
},
});
If you're looking for a solution to this, you might want to take a look at vite-plugin-singlefile.
That doesn't come out of the box for vite but you can write a quick plugin which will be doing exactly that
const bundle_filename = ''
const css_filename = 'style.css'
defineConfig({
build: {
lib: {
entry: 'src/mycomponent.js',
name: 'mycomponent.js',
fileName: () => 'mycomponent.js',
formats: ['iife'],
},
cssCodeSplit: false,
rollupOptions: {
plugins: [
{
apply: 'build',
enforce: 'post',
name: 'pack-css',
generateBundle(opts, bundle) {
const {
[css_filename]: { source: rawCss },
[bundle_filename]: component,
} = bundle
const IIFEcss = `
(function() {
try {
var elementStyle = document.createElement('style');
elementStyle.innerText = ${JSON.stringify(rawCss)}
document.head.appendChild(elementStyle)
} catch(error) {
console.error(error, 'unable to concat style inside the bundled file')
}
})()`
component.code += IIFEcss
// remove from final bundle
delete bundle[css_filename]
},
},
],
},
},
})
I created a boilerplate Vite project for this problem:
https://github.com/mvsde/svelte-micro-frontend
Maybe the configuration helps with your case:
import { defineConfig } from 'vite'
import { svelte } from '#sveltejs/vite-plugin-svelte'
export default defineConfig({
plugins: [
svelte({
emitCss: false
})
],
build: {
assetsDir: '',
sourcemap: true,
lib: {
entry: 'src/main.js',
formats: ['iife'],
name: 'SvelteMicroFrontend',
fileName: 'svelte-micro-frontend'
}
}
})
I had the same issue and was able to fix by editing vite.config.ts as follows tested on vite#2.3.8
export default {
build: {
rollupOptions: {
output: {
manualChunks: undefined,
},
},
},
};
If you are working with Svelte, you can use emitCss:
export default defineConfig({
plugins: [svelte({
emitCss: false,
})],
})
As manualChunks are no longer working in a latest versions of Vite, there's no any way to combine all the chunks into one.
But found a hacky solution to have an index.html + bundle.js after the build: https://github.com/d-velopment/SvelteKit-One-Bundle - it rewraps the project's initial .js files to go from bundle.js, which could be loaded from index.html or external project.
Related
In a Vue + Vite project, I have folder structure like this
The problem is vite doesn't detect changes (ctrl+s) in A.vue or B.vue i.e., components nested under NestedFolder in components folder. Everywhere else works fine.
My vite.config.js looks like this,
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
'#public': fileURLToPath(new URL('./public', import.meta.url))
}
},
server: {
proxy: {
'/api': {
target: 'XXX',
changeOrigin: true,
secure: false,
ws: true,
}
}
}
})
I've tried custom HMR functions as per the vite HMR API docs, got it to send full reload using this.
...
plugins: [
vue(),
{
name: 'custom-hmr',
enforce: 'post',
// HMR
handleHotUpdate({ file, server }) {
if (file.endsWith('.vue')) {
console.log('reloading json file...');
server.ws.send({
type: 'reload',
path: '*'
});
}
},
}
], ...
I looked through vite's HMR API docs but couldn't figure out how to send update event to vite when using custom hmr function
Any help/suggestion on how to solve this would be greatly appreciated.
Ok I solved the problem. The problem is not with nested folders.
Vite seems to ignore components that are imported with absolute path.
E.g. Vite doesn't detect changes in components imported as:
import Dropdown from '#/components/GlobalDropdown.vue'
//# resolves to /src
but detects changes in imports that are relative:
import LoadingSpinner from '../LoadingSpinner.vue'
I couldn't find any setting that addresses this. But having relative paths for component imports solved the issue. Is this an issue?
I think issue is that you made a caseSensitive typo, please check that your path is correct, I had similar issue and this was one letter typed in uppercase.
So I have a Vue 3 + Typescript app. npm run build of course takes the app and compiles it into the dist folder so it can be deployed. I have a web worker typescript file that I would like to be compiled separately so that it ends up in the root of the dist folder with the name worker.js. Here is what I'm looking for:
dist
|- worker.js
src
|- worker.ts // This gets compiled to js file in dist folder
I tried doing this by using webpack's DefinePlugin in my vue.config.js like so:
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
entry: `${__dirname}/src/worker.ts`,
module: {
rules: [
{
test: /worker\.ts$/,
use: 'ts-loader',
exclude: /node-modules/
}
]
},
resolve: {
extensions: ['.ts']
},
output: {
filename: 'worker.js',
path: `${__dirname}/dist`
}
})
],
resolve: {
alias: {
vue$: 'vue/dist/vue.esm-bundler.js'
}
}
}
}
Unfortunately this doesn't work, npm run build just completely ignores the worker.ts file and it doesn't show up in the dist folder anywhere, not even as a chunk. Any suggestions? Or is what I'm wanting to do even possible? Thanks for any help!
I was able to get the desired result using esbuild. Now I can write my web worker in Typescript and use classes and functions from my Vue app. It also compiles lightning fast. I just added the node ./esbuild.js command to my npm run dev and npm run build scripts, and now it compiles to the public folder before the Vue app builds. Here is my esbuild.js file.
const esbuild = require('esbuild')
const { nodeExternalsPlugin } = require('esbuild-node-externals')
const config = {
entryPoints: ['./src/worker.ts'],
outfile: 'public/worker.js',
bundle: true,
minify: false,
logLevel: 'silent',
plugins: [nodeExternalsPlugin()]
}
esbuild.build(config).catch(() => process.exit(1))
Let me know if you have any questions, I'd be happy to help anyone out getting this working.
I have created a React library using TSDX → https://github.com/deadcoder0904/react-typical
It uses CSS Modules & attaches styles to the React library.
The bundle correctly outputs CSS file into the dist/ folder but it never really references it as it should.
This causes my styles to not show up at all.
Here's my complete tsdx.config.js:
const postcss = require('rollup-plugin-postcss');
const { terser } = require('rollup-plugin-terser');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
module.exports = {
rollup(config, options) {
config.plugins.push(
postcss({
modules: true,
plugins: [
autoprefixer(),
cssnano({
preset: 'default',
}),
],
inject: false,
// only write out CSS for the first bundle (avoids pointless extra files):
extract: !!options.writeMeta,
minimize: true,
}),
terser()
);
return config;
},
};
If you see the dist/ folder at https://yarnpkg.com/package/#deadcoder0904/react-typical?files, then you'll notice it has index.js file but it doesn't reference the .css file at all.
Same thing with every .js file in dist/ folder. No file references .css file & the CSS code isn't bundled at all so it just doesn't use styles.
How do I solve this?
From my understanding, normally a library usually introduce the component & styles separately and let the users know in the document if they want to use default style then let import css file too such as:
import ReactTypical from "react-typical"
import "react-typical/dist/react-typical.cjs.development.css"
That is as same as your case I guess
Or you would set your style by default without asking them to import manually which means you have to refine your config by setting inject: true, it will import your css context into your js file then execute at runtime to append the script in the <head /> of the document. Then your changing config would look like:
postcss({
modules: true,
plugins: [
autoprefixer(),
cssnano({
preset: 'default',
}),
],
// Append to <head /> as code running
inject: true,
// Keep it as false since we don't extract to css file anymore
extract: false,
})
In order to work with storybook, add following css rules to your webpack storybook config ./story/main.js:
// Remove the existing css rule
config.module.rules = config.module.rules.filter(
f => f.test.toString() !== '/\\.css$/'
);
config.module.rules.push(
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
include: path.resolve(__dirname, "../src"),
}
)
But you miss them in your package dependency, just remember to add them:
npm i -D style-loader css-loader
I am not sure how to organize my js code.
Our front end is customized to different customers. Majority of the base code is common across all customers. However there are cases where certain functionality is overridden for each customer.
For example if we have 2 functions Function1 and Function2.
Customer1 uses Function1 while Customer2 uses Function2. How can I make sure that when I build the code for Customer, Function2 will not be included in the bundle? And when I build the code for Customer2, then Function1 will not be included int he bundle?
The other option I have, and that I am trying to avoid, is to have a separate code repo for each customer.
I think what you need is Tree-Shaking in webpack.
Tree shaking can be a stubborn process depending on how the library you are using in your application is developed.
If you find that you are using a module that does not shake dead code properly, you can always use the babel-plugin-import plugin. This plugin will build your bundle with only the code you import and nothing else. Here is an example of my babel 7.x config file. I use it to remove a lot of code that was not being tree-shaken by webpack from material-ui.
{
"presets": [
"#babel/preset-typescript",
"#babel/preset-react"
],
"plugins": [
[
"babel-plugin-import",
{
"libraryName": "#material-ui/core",
"libraryDirectory": "/",
"camel2DashComponentName": false
},
"core"
],
[
"babel-plugin-import",
{
"libraryName": "#material-ui/icons",
"libraryDirectory": "/",
"camel2DashComponentName": false
},
"icons"
]
]
}
When using this plugin in certain libraries, some of your imports also may break and you may need to import certain things on their own. I had to do this with material-ui's makeStyles function.
Feel free to remove what is unnecessary to you and keep the parts that help :).
At webpack configuration, optimization/usedExports: true will remove unused code.
webpack.config.js
module.exports = [
{
entry: "./main.js",
output: {
filename: "output.js"
},
optimization: {
usedExports: true, // <- remove unused function
}
},
{
entry: "./main.js",
output: {
filename: "without.js"
},
optimization: {
usedExports: false, // <- no remove unused function
}
}
];
lib.js
exports.usedFunction = () => {
return 0;
};
exports.unusedFunction = () =>{
return 1;
};
main.js
// Not working
// const lib = require("./lib");
// const usedFunction = lib.usedFunction;
// Working
const usedFunction = require("./lib").usedFunction;
usedFunction()
```shell
$ webpack
Generated Output file:
dist/output.js
(()=>{var r={451:(r,t)=>{t.W=()=>0}},t={};(0,function e(o){var n=t[o];if(void 0!==n)return n.exports;var p=t[o]={exports:{}};return r[o](p,p.exports,e),p.exports}(451).W)()})();
dist/without.js
(()=>{var n={451:(n,r)=>{r.usedFunction=()=>0,r.unusedFunction=()=>1}},r={};(0,function t(u){var e=r[u];if(void 0!==e)return e.exports;var o=r[u]={exports:{}};return n[u](o,o.exports,t),o.exports}(451).usedFunction)()})();
^^^^^^^^^^^
I followed the steps on the website 'https://angular.io/guide/aot-compiler' to adapt an Angular 2 app to use AoT compilation and everything seemed to work as expected until the rollup step, which in theory cleans up the code of unused components.
Leaving the 'rollup-config.js' file the same as in the instructions, when I run 'node_modules/.bin/rollup -c rollup-config.js' I get the following error:
[!] Error: 'ToastModule' is not exported by node_modules/ng2-toastr/ng2-toastr.js
I've googled it, and I came across a solution that pointed to add a 'namedExports' field to the 'commonjs' parameter. The resulting 'rollup-config.js' is:
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
export default {
entry: 'src/main.js',
dest: 'src/build.js',
sourceMap: false,
format: 'iife',
onwarn: function(warning) {
if(warning.code === 'THIS_IS_UNDEFINED') { return; }
console.warn(warning.message);
},
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/ng2-toastr/ng2-toastr': [ 'ToastModule' ]
}
}),
uglify()
]
}
Now, the script generates the 'build.js' file and I can load it through the index.html file, but the component 'ng2-toastr' is not working (the component shows a 'toast' like message, appearing on one side of the screen and disappearing after a few seconds).
Did I miss something? Thanks in advance,