英文:
How to tell vite to output a specified file into a specified folder with rollupOptions?
问题
我想告诉 Vite 只将 src 文件夹中的 demo.js 输出到一个名为 bundle.js 的 build 文件夹中,这是我的代码,我运行它,但 Vite 只将 main.js 和图片输出到 dist 文件夹中,它没有输出我指定的 demo.js,我应该怎么做?
我尝试了 out.Dir 和 root,但它只是改变了输出目录到一个指定的文件夹。但我还需要改变输入文件为一个指定的文件。我尝试了 root 选项,Vite 确实改变了输入文件,但它需要该文件链接到 index HTML。我认为 Vite 仍然希望捆绑所有文件。但我的目标是将一个具有导入的单个 js 文件捆绑到 Vite 配置中的指定输出文件中。我尝试只使用 rollup 的自己的配置来完成这项工作,这是成功的。但我只是想知道是否可以只使用 Vite 来做到这一点,因为它使用了 rollup。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
rollupOptions: {
input: 'src/demo.js',
output: {
file: 'build/bundle.js',
format: 'cjs'
},
// plugins: [
// resolve(),
// babel({ babelHelpers: 'bundled' })
// ]
}
})
英文:
I want to tell vite to only output the demo.js in src file into a build folder with a name bundle.js, here is my code, I run it, but vite only output the main.js and images into the dist folder, it doesn't output the demo.js I specified, what should I do?
I tried out.Dir and root, it just changes the output dir to a specified folder. But I need also change the input file to a specified file. I tried the root option, which vite did change the input file, but it need that file to have link to index HTML. I think vite still want to bundle all the files. But my goal is to bundle a single js file which has imports to a specified output file with the rollupOptions inside Vite config. I tried to just use the rollup's own config to do the job, which is successful. But I just wondering if we can just use the vite to do it, since it uses rollup.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
rollupOptions: {
input: 'src/demo.js',
output: {
file: 'build/bundles.js',
format: 'cjs'
},
// plugins: [
// resolve(),
// babel({ babelHelpers: 'bundled' })
// ]
}
})
答案1
得分: 1
可以使用 Vite 的 库模式 来构建单个 JS 文件(不需要 HTML)。示例中的 vite.config.js
可以编写如下:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
resolve(__dirname, 'src/demo.js'),
name: 'demo',
fileName: 'bundles',
format: 'cjs',
},
outDir: 'build',
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
},
},
})
英文:
You can build a single JS file (and no HTML) using Vite's library mode. Your example vite.config.js
can be written as follows:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
resolve(__dirname, 'src/demo.js'),
name: 'demo',
fileName: 'bundles',
format: 'cjs',
},
outDir: 'build',
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
},
},
})
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论