vite开发js库，如何build之后只生成一个js文件，并且可以script标签的方式调用？

Question

// package.json
"type": "module",
  "files": [
    "dist",
    "index.d.ts"
  ],
  "main": "./dist/counter.umd.cjs",
  "module": "./dist/counter.js",
  "types": "./index.d.ts",
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/counter.js",
    "require": "./dist/counter.umd.cjs"
  },

// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: './lib/main.js',
      name: 'Counter',
      fileName: 'counter',
    },
  }
})

// lib/main.js
class Counter {
  constructor(options) {
    ...
  }
}
export default Counter

vite开发js库，run build之后dist生成了两个文件counter.js和counter.umd.cjs，我直接引入<script src="./counter.js" /> 然后console.log(Counter)会报Counter is not defined，但是引用<script src="./dist/counter.umd.cjs" />再console就没有问题是什么原因？
我现在现在的需求是dist只生成一个.js文件，用户既可以通过import引入，也可以通过<script src=”“ /> 方式引入到项目中，该如何实现？

Answer 1

因为 counter.js 是一个 ES 模块，而 counter.umd.cjs 是一个 UMD 模块。浏览器直接通过 <script> 标签引入时，默认情况下只支持 UMD 或 IIFE 格式的模块，而不支持 ES 模块。

解决思路

修改 package.json
确保 package.json 中的 main 和 module 都指向同一个文件：

{
  "type": "module",
  "files": [
    "dist",
    "index.d.ts"
  ],
  "main": "./dist/counter.js",
  "module": "./dist/counter.js",
  "types": "./index.d.ts",
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/counter.js",
    "require": "./dist/counter.js"
  }
}

修改 vite.config.js
调整 Vite 的配置来生成一个 UMD 格式的文件，并确保它也支持 ES 模块的导入：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: './lib/main.js',
      name: 'Counter',
      formats: ['umd'], // 只生成 UMD 格式
    },
    rollupOptions: {
      output: {
        file: 'dist/counter.js', // 指定输出文件名为 counter.js
        globals: {
          // 如果你的库依赖其他外部库，可以在这里定义全局变量
        },
      },
    },
  },
});

使用方式（有两种）

1.通过 <script> 标签引入：

<script src="./dist/counter.js"></script>
<script>
  console.log(Counter);
</script>

2.通过 ES 模块引入：

import Counter from './dist/counter.js';
console.log(Counter);

Answer 2

https://cn.vitejs.dev/guide/build.html#library-mode