前端实用程序包utils - 开发工作流（一）

注意： 因为笔者目前前端接触的比较多，所以这个库的定义就是给前端环境用的，不是很推荐用在nodejs开发上使用，因为其后面涉及到了一些DOM之类的操作是对nodjs没什么卵用的，所以采用ES Module的语法来书写，若想在node环境使用，请配合babel,webpack等工具使用，请确保电脑上安装了nodejs环境。

举个例子，比如我要创建一个项目叫utils,可以怎么做？（考虑到0基础的同学，我会讲的比较细，老司机请直接跳过这章节）

如果你只是想玩玩，不想一步一步去配置，那么你只需要执行mkdir utils && npm init -y, 这句话的意思是说创建了一个文件夹叫utils,然后初始化一个npm管理的项目，-y表示yes,也就是都选是。这个时候它就会在项目文件夹下创建一个粗糙的package.json文件。

新手我还是建议你一步一个脚印走一遍，执行mkdir utils && npm init,它会一步一步让你确认该项目的相关描述啊，协议啊，联系方式啊，项目地址啥的，这里笔者贴出一份该项目的npm配置。

配置说明：

name: 项目名
version: 项目版本号
description: 项目描述
main: 项目主入口文件
scripts: 项目执行npm命令
repository: 项目仓库
keywords: 项目关键词
author: 项目作者
license: 授权协议
bugs: bug反馈
homepages: 项目主页
devDependencies: 开发环境依赖，不会随项目打包, 使用npm i @ataola/utils -D安装
dependencies: 开发环境依赖，会随着项目打包，使用npm i @ataola/utils -S 安装
husky: 在本地提交之前，做一次lint反馈，这个需要安装相关npm包再配置
lint-staged: 只会校验提交修改的部分，这个也是需要安装相关npm包再配置，建议你和楼上那位一起用
{
“name”: “@ataola/utils”,
“version”: “0.1.5”,
“description”: “ataola’s utils: maybe publish a feature one week, to record something i think or meet.”,
“main”: “index.js”,
“scripts”: {
“push”: “./push”,
“pull”: “./pull”,
“codecov”: “codecov”,
“eslint”: “eslint . --ext .js --fix”,
“husky:prepare”: “husky install”,
“husky:add”: “husky add .husky/pre-commit ‘npm run lint’”,
“git:add”: “git add -A”,
“lint”: “lint-staged”,
“karma:init”: “karma init ./karma.conf.js”,
“karma:test”: “karma start ./karma.conf.js”,
“format”: “prettier --write '**/.{js,jsx,ts,tsx,json,md}’"
},
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/ataola/utils.git”
},
“keywords”: [
“javascript”,
“utils”
],
“author”: “ataola (zjt613@gmail.com)”,
“license”: “MIT”,
“bugs”: {
“url”: “https://github.com/ataola/utils/issues”
},
“homepage”: “https://github.com/ataola/utils#readme”,
“devDependencies”: {
“@babel/core”: “^7.13.15”,
“@babel/eslint-parser”: “^7.13.14”,
“@babel/plugin-proposal-class-properties”: “^7.13.0”,
“@babel/plugin-transform-arrow-functions”: “^7.13.0”,
“@babel/plugin-transform-async-to-generator”: “^7.13.0”,
“@babel/plugin-transform-runtime”: “^7.13.15”,
“@babel/polyfill”: “^7.12.1”,
“@babel/preset-env”: “^7.13.15”,
“@babel/runtime”: “^7.13.10”,
“babel-eslint”: “^10.1.0”,
“babel-loader”: “^8.2.2”,
“babel-plugin-istanbul”: “^6.0.0”,
“chai”: “^4.3.4”,
“codecov”: “^3.8.1”,
“core-js”: “^3.11.0”,
“eslint”: “^7.24.0”,
“eslint-config-prettier”: “^8.1.0”,
“eslint-plugin-prettier”: “^3.3.1”,
“husky”: “^6.0.0”,
“karma”: “^6.3.2”,
“karma-chai”: “^0.1.0”,
“karma-chrome-launcher”: “^3.1.0”,
“karma-coverage”: “^2.0.3”,
“karma-mocha”: “^2.0.1”,
“karma-mocha-reporter”: “^2.2.5”,
“karma-webpack”: “^5.0.0”,
“lint-staged”: “^10.5.4”,
“mocha”: “^8.3.2”,
“prettier”: “^2.2.1”,
“webpack”: “^5.31.2”
},
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
".{js,ts,jsx,tsx}”: [
“eslint . --fix”,
“prettier --config .prettierrc --write .”
]
}
}

