前言
引入第三方模塊時，我遇到了很多坑。
首先是微信、第三方模塊的文檔描述不清楚。
其次。搜索到的博客，大部分是抄的文檔 / 相互轉載抄襲。作用有限。
於是，我自己做了各種條件下的測試。
解決各種情況的引入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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！