记一次 npm dependencies 优化升级

coderfee/Nov 06, 2021/#Vue#

删除 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 的 throttle 和 debounce 方法替换

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

// 新增
import { debounce } from "lodash";

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

升级 dependencies

使用 npm install 过程中会提示某个 package 存在漏洞，此类需要升级
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>