Vite库模式入口点

Question

我的vite配置如下所示。我希望有两个入口点，正如你在build.lib.entry中看到的那样。我有我的库的入口，在本例中是src/main.js，但我也希望有一个项目的入口，因为我正在本地测试。

// vite.config.js
const path = require('path')
module.exports = {
build: {
lib: {
entry: path.resolve(__dirname, 'src/main.js'),
name: 'MyLib'
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue'
}
}
}
}
}

我尝试在module.exports中添加以下代码，但没有成功。

entry: path.resolve(__dirname, 'src/app.js'),

https://vitejs.dev/guide/build.html#library-模式

Answer 1

看起来vite不支持多个条目。您可以使用两个vite配置文件。

例如。package.json:

"scripts": {
"build": "vite build --config vite.config.js",
"build:lib": "vite build --config vite-lib.config.js",
},

Answer 2

在github上的vite讨论中，你似乎是用这样的东西来做的。https://github.com/vitejs/vite/discussions/1736#discussioncomment-413068

build: {
rollupOptions: {
input: {
'entry-point-a': path.resolve(__dirname, 'src/entry-point-a.tsx'),
'entry-point-b': path.resolve(__dirname, 'src/entry-point-b.tsx'),
},
}
},

Answer 3

使用vite库时，不需要额外的入口点即可进行本地测试。您只需运行npm run dev即可启动为index.html提供服务的开发服务器，该服务器将加载main.js。

将库文件移动到另一个文件夹(如lib(，而不是将它们放在src文件夹中，也是一个好主意。

您可以查看Vite文档中的示例：https://vitejs.dev/guide/build.html#library-模式

如果要继续使用src/main.js作为库入口点的设置，则需要将index.html更新为使用src/app.js。