vue爬坑之旅——mint-ui按需引入
今天開專案，決定使用 Vue 來進行開發，遂開始尋找 Vue 相關的 Ui 元件庫，找了一圈看下來，Github 上 star 數最高的二個分別為 Mint-ui 和 Vux，分別掃了他們的二維碼體驗了下，發現 Vux 在介面切換的時候不流暢，所以就剩下 Mint-ui 這一個選擇了。下面開始今天的爬坑之旅。
坑一：npm 5.8.0
在新建專案的時候發現 npm 有新的版本升級，就順手升級了下 npm （其實是強迫症，不升級不舒服斯基，，，，），升級過程順利，然後到了 npm install 的時候就開始悲劇了，install 完成之後老是報錯，
npm error write after end
忘記截圖了，應該是這個錯誤，既然 install 的時候出錯了，那麼當然就不能愉快的 run 了，經過一番折騰，終於找到原因，原來這是 npm 高版本的一個bug，很多人都碰到了，從 npm 5.7.0 開始有這 bug，，，所以積極升級並不是一個好事，這裡把 npm 降級到 5.6.0 可以解決這個問題。
npm install [email protected] -g坑二：Mint-ui 按需引入文件
按照 Mint-ui 的官方文件，首先 install Mint-ui ，這沒什麼好說的，安裝完之後就是在專案中引入了，按照官方的說法，有全部引入和按需引入二種方式。作為實際專案開發來說，當然應該選擇按需引入的方式，這可以減小我們專案的體積，加快載入速度。
按照文件，先安裝 babel-plugin-component，然後修改 .babelrc 在這裡文件上的說法是將 .babelrc 檔案改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
那麼我們開啟這個檔案看一下，未修改過的檔案內容如下：
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
這裡面是有一些預設配置的，如果我們直接把檔案修改成文件上的那樣的話我覺得是有問題的，我覺得這裡應該是寫文件的人沒有把意思說清楚，應該是在這個檔案中將 Mint-ui 需要的配置新增進去，而不是直接覆蓋原檔案，所以我是將文件中說的二個配置加入到原檔案相應的內容下面，修改後的內容如下：
{
"presets": [
["es2015", { "modules": false }],
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
]
}
到了這裡，準備工作已經做完，按照文件，引入需要的元件，使用，然後 npm run dev ，你以為可以愉快的玩耍了？too yang。
在執行命令之後，會出現報錯
Module build failed: Error: Couldn't find preset "es2015" relative to directory XXXXXXXX出現這個錯誤是因為我們沒有安裝 babel-preset-es2015，這個時候只需要單獨安裝下 babel-preset-es2015 就可以了
npm install babel-preset-es2015安裝好了之後就可以正常運行了，這個時候就可以實現元件按需引入了。
更多的思考
問題是解決了，那麼 babel-preset-es2015 這個到底是什麼東西呢？找了下，發現一個帖子， https://zhuanlan.zhihu.com/p/29506685
看完上面的帖子，再結合 babelrc 檔案中的內容來看，其實 babel-preset-es2015 這個依賴我們完全是沒有必要引入的，所以文件中寫的第一個配置 [“es2015”, { “modules”: false }] 也是完全沒有必要的，因為官方已經為我們把配置寫好了，原來的 es2015” 已經被 “env” 取代，而 “env” 這個配置已經給我們寫好了。
現在將 [“es2015”, { “modules”: false }] 去掉，然後將 babel-preset-es2015 也刪掉，重新 run ，發現也是可以的。
到這裡，我想大家應該已經清楚了，這還是文件的坑，文件上面的配置已經過時了，但是他們沒有更新，導致我們在接入的時候話費額外的時間和精力。
總結
最後在總結下，如果要按需引入 Mint-ui 的元件，其實要做的事情很簡單，首先建立專案，初始化模版，安裝依賴，這些是每個專案都需要做的。
然後是安裝 Mint-ui，修改 .babelrc 檔案，注意這裡只需要在 plugins 下面加入如下程式碼即可
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
然後按照文件的指示就可以愉快的玩耍了。
以上就是這次的爬坑過程，記錄下來，希望對碰到同樣問題的朋友能夠有所幫助。
原文地址：https://blog.csdn.net/zgh0711/article/details/79700185
這裡貼上複製過來是怕收藏的話作者會把文章給刪除了！