最近、傅金泉教授の Vite クラスを受講しましたが、講義は非常に良かったです。残念ながら、現在仕事を探していないため、彼をサポートするための面接質問を購入することはできません。プラグインを動画のコードに従って書いたのですが、yarn devを実行したところ、以下のようなエラーが発生しました。
私の vite.base.config.js (vite.config.js に似ていますが、より基本的な設定と拡張された設定があるだけで、ビデオを見た人なら誰でも理解できるでしょう)
import {
defineConfig} from "vite"
//import {
ViteAliases } from "vite-aliases";
import {
ViteAliases } from 'vite-aliases';
//const postcssPresetEnv =require("postcss-preset-env")
export default defineConfig({
optimizeDeps:{
exclude:[],
},
envPrefix:"ENV_",//配置vite注入客户端环境变量
css:{
//对css的行为进行配置
//modules配置最终会丢给postcss module
modules:{
localsConvention:"camelCase",
scopeBehaviour:"local",
//generateScopedName:"[name]_[local]_[hash:5]",
/*generateScopedName:(name,filename,css)=>{
console.log("name",name,"filename",filename,"css",css);
return `${
name}_${
Math.random().toString(36).substr(3,8)}`;
},*/
hashPrefix:"hello",
globalModulePaths:["./componentB.module.css"],//代表不想参与css模块化编码的模块。
},
preprocessorOptions:{
//key+config key代表预处理器的名
less:{
//整个的配置对象都会最终给到
math:"always",
globalVars:{
mainColor:"red",
}
},
},
devSourcemap:true,
/*postcss:{
//plugins:[postcssPresetEnv()]
}*/
},
build:{
rollupOptions:{
output:{
assetFileNames:"[hash].[name].[ext]"
}
},
assetsInlineLimit:4096,
//outDir:"testDist"
assetsDir:"static"
},
plugins:[
ViteAliases()
],
})
情報：
$ vite
X [エラー] [plugin externalize-deps] パッケージ「vite-aliases」のエントリを解決できませんでした。パッケージの package.json で指定された main/module/exports が正しくない可能性があります:
「.」の既知の条件はありません。「vite-aliases」パッケージのエントリ
node_modules/esbuild/lib/main.js:1327:27:
1327 │ let result = await callback({
╵ ^
at packageEntryFailure (file:///C:/Users/Administrator/Desktop/testvite/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:34096:11)
at resolvePackageEntry (file:///C:/Users/Administrator/Desktop/testvite/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:34091:9)
at tryNodeResolve (file:///C:/Users/Administrator/Desktop/testvite/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:33834:20)
at file:///C:/Users/Administrator/Desktop/testvite/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62782:40
at requestCallbacks.on-resolve (C:\Users\Administrator\Desktop\testvite\node_modules\esbuild\lib\main.js:1327:28)
at handleRequest (C:\Users\Administrator\Desktop\testvite\node_modules\esbuild\lib\main.js:697:19)
at handleIncomingPacket (C:\Users\Administrator\Desktop\testvite\node_modules\esbuild\lib\main.js:719:7)
at Socket.readFromStdout (C:\Users\Administrator\Desktop\testvite\node_modules\esbuild\lib\main.js:647:7)
at Socket.emit (node:events:527:28)
at addChunk (node:internal/streams/readable:315:12)
このエラーは、ここに登録されている「onResolve」コールバックから発生しました。
node_modules/esbuild/lib/main.js:1251:20:
1251 │ let promise = setup({
╵ ^
at setup (file:///C:/Users/Administrator/Desktop/testvite/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62772:27)
at handlePlugins (C:\Users\Administrator\Desktop\testvite\node_modules\esbuild\lib\main.js:1251:21)
at buildOrServeImpl (C:\Users\Administrator\Desktop\testvite\node_modules\esbuild\lib\main.js:942:5)
at Object.buildOrServe (C:\Users\Administrator\Desktop\testv
ずっと分からなかったので兄に聞いてみると、兄が調べてくれて、
import { ViteAliases } from 'vite-aliases'; を
import { ViteAliases } from './node_modules/vite- に変更してくれました。 aliases'; 以上です。Vite と webpack の検索モジュールの違いが原因である可能性があります。問題が発生した場合は、後で説明します。今はトラブルに巻き込まれないようにしましょう。問題が発生した場合は、集中します。ソースコード上で。