今天我想让 Eslint 使用 Standard 代码风格来检查 JavaScript 代码,又折腾了许久。
其实弄明白了就简单了,安装这些依赖的 npm 包:
npm install -g standard eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
如果不想全局安装,你也可以把 -g 改为 -D 进行本地安装。
安装完之后,在 .eslintrc 配置文件的 extend 规则里添加 standard,如:
{
"extends": ["standard"]
}
重启项目,如果 ESlint 没有报错信息,应该就可以使用 Standard 规则检查代码了。
Read More →
vue-cli 里要用 scss,遂安装两个模块:
npm install sass-loader --save-dev npm install node-sass --save-dev
以前也是这样的,没有问题,这次编译时却报错了:
Module build failed: Error: Cannot find module 'node-sass'
我就奇了怪了。node-sass 正常安装进去 node_modules 文件夹了,怎么还找不到。用 npm 时不时就遇坑,特别是以前没问题的地方,忽然蹦出来给你搞个幺蛾子,还找不到原因,烦死了。
之后我在网上搜索,检查了以下因素:
node-sass 安装是否完整?我是开着全局 ssr 的,不会是下载不完整。但为了死马当活马医,我还是移除它然后重新安装,不行。换用 cnpm 安装也还是不行。
检查版本,安装的版本确实是最新版本啊。
还有的说要 build 使用,执行 npm rebuild node-sass --force,报错。(其实不需要)
最后怎么解决的呢?强制删除 node_modules 文件夹,然后 npm i 重新安装所有包,这下好了。心累。
CSS 文件里出现冗余的规则是很常见的,比如我们引用了某个 UI 框架的 CSS 文件,里面包含了所有组件的样式规则。但是我们在一个页面里不可能用到所有的组件,那么用不到的规则就是冗余的,我们可以使用 NodeJS 的 UnCSS 包来去掉冗余的规则。
首先安装 UnCSS:
npm install -g uncss
之后指定要分析的页面的 url,并设置输出的文件名:
uncss http://127.0.0.1:5500/index.html > styles.css
如上示例,UnCSS 会分析指定 url 的页面,提取所有被使用的 CSS 规则,保存到一个新的 CSS 文件里。非常快速便捷。
上面的示例是分析单个页面,我们也可以通过配置文件来让 UnCSS 批量处理多个页面。不过我还不清楚有没有分析整站的办法。
刚才我在折腾用 npm 安装 Webpack,但是速度非常捉急,开 vpn 也不行。经过搜索我找到了淘宝 NPM 镜像。
在淘宝的使用说明里,建立了一个 cnpm 的命令,注册到淘宝的 npm 源。但是我执行之后,系统识别不出 cnpm 命令,所以我换了个方法。
在 npm 的安装目录里找到文件名为 npmrc 的文件(可以使用 everything 直接搜索),编辑它,在最后一行添加如下命令并保存:
registry=https://registry.npm.taobao.org
之后照常使用 npm 命令就行了,安装速度果然飞快,再也不用烦恼啦~