前端工具资料

榕树下的蜗牛
110 阅读10分钟

nodemon

node工具

cnpm i -D nodemon  //安装开发依赖

npx nodemon --version  //查看版本

npx nodemon ./index.js //启动

"start": "nodemon ./index.js"  //添加成脚本启动 npm run start
"start": "nodemon --exec babel-node src/app.js"  //添加成脚本启动 npm run start

前端技术分类

类库

jQuery
Lodash(Underscore)

JS库

React
Vue
Angular

工具

webpack(build)
Jest(test)
ESLint(lint)
Template(ejs)

应用类

Echarts
D3
three

UI框架

//pc
layui
elementUI
iView(vue)
AntDesign(angular&react&vue)
//mobile
MintUI(vue)
CubeUI(vue)
vant(vue)

JS框架

Nunjucks 模板引擎

发送两次请求问题

同源策略共享解决方案
预检测
post请求，第一次是option发送给服务器做校验，通过发起第二次请求

REST

REST——REpresentational State Transfer 表现层状态转移

Resource-based: 资源，即数据。

Representational: 某种表现形式，比如用JSON，XML，JPEG等

State Transfer: 状态变化，通过HTTP动词实现

REST特点

客户端——>服务端

通过将用户界面，让数据与存储分开，通过简化服务器组件来实现跨多平台的应用

无状态，可缓存

C -> S包含理解请求所需要的所有信息

统一接口

RESTful API定义

REST——REpresentational State Transfer 表现层状态转移

API —— Application Programming Interface 应用编程接口

RESTful API 即为 REST风格的/REST特点的应用接口 ，所以叫表现层状态转移应用编程接口

满足客户端到服务端，无状态、可缓存，统一接口的特点叫 RESTful API

令牌机制(token)

Bearer Token规范

概念：描述在HTTP访问OAuth2保护资源时如何使用令牌的规范

特点：令牌就是身份证明，无需证明令牌的所有权

具体规定：在请求头中定义Authorization

Authorization:Bearer<token>

Json Web Token 规范

概念：令牌的具体定义方式

规定：令牌由三部分构成“头.载荷.签名”

  • 头：包含加密算法、令牌类型等信息
  • 载荷：包含用户信息、签发时间和过期时间等信息
  • 签名：根据头、载荷及密钥加密得到的哈希串Hmac Sha1 256

Swagger

编写API文档的工具框架

SwaggerEditor

https://swagger.io/tools/swagger-editor/

Mock

mock的拦截使用

#ajax请求地址 http://api.youdeurl.com/getlist/

Mock.mock('http://api.youdeurl.com/getlist/',{
    "list|1-3":[{
        "id|+1":1,
        name:"@cname",
        birthday:'@date("yyyy-MM-dd")',
        city:'@city',
    }]
})

Easy Mock

#官网
https://www.easy-mock.com/

#github地址
https://github.com/easy-mock/easy-mock

linux安装

#1.安装nodejs

#2.安装MongoDB

#3.安装redis

#4.安装解压工具
yum install zip unzip

#5.安装easy mock

1.项目下载地址： https://github.com/easy-mock/easy-mock

2.将easy-mock-dev.zip上传至服务器

3.解压
unzip easy-mock-dev.zip

4.进入其目录，安装依赖
cnpm install

5.打包
npm run build

6.启动
npm run start

7.由于有linux防火墙的存在，还不能访问，需要关闭centos7的防火墙
systemctl stop firewalld

8.打开浏览器 http://ip:7300

doclever

docker方式安装

#在/home/snail/ 下创建一个doclever目录
mkdir doclever

cd doclever

#创建docker-compose.yml文件并配置
vim docker-compose.yml

#运行
docker-compose up -d

#停止容器
docker-compose stop

#查看容器
docker ps | grep doclever


#用户名DOClever   密码123456

docker-compose.yml 配置内容

version: "2"
services:
  DOClever:
    image: lw96/doclever
    restart: always
    container_name: "DOClever"
    ports:
    - 20080:10000
    volumes:
    - /srv/doclever/file:/root/DOClever/data/file
    - /srv/doclever/img:/root/DOClever/data/img
    - /srv/doclever/tmp:/root/DOClever/data/tmp
    environment:
    - DB_HOST=mongodb://mongo:27017/DOClever
    - PORT=10000
    links:
    - mongo:mongo

  mongo:
    image: mongo:latest
    restart: always
    container_name: "mongodb"
    volumes:
    - /srv/doclever/mongodb:/data/db

