Vite 不转译 ES6 语法

Question

我正在设置一个新的存储库，将一堆 HTML、CSS 和 JS 转换为可以导入到我的项目中的模块。但是，我似乎无法正确转译 JS 文件，即输出脚本不包含我编写的 JavaScript 代码。

这是我的 Vite 配置（暂时禁用 minify 以显示可读内容）：

import { defineConfig } from 'vite'
import { resolve } from 'path'

import { ViteMinifyPlugin } from 'vite-plugin-minify'

export default defineConfig({
  copyPublicDir: false,
  build: {
    minify: false,
    rollupOptions: {
      input: {
        footer: resolve(__dirname, 'src/footer/footer.html'),
        navbar: resolve(__dirname, 'src/navbar/navbar.html'),
      },
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    },
  },
  plugins: [
    // ViteMinifyPlugin({})
  ]
})

这是我用于测试目的的 JavaScript 代码：

function loadUserInfo() {
  return {
    email: "[email protected]",
    name: "Jane Doe",
    username: "janedoe"
  }
}

const world = "hello world"

console.log("testing")

export { loadUserInfo, world }

这是转译的 JavaScript 代码：

(function polyfill() {
  const relList = document.createElement("link").relList;
  if (relList && relList.supports && relList.supports("modulepreload")) {
    return;
  }
  for (const link of document.querySelectorAll('link[rel="modulepreload"]')) {
    processPreload(link);
  }
  new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type !== "childList") {
        continue;
      }
      for (const node of mutation.addedNodes) {
        if (node.tagName === "LINK" && node.rel === "modulepreload")
          processPreload(node);
      }
    }
  }).observe(document, { childList: true, subtree: true });
  function getFetchOpts(link) {
    const fetchOpts = {};
    if (link.integrity)
      fetchOpts.integrity = link.integrity;
    if (link.referrerPolicy)
      fetchOpts.referrerPolicy = link.referrerPolicy;
    if (link.crossOrigin === "use-credentials")
      fetchOpts.credentials = "include";
    else if (link.crossOrigin === "anonymous")
      fetchOpts.credentials = "omit";
    else
      fetchOpts.credentials = "same-origin";
    return fetchOpts;
  }
  function processPreload(link) {
    if (link.ep)
      return;
    link.ep = true;
    const fetchOpts = getFetchOpts(link);
    fetch(link.href, fetchOpts);
  }
})();
console.log("testing");

如您所见，只有

console.log("testing")

被解析为生成的脚本。我在这里缺少什么？

更新：

禁用树摇动无需修改即可工作，但一旦我重新启用缩小功能，不知何故停止工作：

(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function n(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();console.log("testing");

Answer 1

默认情况下，Vite 告诉 rollup 进行 Tree Shaking，这意味着它将删除所有未使用的代码。如果您想保留所有代码，即使不使用它，您可以将

treeshake: false

添加到

rollupOptions

。