常用第三方包汇总（持续更新）

最新推荐文章于 2024-03-27 23:34:42 发布

原创

最新推荐文章于 2024-03-27 23:34:42 发布 · 2.4k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #前端

1.3.3 webpack-dev-server自动刷新

1.8 postcss postcss-pxtorem

1.9 移动端REM适配包

1.9.1 amfe-flexible 动态设置 REM 基准值

1.10 dayjs处理相对时间

1.11 lodash JavaScript 实用工具库(防抖优化组件)

1.12 json-bigint处理大数字(超过js精度的数字)问题

1.13 cropperjs 图片裁切

1.14 element-ui 前端开发框架(pc端常用)

1.15 xlsx excel导入

1.16 excel导出 xlsx file-saver 和 script-loader

1.17 cos-js-sdk-v5上传文件(图片上传)

1.27 vue-photo-preview

2.6.1 @hapi/joi表单中携带的每个数据项，定义验证规则

2.6.2 @escook/express-joi实现自动对表单数据进行验证的功能

2.7 multer解析表单数据

1.1 moment日期处理

(1) 安装 npm install moment

(2) 使用文档文档 | Moment.js 中文网

1.2 then-fs读取文件内容

(1) 安装 npm install then-fs

(2) 基本使用

 import thenFs from 'then-fs'
 thenFs.readFile('./files/1.txt', 'utf8').then((r1) => {console.log(r1)})

1.3 webpack打包代码

(1) 安装 yarn add webpack webpack-cli -D

(2) 基本功能

less/sass -> css
ES6/7/8 -> ES5
html/css/js -> 压缩合并

(3) 基本使用

package.json 配置信息:
- scripts: { "build": "webpack" }
yarn build(npm run build) 执行打包命令(重复打包相同命令)

(4) webpack-入口和出口配置

默认入口: ./src/index.js
默认出口: ./dist/main.js
webpack配置更改入口和出口webpack.config.js(默认):
- 新建src并列处, webpack.config.js
- 填入配置项
- const path = require("path")
  
  module.exports = { entry: "./src/main.js", // 入口 output: { path: path.join(__dirname, "dist"), // 出口路径 filename: "bundle.js" // 出口文件名 } }
  
  官网地址: 概念 | webpack 中文文档

1.3.1 加载器

(1) style-loader 和 css-loader

基本使用: 可让webpack处理其他类型的文件, 打包到js中
安装 yarn add style-loader css-loader -D
webpack.config.js配置

 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
     // ...其他代码
     module: { 
         rules: [ // loader的规则
           {
             test: /\.css$/, // 匹配所有的css文件
             // use数组里从右向左运行
             // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
             // 再用 style-loader 将样式, 把css插入到dom中
             use: [ "style-loader", "css-loader"]
           }
         ]
     }
 }

(2) less 和 less-loader 处理less文件

安装 yarn add less less-loader -D
webpack.config.js 配置:

 module: {
   rules: [ // loader的规则
     // ...省略其他
     {
         test: /\.less$/,
         // 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
         use: [ "style-loader", "css-loader", 'less-loader']
     }
   ]
 }

(3) url-loader 和 file-loader处理图片文件(webpack5版本不需要安装第三方包)

安装 yarn add url-loader file-loader -D
webpack.config.js 配置:

 {
   test: /\.(png|jpg|gif|jpeg)$/i,
   use: [
     {
       loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
       // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
       options: {
         limit: 8 * 1024,
       },
     },
   ],
 }

(4) babel-loader @babel/core @babel/preset-env让webpack对高版本的js代码, 降级处理后打包

安装 yarn add -D babel-loader @babel/core @babel/preset-env
配置规则

 module: {
   rules: [
     {
         test: /\.js$/,
         exclude: /(node_modules|bower_components)/,
         use: {
             loader: 'babel-loader',
             options: {
                 presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
             }
         }
     }
   ]
 }

1.3.2 插件

(1) html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js

安装 yarn add html-webpack-plugin -D
webpack.config.js配置:

 // 引入自动生成 html 的插件
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
     // ...省略其他代码
     plugins: [
         new HtmlWebpackPlugin({
             template: './public/index.html' // 以此为基准生成打包后html文件
         })
     ]
 }

1.3.3 webpack-dev-server自动刷新

(1) 基本使用: 启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问

(2) 安装 yarn add webpack-dev-server -D

(3) 配置(package.json)

 scripts: {
         "build": "webpack",
         "serve": "webpack serve"
     }

配置(webpack.config.js)

 module.exports = {
     // ...其他配置
     devServer: {
       open: true,
       port: 3000 // 端口号
     }
 }

1.4 axios发送ajax请求的库

(1) 安装 npm install axios

(2) 基本使用

axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
   	xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

1.5 bootstrap前端开发框架

(1) 安装 yarn add bootstrap

(2) main.js引入

import "bootstrap/dist/css/bootstrap.css"

(3) 具体使用: 详见文档

1.6 vue-routerr路由系统

(1) 安装 yarn add vue-router

(2) 基本使用(main.js或单独router文件)

导入路由 import VueRouter from 'vue-router'
使用路由插件 Vue.use(VueRouter)
创建路由规则数组

const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part,
    redirect: "/find" // 重定向
  }
]

创建路由对象 - 传入规则 const router = new VueRouter({ routes, mode: "history" }) // mode为路由模式,也可以是hash
关联到vue实例 new Vue({ router })
components换成router-view(路由模块显示标签) <router-view></router-view>

1.7 vant组件库,移动端开发框架

(1) 安装 npm i vant -D

(2) 导入使用(全局导入)

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

(3) 具体使用: 详见文档

1.8 postcss postcss-pxtorem

(1) 介绍

postcss(配合webpack翻译css代码) postcss-pxtorem(配合webpack, 自动把px转成rem)

(2) 安装 yarn add postcss postcss-pxtorem@5.1.1

(3) 配置

新建postcss.config.js – 设置相关配置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}