记一次 npm dependencies 优化升级

Avatarcoderfee/Nov 06, 2021/#Vue#

npm dependencies upgrade guide

删除 dependencies

冗余的 package 是项目中没有引用的,或者是 npm install 命令安装错误的,此类 package 可以直接删除

dependencies

  • html2canvas
  • js-base64
  • print-js
  • ts-loader

devDependencies

  • axios-mock-adapter
  • install
  • npm
  • uglifyjs-webpack-plugin

删除可替换的 dependencies

项目中同时安装了 throttle-debounce 和 lodash,而 throttle-debounce 模块可以用 lodash 的 throttledebounce 方法替换

// 删除
import { debounce } from "throttle-debounce";
// 新增
import { debounce } from "lodash";

目前项目中只存在一处 throttle-debounce 的引用

升级 dependencies

  1. 使用 npm install 过程中会提示某个 package 存在漏洞,此类需要升级
  2. UI 框架升级可以带来新的组件、性能上的提升、Bug 修复等

注:跨版本需要特别注意,例如从 0.21.2 升级至 1.0.0,可能会导致部分 API 不兼容

优化 dependencies

该项目在部分 Windows 电脑上第一次运行 npm install 时会失败,主要是因为引入了 sass 模块,处理 sass 文件时会用到 node-sass,而 node-sass 模块同时需要 python 和 Visual Studio C++ 库的支持,所以导致安装失败。目前 sass 官方也已经用 dart-sass 替换 node-sass 作为默认的 sass 处理方式,因此我们可以从项目中删除 node-sass,直接安装 sass 模块:

npm rm node-sass sass
npm i -D sass

dart-sass 升级了部分语法,恰好项目中也用到了,需要改造代码,如下:

  • /deep/ 替换为 ::v-deep

升级 ESLint

ESLint 升级时需要注意以下问题:

  • 如果跨大版本升级可能会出现不兼容的情况
  • ESLint 的相关依赖版本也尽量要保持一致
  • 升级之后 rules 可能发生变化,需要手动修复
  • 升级过程中多运行下 npm run lint,监测升级情况

引入 Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。该项目是基于 Vue CLI 3 生成的,目前不支持 PostCSS 8,因此需要安装 PostCSS 7 兼容性版本,如下:

安装 PostCSS 7 兼容版本

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

PostCSS 配置文件

需要将 tailwindcss 作为 postcss 插件引入:

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

tailwind 配置文件

运行 npx tailwind init 会生成 tailwind.config.js 配置文件,需要修改部分配置如下:

module.exports = {
purge: ["./src/**/*.{js,ts,jsx,tsx,html,vue}", "./public/index.html"],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
corePlugins: {
preflight: false,
},
};

引入 tailwindcss

在 Vue 入口文件引入 tailwindcss

import "tailwindcss/tailwind.css";

实际使用

<template>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>
</template>

启用 JIT 模式

Tailwind v2.1+ 新增了 Just-In-Time 模式,可以根据项目中引用过的 utility 按需生成样式表,而非一次性生成,类似 Webpack 的 treeshaking,可以优化最终的 CSS 文件体积,配置如下:

// tailwind.config.js
module.exports = {
purge: ["./src/**/*.{js,ts,jsx,tsx,html,vue}", "./public/index.html"],
mode: "jit",
};

PostCSS 最新版本已经完全支持,更改文件之后会自动生成对应样式并刷新浏览器,但是如果使用了 PostCSS 8.x 之前的版本,则需要搭配 TAILWIND_MODE 环境变量一起使用:

// package.json
{
"scripts": {
"serve": "TAILWIND_MODE=watch vue-cli-service serve --mode dev"
}
}

Windows 可以用 cross-env 配置环境变量

// package.json
{
"scripts": {
"serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve --mode dev"
}
}

配置完成之后就可以更加灵活地使用 tailwindcss 了:

<img class="absolute w-[762px] h-[918px] top-[-325px]" src="/crazy-background-image.png" />
<button class="bg-[#1da1f1]">Share on Twitter</button>
<div class="grid-cols-[1fr,700px,2fr]"></div>
Copyright ©; 2016-2022 coderfee, All rights reserved.