json-server

提供REST API接口

安装使用

cnpm i -g json-server

//新建db.json
//运行 json-sersver db.json


get     获取数据  /posts
post	发送数据  /posts
patch   修改数据  /posts/1
delete  删除数据  /posts/1

前端工程化

前端工程化是指将前端开发的流程规范化、标准化、包括开发流程、技术选型、代码规范、构建发布等，用于提升前端工程师的开发效率和代码质量

pm2

PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。

好处

  1. 无需通过手工或是ftp的方式把本地代码拷贝到服务器上
  2. 无需手工启动或是重启远程服务器的Node服务
  3. 项目的升级及迭代非常方便
  4. 具有负载均衡功能
npm install pm2 -g #安装进程管理

pm2 start name/id  #启动进程

pm2 stop name #停止进程

pm2 delete name  #删除进程

pm2 restart name/id  #重启进程

pm2 logs www/id   #打印单个进程日志

pm2 list #进程列表

pm2 start npm --watch --name www --run dev

发布服务器实现步骤

  1. 将本地代码发布到Git远程仓库(Github、码云)

  2. 在阿里云服务器(CentOS)上生成SSH Key 并且将公钥设置到Github后台，方便拉取代码到CentOS服务器

    https://help.github.com/articles/connecting-to-github-with-ssh/
   
https://help.github.com/articles/testing-your-ssh-connection/

注意：还需要在服务器上面安装 git     

       yum install -y git

  3. 在本地及服务器上面安装 pm2

    本地/服务器安装pm2：

    npm i pm2 -g

  4. 在本地项目根目录，使用 pm2 init 生成pm2的配置文件，并且更改相应的配置

    pm2文档地址:pm2.io/doc/en/runt…

    主要更改 apps下面的 name、script 等配置项目

    ​ deploy 下面的user、host、repo、path

  5. 切换到本地项目根目录，运行 部署 指令即可

    参考：pm2.io/doc/en/runt…

    pm2 deploy production setup
pm2 deploy production

  6. 代码更新&迭代、切换到本地项目根目录，运行 执行 指令即可

    pm2 deploy production update
注意：在做这个之前，必须先把代码发布到Github

gulp

安装

#安装
cnpm install gulp -D

yarn add gulp -D

#查看版本
npx gulp --version

#创建gulpfile.js 文件做为gulp的配置文件
gulpfile.js

插件

gulp-uglify  #对js文件进行压缩混淆

gulp-rename  #重命名

gulp-autoprefixer  #样式预处理

gulp-sass  #sass预处理

gulp-load-plugins  #去掉gulp前缀

del  #清空dist文件夹

webpack

package.js说明

npm init  #初始化package.js文件


name            #包名
description     #包简介
version         #版本号
keywords        #关键词数组，npm中主要用来做分类搜索。
maintainers     #包维护者列表，每个维护者由 name 、 email 和 web 这3个属性组成。
contributors    #贡献者列表
bugs            #反馈bug的网址
licenses        #当前包所使用的许可列表，表示这个包可以在哪些许可证下使用。
repositories    #托管源代码的位置列表，表示可以通过哪些方式和地址访问包的源代码。
dependencies    #使用当前包所需要依赖的包列表，npm会通过这个属性帮助自动加载依赖的包。项目依赖
devDependencies #开发依赖
author          #包作者
bin             #二进制目录
main            #主模块，入口模块

可选字段

homepage        #当前包的网站地址
os        		#操作系统支持列表
cpu             #cpu架构的支持列表
engine          #支持的JavaScript引擎列表。
builtin         #标志当前包是否是内建在底层系统的标准组件
directories     #包目录说明
implements      #实现规范的列表，标志当前包实现了CommonJS的哪些规范
script          #脚步说明对象，它主要被包管理器用来安装、编译、测试和卸载包。

优点：

代码拆分、loader、智能解析、插件系统、快速运行

parcel

零配置打包工具

  • 极速打包

  • 将你所有的资源打包

  • 自动转换

  • 零配置代码分拆

  • 热模块替换

rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码

Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现

  • 镜头分析

  • 小巧而专注

ESLint

javascript代码检测工具，帮助我们统一团队的代码风格

可配置的信息: ​ Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。 ​ Globals - 脚本在执行期间访问的额外的全局变量。 ​ Rules - 启用的规则及其各自的错误级别。 ​ ...

使用步骤:

