Saber 酱的抱枕

Fly me to the moon

07/21
2019
软件

ESlint 使用 Standard 代码风格

今天我想让 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 →

ESlint 使用 Standard 代码风格

04/21
2019
学习 软件

NPM Module build failed: Error

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 重新安装所有包,这下好了。心累。

NPM Module build failed: Error

02/14
2019
软件

使用 UnCSS 移除冗余的 CSS 规则

CSS 文件里出现冗余的规则是很常见的,比如我们引用了某个 UI 框架的 CSS 文件,里面包含了所有组件的样式规则。但是我们在一个页面里不可能用到所有的组件,那么用不到的规则就是冗余的,我们可以使用 NodeJS 的 UnCSS 包来去掉冗余的规则。

UnCSS GitHub 页面

首先安装 UnCSS:

npm install -g uncss

之后指定要分析的页面的 url,并设置输出的文件名:

uncss http://127.0.0.1:5500/index.html > styles.css

如上示例,UnCSS 会分析指定 url 的页面,提取所有被使用的 CSS 规则,保存到一个新的 CSS 文件里。非常快速便捷。

上面的示例是分析单个页面,我们也可以通过配置文件来让 UnCSS 批量处理多个页面。不过我还不清楚有没有分析整站的办法。

使用 UnCSS 移除冗余的 CSS 规则

03/27
2018
软件

使用淘宝 NPM 镜像安装 Webpack

刚才我在折腾用 npm 安装 Webpack,但是速度非常捉急,开 vpn 也不行。经过搜索我找到了淘宝 NPM 镜像

在淘宝的使用说明里,建立了一个 cnpm 的命令,注册到淘宝的 npm 源。但是我执行之后,系统识别不出 cnpm 命令,所以我换了个方法。

在 npm 的安装目录里找到文件名为 npmrc 的文件(可以使用 everything 直接搜索),编辑它,在最后一行添加如下命令并保存:

registry=https://registry.npm.taobao.org

之后照常使用 npm 命令就行了,安装速度果然飞快,再也不用烦恼啦~

使用淘宝 NPM 镜像安装 Webpack