你可能须要的小知识(杂)｜牛气冲天新年征文

总结和记录最近遇到的一些坑

关于优化

前段时间公司要求作了些优化，但很久没作了，因此一边查一边改适应本身的代码，这边记录一下，防止下次忘了没地方去找：

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的时间调整整个变化的效果，就能很好的时候这个淡入淡出的效果了

总结

今天文章提到的一些内容很杂，也是不少朋友都知道的，在网上也能找到不少资料，不过实践出真知嘛，就是一个记录本身一些坑，若是能帮助到你们就很高兴。另外不少知识已经忘记原文网址了，就没有贴出来，等我再去找找，有的会放上来，实在没找到的，就再次拜谢！