vite的项目中如何使用第三方js？

Question

我通过webpack生成了一个js文件，抛出了一个实例化了的对象，需要在vite + ts的小程序项目中引入，但是vite无法使用require来引入，在webpack的项目中通过require后，无法使用类里的方法

这是我的webpack输出配置

output: {
        path: path.resolve(__dirname, 'dist'),
        filename: `[name].${version}.min.js`,
        library: {
            name: 'Handler',
            type: "commonjs"
        }
    },

这是我的主ts文件

import Handler from "./Handler";

let handler = new Handler()

export default handler

生成的js文件也抛出了这个库名

/******/     exports.Handler = __webpack_exports__;

我想问一下如果我想通过import来引用这个js文件，该如何引用？是需要写.d.ts文件的话，这个文件又该怎么写呢？

Answer 1

参考 webpack 文档，应该是这样：

module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // do not specify a `name` here
      type: 'module',
    },
  },
};

Answer 2

如果是用的是ts写的的话，两个地方得更改，一个是webpack里面

output: {
    library: {
      type: 'module',
    },
  },

另一个地方是ts配置

"module": "ES6",