I use ViteJS integrated with PHP as a backend.
I would like to ‘separate’ EditorJS from the main asset file. I build it, even though I’m not using EditorJS directly.
However, when I try to use ‘manualChunks’ in ‘roolupOPtions’ during the build, I end up with an empty file ‘editorjs-l0sNRNKZ.js”:
import { defineConfig } from "vite"
export default defineConfig({
server:{
//port: '2424',
origin: 'http://localhost:5173'
},
base: '/assets',
build: {
copyPublicDir:false,
outDir: 'public/assets/tpl_1',
assetsDir:'',
manifest: true,
rollupOptions: {
input: 'rsc/tpl_1/main.js',
//external: ['@editorjs/editorjs'],
output: {
manualChunks: {
editorjs: ["@editorjs/editorjs"]
}
},
},
},
})
✓ 62 modules transformed.
Generated an empty chunk: "editorjs".
public/assets/tpl_1/.vite/manifest.json 0.28 kB │ gzip: 0.17 kB
public/assets/tpl_1/main-9kx3olKa.css 225.60 kB │ gzip: 30.40 kB
public/assets/tpl_1/editorjs-l0sNRNKZ.js 0.00 kB │ gzip: 0.02 kB
public/assets/tpl_1/main-T4ghkc16.js 81.75 kB │ gzip: 24.65 kB
I think it’s because I’m not using it in my ‘main.js file’, so ViteJS/Rollup doesn’t include it in the asset.
//import EditorJS from '@editorjs/editorjs';
//const editor = new EditorJS();
const EditorJS = () => import('@editorjs/editorjs');
Here I use dynamic import. I followed these intrcutions: https://github.com/vitejs/vite/discussions/17730
So I ‘fake’using it by adding ‘console.log()’:
const EditorJS = () => import('@editorjs/editorjs');
console.log(EditorJS)
Now when I run the ‘build’ command, the file is no longer empty:
✓ 62 modules transformed.
public/assets/tpl_1/.vite/manifest.json 0.48 kB │ gzip: 0.22 kB
public/assets/tpl_1/main-9kx3olKa.css 225.60 kB │ gzip: 30.40 kB
public/assets/tpl_1/main-CpMGCOVV.js 82.76 kB │ gzip: 25.11 kB
public/assets/tpl_1/editorjs-C0ZxgI3C.js 216.88 kB │ gzip: 59.16 kB
I would like to have this asset generated ‘manually’ because I will import ‘editorjs-C0ZxgI3C.js’ later in my html file like this:
<script type="module">
import EditorJS from '/public/assets/tpl_1/editorjs-C0ZxgI3C.js';
const editor = new EditorJS();
</script>
Is there a way to tell to rollup to include EditorJS even if it’s not use in main.js file?
I hope my message is understandable, it’s quite hard to explain what I want. Additionally, I’m not fluent in English. Thanks for your understanding.
Update
I find a solution by editing rollupOPtions like this:
rollupOptions: {
input: {
main: './src/js/main.js',
styles: './src/css/styles.css',
page1: './src/js/page1.js',
page2: './src/js/page2.js',
}