英文:
using valnilla js why vite did'n include automaticly js file that imported to index.html for build ? while its work fine in dev
问题
index.html
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="num"></p>
</body>
<script type="module">
import {sum} from './counter.js'
const number = sum(2,2)
document.getElementById('num').innerHTML = number
</script>
</html>
counter.js
export function sum(a,b){
return a+b
}
after build
dist/assets/index-74746f.js counter.js already bundle inside it
dist/index.html
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="num"></p>
</body>
</html>
there is nothing tag script that point to ./assets/index--74746f.js
i know simply i can write <script src="./assets/index--74746f.js . but look not best practice
英文:
index.html
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="num"></p>
</body>
<script type="module">
import {sum} from './counter.js'
const number = sum(2,2)
document.getElementById('num').innerHTML = number
</script>
</html>
counter.js
export function sum(a,b){
return a+b
}
after build
dist/assets/index-74746f.js counter.js already bundle inside it
dist/index.html
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="num"></p>
</body>
</html>
there is nothing tag script that point to ./assets/index--74746f.js
i know simply i can write <script src="./assets/index--74746f.js . but look not best practice
答案1
得分: 0
实际上，在构建包含正确脚本标签的index.html之后。
<html lang="en">
<head>
<title>Document</title>
<script type="module" crossorigin src="/assets/index-a1d6a87d.js"></script>
</head>
<body>
<p id="num"></p>
</body>
</html>
我找不到任何选项来阻止内联模块脚本的分块，但另一方面，当所有的JavaScript都包括内联脚本时，这实际上并不是坏事。
如果您不喜欢捆绑脚本中的哈希值，您可以使用：
vite.config.js
import { defineConfig } from 'vite';
export default defineConfig(() => {
return {
build: {
rollupOptions: {
output: {
entryFileNames: 'index.js'
}
},
},
};
});
英文:
Actually after building the index.html contains a proper script tag.
<html lang="en">
<head>
<title>Document</title>
<script type="module" crossorigin src="/assets/index-a1d6a87d.js"></script>
</head>
<body>
<p id="num"></p>
</body>
</html>
I couldn't find any option to prevent chunking the inline module script, but on the other hand it's actually not bad when all of your JS including inline one is bundled.
If you don't like a hash in the bundle script you could use:
vite.config.js
import { defineConfig } from 'vite';
export default defineConfig(() => {
return {
build: {
rollupOptions: {
output: {
entryFileNames: 'index.js'
}
},
},
};
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论