错误提示: exports is not defined

Question

最近在学习TypeScript,想自己封装一些模块去用 但是浏览器总是提示exports is not defined

以下为文件详情
A文件(modules)为封装的函数代码

> export class User {
>     name: string;
>     constructor(_name: string) {
>         this.name = _name;
>     }
> 
>     sayHello(): string {
>         return `Hello,${this.name}!`;
>     }
 }
 暴露一个名为User的类

B文件引用A文件的函数

import {User} from "./modules";

let a=new User('123'); a.sayHello();

然后跑了一下就错误提示: exports is not defined

Answer 1

在网上找了许多资料,最终发现了根源所在，浏览器！
原来目前许多主流浏览器都不够完美支持ES6语法,所以Export自然而然会报错。最终的解决方案：
使用webpack打包

Answer 2

https://stackoverflow.com/que...

Answer 3

// vite.config.js
build: {
  commonjsOptions: {
    transformMixedEsModules: true,
    exclude: ['node_modules/lodash-es/**', 'node_modules/@types/lodash-es/**',]
  },
},

参考：

• https://github.com/vitejs/vit...
• https://vitejs.cn/config/#bui...