查询npm的相关命令是npm --help, 比如我不知道npm init后面可以跟什么，那么执行npm init --help就可以罗列出相关信息。

➜ ~ npm init --help

npm init [–force|-f|–yes|-y|–scope]
npm init <@scope> (same as npx <@scope>/create)
npm init [<@scope>/] (same as npx [<@scope>/]create-<name>)

aliases: create, innit
➜ ~
如果你发现npm install很慢，多半是长城的问题，建议你改成国内的淘宝源npm install --registry=https://registry.npm.taobao.org, 如果发现也还是不好使，终极解决方案: 科X学X上X网，逃～。

代码规范
努力做好六件事：

不同编辑器下的代码规范
eslint作语法规范
prettier作格式规范
做好代码兼容性处理
手动挡控制单文件格式化
提交代码前确认所修改文件或者整个项目代码规范
EditorConfig
这个对应我们上面努力做好的第一件事 - 不同编辑器下的代码规范。在现实多人开发中，由于开发者的行为习惯不同可以会导致代码的风格有所不同，有些人喜欢用vscode，有些人喜欢用webstorm，也许他们用的编辑器是一样的，但是由于开发者在全局配置了一些设置，会导致整个项目代码不符合预期，所以，我们需要一个在编辑器层面去协调各个编辑器环境下的代码风格，EditorConfig是一个不错的选择，这个是本项目用到的关于EditorConfig的一些配置。

配置说明：

root=true: 表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
When opening a file, EditorConfig plugins look for a file named .editorconfig in the directory of the opened file and in every parent directory. A search for .editorconfig files will stop if the root filepath is reached or an EditorConfig file with root=true is found.

EditorConfig files are read top to bottom and the most recent rules found take precedence. Properties from matching EditorConfig sections are applied in the order they were read, so properties in closer files take precedence.

原文地址：https://github.com/editorconfig/editorconfig/issues/376

end_of_line = lf 注意这个不是if,而是lf, 表示换行符，它有lf、crlf、cr等等，跟系统关系比较大，反正大家都统一一下用lf,可以看下这个有名的故事-GitHub 第一坑：换行符自动转换
insert_final_newline = true: 表示在末尾插入新行
[*.{js,py}]: 表示js和python文件
charset = utf-8: 表示字符集为utf-8
indent_style = space: 表示代码锁进格式用空格
indent_size = 2: 表示一个缩进大小两个空格
quote_type = single: 字符串设置为单引号
trim_trailing_whitespace = true: 表示是否在行尾修剪空白

This file is for unifying the coding style for different editors and IDEs

editorconfig.org

top-most EditorConfig file

root = true

Unix-style newlines with a newline ending every file

*
end_of_line = lf
insert_final_newline = true

Denotes whether to trim whitespace at the end of lines

trim_trailing_whitespace = true

Matches multiple files with brace expansion notation

[*.{js}]
charset = utf-8
quote_type = single
indent_style = space
indent_size = 2

