你可能須要的小知識(雜)｜牛氣沖天新年徵文

總結和記錄最近遇到的一些坑

關於優化

前段時間公司要求作了些優化，但很久沒作了，因此一邊查一邊改適應本身的代碼，這邊記錄一下，防止下次忘了沒地方去找：

1.如何開啓webpack analyze

1.npm install --save-dev webpack-bundle-analyzer

2.vue.config.js中配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
複製代碼

，而且在module.exports中配置configureWebpack，並在configureWebpack添加plugins，這是一個數組，在plugins中添加new BundleAnalyzerPlugin(),代碼以下：

configureWebpack: {
    plugins: [
        new BundleAnalyzerPlugin()
    ]
 }        
複製代碼

2.如何在打包的時候進行vendors壓縮

這部份內容其實你們也都會用了，我在網上查閱後發現不少表述不一，我經過對本身代碼的修改作了一些調整，若是有須要的話，能夠本身嘗試一下：

1.咱們首先須要在webpack.config.js文件中設置externals，若是是在vue框架下的話，就直接在vue.config.js中，找到module.exports，新增一個chainWebpack，而後添加externals，代碼以下：

chainWebpack: config => {
    config.set('externals', {
        vue:'Vue',
        'vue-router':'VueRouter',
        axios:'axios'
    })
},
複製代碼

2.而後在main.js中刪除咱們引入的上一步中的externals中的部分，可是我這裏實踐出來發現，有可能由於版本的兼容性緣由，會出現頁面出現bug或者沒有反應的狀況，這裏你們注意一下。

3.而後在頁面中引入咱們須要的資源，這個網絡資源既能夠去官網拿到，也能夠在cdn上拿到，不過要注意版本哦，另外若是是多頁面結構的狀況，請記得在每一個頁面中都引入相應的js和css，這個時候你能夠給在webpack中配置過的頁面添加

<%= require('html-loader!./temple_script.html')  %>
複製代碼

而後新建一個temple_script.html文件，將全部的引入放在一塊兒引入，使代碼更簡潔。

4.最後運行就能夠發現vendors的體積確實有變小。

關於cookie

這裏說一個關於cookie的小知識點，咱們平常常常會將數據存儲到localStorage或者sessionStorage以及cookie中，可是在MDN中有一段關於cookie的做用域的解釋：

爲何會注意到這裏，由於在修改同事代碼的時候，他在設置cookie的時候就設置了domain ,但我移除的時候沒有注意，因此一開始怎麼刪都刪不了

export function setToken(token) {
  Cookies.set(TokenKey, token, { domain: '.xxxx.xxx' });//存在xxxx.xxx域名下,測試域名下是沒有辦法設置的，所以會無限跳轉登陸頁面
}
複製代碼

因此在刪除cookie的時候，也一樣要注意，須要明確指定domain(path這裏我沒有指定也能刪除成功，仍是根據具體狀況來吧，若是set中加了path，刪除固然也須要)

export function removeToken() {
  return Cookies.remove(TokenKey, { domain: '.xxxx.xxx' })
}
複製代碼

關於nvm

以前沒怎麼寫太小程序，而後前段時間看taro蠻火的，就去嘗試了一下，根據官方提示一步步操做了一邊，，而後下載了nvm來管理node版本，可是以前沒有用過nvm，發現用nvm能夠解決一些問題：

1. nvm解決access

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@tarojs'
複製代碼

1.sudo + npm命令

2.經過下載nvm來解決每次須要sudo的狀況

2.nvm在重啓mac後失效

這個問題我發生了，而後在網上找到了有效的處理方法，具體原文找不到了，但參考以下：

-bash: npm: command not found
-bash: nvm: command not found
複製代碼

緣由涉及到一個mac中的隱藏文件，你能夠在admin文件夾中，使用shift+command+.這個組合操做，來顯示隱藏文件，這個文件就是 .bash_profile，那麼咱們查看到這個文件沒有了以後，就進行以下操做：

打開終端：

進入到根目錄：cd ~/

建立bash_profile文件：touch .bash_profile

打開bash_profile文件：open .bash_profile

因而就會出現一個txt文件，編輯內容這部分很關鍵，咱們在裏面輸入以下內容：

export NVM_DIR="$HOME/.nvm"

[ -s "NVM_DIR/nvm.sh" ] && . "NVM_DIR/nvm.sh"

編輯完成，保存。

接下來在終端輸入更新命令：

source .bash_profile

最後在執行npm或者nvm的時候就不會出現錯誤了。

3.node版本與本地衝突

可是在使用taro的時候，將node的版本更新到了15以上，當我再次回到本身的項目並執行npm run serve的時候，出現了node-sass-loader版本不對的狀況，這實際上是由於項目中的loader對應的是14版本的node，而當時用了15版本的，所以出現了這種報錯：

nvm ls #查看目前nvm管理器下有什麼版本的node，以及正在用的node版本

#結果以下
->      v15.3.0
default -> node (-> v15.3.0)
node -> stable (-> v15.3.0) (default)
stable -> 15.3 (-> v15.3.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/fermium (-> N/A) lts/argon -> v4.9.1 (-> N/A) lts/boron -> v6.17.1 (-> N/A) lts/carbon -> v8.17.0 (-> N/A) lts/dubnium -> v10.23.0 (-> N/A) lts/erbium -> v12.20.0 (-> N/A) lts/fermium -> v14.15.1 (-> N/A) 複製代碼

那麼這顯然是不能夠的，目前使用的15+的版本，只能對應node-sass的5以上的版本，若是你直接下載最新版的node-sass，就會形成一個錯誤，5.0的版本沒法與4.0+版本相匹配，而4.0所對應的node版本是14+的版本，所以咱們須要經過nvm install + '你須要的版本好'下載以後，就會自動切換到對應下載的版本，不過爲了確認，最好仍是nvm ls來查看一下，以後咱們再在對應版本下下載node-sass，下載過程當中可能會遇到衝突問題，咱們可使用推薦的npm audit fix來進行協調，最後在運行npm run serve就差很少能夠運行啦，若是還遇到不能夠的問題，按照error的提示來修改吧！

關於如何用純css實現淡入淡出

前些時候，有個需求特效要求能把下拉框作成淡入淡出的效果，心想，這還不簡單，直接jquery找個庫或者element上用一下就得了唄，最後用了一個淡入淡出的庫，結果出問題了，就是在頁面還沒有加載完成的時候，這個庫是不生效的，因此在頁面加載的時候，一開始即便出現了菜單欄，也沒辦法彈出子菜單，因此最後考慮仍是用css來實現。

咱們都知道，使用animation是能夠作動畫的，可是這裏一個淡入淡出的效果用animation就太麻煩了，而transition也是能夠監測到元素變化，而且在提供一個速度的變化，那麼咱們能夠用這個效果來實現，這裏要注意一點，也就是transition是沒法監測到diplay：none的元素的，因此咱們能夠考慮用另一個屬性，也就是visibility這個屬性，經過在hidden和visible之間來回變化做出效果，可是這個就比較直觀，這時咱們能夠配合opacity這個屬性，從0到1來回變化，最後配合transition的時間調整整個變化的效果，就能很好的時候這個淡入淡出的效果了

總結

今天文章提到的一些內容很雜，也是不少朋友都知道的，在網上也能找到不少資料，不過實踐出真知嘛，就是一個記錄本身一些坑，若是能幫助到你們就很高興。另外不少知識已經忘記原文網址了，就沒有貼出來，等我再去找找，有的會放上來，實在沒找到的，就再次拜謝！