前言
引入第三方模塊時，我遇到了很多坑。

首先是微信、第三方模塊的文檔描述不清楚。
其次。搜索到的博客，大部分是抄的文檔 / 相互轉載抄襲。作用有限。

於是，我自己做了各種條件下的測試。
解決各種情況的引入Npm模塊的報錯、失敗。希望對你有幫助。

下面以引入Vant 小程序版 為例，開始測試。

1、小程序路徑在中文目錄下

在中文路徑下新建項目，引入UI失敗。

將中文改為英文，重啟項目。

UI顯示正確。

2、小程序目錄下沒有初始化package.json文件
微信的“引入npm模塊”文檔，第一條就是npm命令。
沒有提示，讓你初始化package文件。那我們來試下：

看到沒有，報錯了。提示你沒有找到package.json。
我們再看下項目目錄，發現多了兩個文件。

"vant-weapp"文件夾已經被安裝到了node_modules目錄下。
但是package.json不存在，沒有保存對vant-weapp的引用。

我們嘗試在微信開發者工具構架npm。會提示你：

下面我們補上這條命令：

一路回車。再次運行：

終於成功了。請你記住，要在小程序項目剛初始化時。

npm i vant-weapp -S --production
1
在這條命令運行之前，先執行 npm init，初始化package.json。

3、引入npm模塊時，使用了cnpm
執行cnpm。沒有報錯。
node_modules目錄下生成了2個文件夾。一個帶版本號，一個不帶。

在微信開發工具“構建npm”。

我們再檢查下小程序的miniprogram_npm目錄。發現引入了帶版本號的npm模塊。

接下來。我們關閉微信開發者工具，把這個文件夾改名為“vant-weapp”。

再次運行：

成功！！

以後安裝模塊可以直接用npm命令。cnpm，也行，但記得手動重命名，刪除文件夾的版本號。

4、其它
其它還有一些失敗的原因。
比如：

1、json文件中引用模塊時，路徑寫錯。
會導致：

這個路徑不要傻傻的按照Vant文檔的寫：

/path/to/vant-weapp/dist/button/index

應該這麽寫：

前面不用加“…/”。文件夾一定要對應。

2、使用npm模塊未勾選

3、組件化引用文件時。（不用npm引入）
引入的組件依賴於其他的組件。引入不全，導致報錯。
但npm安裝，是把所有的包下載了。應該沒這個問題。

結語
---------------------
作者：黑夜的風
來源：CSDN
原文：https://blog.csdn.net/chanlingmai5374/article/details/84922830
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

小程序使用npm模塊（引入第三方UI），報錯的多種解決辦法。