如何告诉vite使用rollupOptions将指定文件输出到指定文件夹?

huangapple go评论136阅读模式
英文:

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>



huangapple
  • 本文由 发表于 2023年5月28日 23:54:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76352336.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定