记一次 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 sassnpm 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.jsmodule.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>