:: 問題

使用原生微信小程序開發(fā)時，通過官方 typescript 模板構(gòu)建的小程序無法正確執(zhí)行 構(gòu)建npm 成功，從而導致我想通過 npm 安裝并使用第三方庫出現(xiàn)問題

:: 開發(fā)環(huán)境（可參照）

設備：macOS Ventura 13.0

微信開發(fā)者工具：Stable 1.06.2303060

創(chuàng)建模板：typescript + sass 【這里使用的官方推薦模板創(chuàng)建，可參照使用，不必糾結(jié)】

:: 錯誤呈現(xiàn)

• 無法 構(gòu)建npm

NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory. Or you may edit project.config.json's `packNpmManually` and `packNpmRelationList` [1.06.2303060][darwin-arm64]

message： NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory. Or you may edit project.config.json's `packNpmManually` and `packNpmRelationList`
appid: wx9074bfadbd205d93f
openid: o6zAJs_Iljsdw1hbEAnsDZ3HdgoIzY
ideVersion: 1.06.2303060
osType: darwin-arm64
time: 2023-04-02 10:56:01

:: 解決方案

【微信官方建議】npm 支持

關鍵的地方就是需要在 project.config.json 文件中的 setting 對象下配置如下內(nèi)容，在此之前請確保已初始化【npm init】項目

"packNpmManually": true,
"packNpmRelationList": [
  {
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./app/"
  }
],

但是，【這很重要??】，若你也使用了 typescript 構(gòu)建項目的話，完成上面這一步依舊無法成功，你需要嘗試在 setting 配置下先將 typescript 相關去除，【重啟編輯器】后 再次嘗試

"setting": {
  ...
  "typescript"	// 刪除 -> 保存更改 -> 清除緩存 -> 編譯 -> 構(gòu)建npm
}

這是可能又會出現(xiàn)【模擬器啟動失敗】的情況，這是因為，項目使用 typescript 創(chuàng)建，而插件被刪除了，無法匹配到入口文件，錯誤如下：

[ app.json 文件內(nèi)容錯誤] app/app.json: 未找到 ["pages"][0] 對應的 pages/index/index.js 文件(env: macOS,mp,1.06.2303060; lib: 2.30.3)

直接一點的方式，就是通過調(diào)整 app.json 文件讓其自動為你創(chuàng)建一個 xxx.js 的文件，這里其實不用修改什么，隨便刪除一個引號再加回來就行，目的是要讓編輯器知道這個文件被改動了，它就會重新生成文件，保存后依次執(zhí)行 【清緩存 -> 編譯】,然后就可以看到項目中多了一個xxx.js的文件了，如下事例

├── logs
│   ├── logs.js
│   ├── logs.json
│   ├── logs.ts
│   ├── logs.wxml
│   ├── logs.wxss

此時模擬器報錯將消失，但屏幕上沒有內(nèi)容？不用擔心，別忘了做這些的核心是解決什么問題【構(gòu)建npm】，接下來就是見證奇跡的時刻，依次做如下操作【如果不行，請記得 重啟開發(fā)者工具 ，try again】

工具欄中找到【工具】 -> 找到【構(gòu)建npm】 并用力點擊它

??然后，然后你就會****，是的，沒錯，你做到了，構(gòu)建成功了，此時不出意外的話，你的項目里面應該會有這樣一個目錄【miniprogram_npm】

接下來，就需要將之前的內(nèi)容補全，然后奇跡再次發(fā)生，幸運再次降臨，項目正常啟動【酷炫的頁面重獲新生】，當然，剛剛生成的 xxx.js 文件可刪也可不刪并沒有什么大的影響，存儲空間當然會占用，介意的話就用力刪除吧，留下來呢也是兼容上文 typescript 被刪除后模擬器無法運行的情況

"setting": {
  ...
  "typescript"	// 加回來
}

:: 重要提醒??

修改配置后，沒效果或是出現(xiàn)報錯，請記得【重啟編輯器】

:: 更多內(nèi)容 ::

> 開發(fā)過程中踩坑經(jīng)驗記錄文章來源地址http://www.zghlxwxcb.cn/news/detail-670161.html

到了這里，關于微信小程序【構(gòu)建npm】使用記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！