参考:http://eslint.cn/docs/user-guide/getting-started
	
	1、安装全局 eslint 包，或是本地安装
		npm i eslint -g
		注意：如果执行脚本写在package.json中，可以不用全局安装，本地安装即可
		但是如果要生成eslint的配置文件，必须安装全局包
	
	2、在项目根目录创建一个eslint的配置文件，并且进行配置
		使用 `eslint --init` 在项目根目录下创建一个 .eslintrc.js 的配置文件
		
		配置详见:http://eslint.cn/docs/user-guide/configuring
		
	3、在项目根目录创建.eslintignore 忽略掉不需要lint的目录
		
	4、安装项目依赖的包
		npm i eslint babel-eslint -D
		
	5、在package.json中配置scripts来验证
		"lint":"eslint src"
	
	6、在package.json中配置scripts来修复
		"fix":"eslint --fix src"
		注意:修复的只能是规则中，带有扳手标识的
		
	7、使用pre-commit第三方包，在提交git前，必须先验证通过

ESlint With Webpack【以Vue为例】

方式1：
	使用vue的脚手架，直接生成项目，即可完成eslint的配置
		vue init webpack vue_project
		
方式2：
	自己手工搭建Webpack + Vue的项目，然后自己手动的配置eslint
	
	步骤:
		1、切换到项目根目录，使用 `eslint --init` 生成eslint的配置文件
		
		2、安装依赖包，然后在.eslintrc.js配置文件中增加对vue的支持
			npm i eslint babel-eslint eslint-loader eslint-config-standard eslint-plugin-html -D
			
		3、在webpack开发阶段的配置文件中，进行配置
			参考:https://www.npmjs.com/package/eslint-loader
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                // eslint options (if necessary)
                }
            }
            
         4、在package.json中增加eslint的script 配置
         	"lint":"eslint --fix src --ext .js,.vue"
         	
         5、别忘加在项目根目录加上.eslintignore的忽略文件，并写好要忽略掉的目录

StyleLint

基本概念

官网:
	https://stylelint.io/

基本概念:
    A mighty, modern CSS linter and fixer that helps you avoid errors and enforce       	consistent conventions in your stylesheets.
    一款强大的，时髦的css语法检查和纠错工具，它可以帮助开发者在编写样式文件时避免错误，同时它还可以强迫	   开发者们形成统一的开发规范。

基本使用:
	1、安装所需要的包 stylelint stylelint-config-standard
		npm i stylelint stylelint-config-standard -D

	2、在package.json中进行配置 stylelint 项目
    	"stylelint": {
            "extends": "stylelint-config-standard", 
            "rules": {
                "规则名称1":"规则值1",
                "规则名称2":"规则值2"
            }
        }

	3、写好要测试的样式文件 xxx.css xxx.less xxx.scss
		例如：在src的css文件夹创建样式文件
		
	4、在package.json的scripts中添加 stylelint 代码检查脚本
    	"scripts": {
           "stylelint": "stylelint src/css/*.* --fix"
        }
		
    5、切换到项目根目录，运行 `npm run stylelint`

Stylelint With Webpack【以Vue为例】

1、先使用webpack + Vue 搭建好项目

2、安装所需要的包 style-loader css-loader less less-loader node-sass sass-loader stylelint stylelint-webpack-plugin stylelint-config-standard

3、在webpack的配置文件中，写好css、less、scss的loader配置
	参考:https://webpack.docschina.org/loaders/

4、在webpack的配置文件中，写好插件（stylelint-webpack-plugin）的代码
	const StyleLintPlugin = require("stylelint-webpack-plugin")
    
    plugins: [
        new StyleLintPlugin({
            context: "src",
            configFile: path.resolve(__dirname, './stylelint.config.js'),
            files: 'css/*.*',
            failOnError: false,
            quiet: true,
            fix:true, // 修复不规范的样式代码
            //syntax: 'less'
        })
    ]

5、在项目根目录下创建一个stylelint的配置文件 stylelint.config.js 并写好配置
	module.exports = {
        "extends": "stylelint-config-standard",
        "rules": {
            "color-no-invalid-hex": true,
            "规则名称1":"规则值1",
            "规则名称2":"规则值2"
        }
    }
	
6、在package.json中配置scripts脚本，启动项目
	"dev": "webpack-dev-server --progress --config webpack.config.dev.js --open --hot"

7、切换到根目录，运行启动脚本 `npm run dev` 即可
avatar
文章
阅读
粉丝