[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

额，我觉得学这部分是有捷径的，就是去嫖名项目它们的配置，然后把它们搞懂再应用到自己或者团队的项目中。比如JQuery, Bootstrap的，跟对项目，做对事可以少走很多弯路的。

ESLint
这个对应第二件事 -eslint作语法规范。eslint用来做一些js语法规范，避免一些语法上的错误，当然也可以做格式上的规范。这个是本项目用到的关于eslint的一些配置。

配置说明：

extends: 继承，表示它继承了某些配置， 比如eslint:recommended表示继承了其推荐的配置，可以继承多个的，用数组表示

plugins: 表示安装的插件， 写配置的时候可以省略前面的前缀eslint-plugin-

parserOptions: 表示解析选项

ecmaVersion: 表示es语法的版本， 默认为 3， 5。 2015表示es6, 后面可自推
sourceType: 默认是scirpt,如果是ES模块用module
ecmaFeatures: 表示额外的语言特性
parser: 解析器，比如babel-eslint, 表示一个对Babel解析器的包装，使其能够与 ESLint 兼容

rules: 表示 启用的规则及其各自的错误级别， 0， 1，2分别对应off, warn, error

no-console: 表示禁止调用console对象的方法
func-names: 禁止命名的 function 表达式
no-unused-vars: 表示禁止未使用的变量
object-shorthand: 要求变量自变量简写
prettier/prettier: 表示eslint下prettier的规则兼容
arrow-body-style: 要求箭头函数使用大括号
prefer-arrow-callback: 要求使用箭头函数作为回调
camelcase: 使用驼峰拼写法
space-before-function-paren: 禁止函数圆括号之前有空格
env: 指定脚本的运行环境，比如在其里面写"es6": true, 表示自动启动es6语法， “browser”: true表示支持浏览器环境

{
“extends”: [“prettier”, “plugin:prettier/recommended”],
“plugins”: [“prettier”],
“parserOptions”: {
“ecmaVersion”: 2015,
“sourceType”: “module”,
“ecmaFeatures”: {
“jsx”: true,
“globalReturn”: true,
“impliedStrict”: true
}
},
“parser”: “babel-eslint”,
“rules”: {
“no-console”: “off”,
“func-names”: “off”,
“no-unused-vars”: “warn”,
“object-shorthand”: “off”,
“prettier/prettier”: [
“error”,
{
“endOfLine”: “auto”,
“singleQuote”: true,
“trailingComma”: “es5”
}
],
“arrow-body-style”: “off”,
“prefer-arrow-callback”: “off”,
“camelcase”: “off”,
“no-new”: “off”,
“space-before-function-paren”: “off”
},
“env”: {
“es6”: true,
“browser”: true
}
}

Prettier
这个对应第三件事 - prettier作代码的格式规范， 这个是本项目关于prettier的配置

配置说明：

semi: 句尾添加分号
tabWidth: 缩进字节数
singleQuote: 使用单引号代替双引号
endOfLine: 结尾是 \n \r \n\r auto
trailingComma : 在对象或数组最后一个元素后面是否加逗号
bracketSpacing:在对象，数组括号与文字之间加空格 “{ foo: bar }”
alwaysParens:(x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
eslintIntegration: 不让prettier使用eslint的代码格式进行校验
jsxSingleQuote: 在jsx中使用单引号代替双引号
{
“semi”: true,
“tabWidth”: 2,
“singleQuote”: true,
“endOfLine”: “lf”,
“trailingComma”: “es5”,
“bracketSpacing”: true,
“alwaysParens”: “always”,
“eslintIntegration”: true,
“jsxSingleQuote”: true
}
看到这里，我们先停一停思考下，这么多配置，它们会不会产生冲突呢？那我要怎么去避免冲突，或者解决冲突呢？其实楼上已经提到了用eslintIntegration不让prettier使用eslint的代码风格校验。然后在之前的eslint学习中，也可以通过在rule下新增规则作为补充。

babel
这个对应第四件事 -做好代码兼容性处理。babel是一个Javascript编译器，可以将高版本的es语法，转换成低版本的，以便能够运行在低版本浏览器或者其他环境，楼下是这个项目的babel的配置文件

配置说明：

presets: 预设，进行相关语法转义
plugins： 插件，补丁转义器，弥补楼上先天不足
env： 环境变量
{
“presets”: [
[
“@babel/preset-env”,
{
“targets”: {
“browsers”: [">0.25%", “not ie 11”, “not op_mini all”]
},
“exclude”: [
“@babel/plugin-transform-async-to-generator”,
“@babel/plugin-transform-arrow-functions”
],
“corejs”: { “version”: “3.8”, “proposals”: true },
“useBuiltIns”: “usage”
}
]
],
“plugins”: [
“@babel/transform-runtime”,
“@babel/plugin-proposal-class-properties”
],
“env”: {
“test”: {
“plugins”: [“istanbul”]
}
}
}

USB Microphone https://www.soft-voice.com/
Wooden Speakers https://www.zeshuiplatform.com/
亚马逊测评 www.yisuping.cn
深圳网站建设www.sz886.com