Parcel

1.零配置前端应用打包器

// yarn add parcel-bundler --dev
// yarn parcel src/index.html  index.html入口文件

2.模块热替换

if (module.hot) {
  module.hot.accept(() => {
    console.log('hmr')
  })
} 

3.自动安装依赖

导入依赖保存自动安装

4.生产模式打包

yarn parcel build src/index.html

规范化标准

1.规范化介绍

• 软件开发需要多人协同
• 不同开发者具有不同的编码习惯和喜好
• 不同的喜好增加项目维护成本
• 每个项目或团队明确统一的标准

2.哪里需要规范化标准

• 代码、文档、甚至提交日志
• 开发过程中人为编写的成果物

3.ESLint介绍

• 最为主流的JavaScript Lint工具检测JS代码质量
• ESLint很容易统一开发者的编码风格
• ESLint可以帮助开发者提升编码能力

4.安装ESLint

yarn add eslint --save-dev

eslint --version / npx eslint --version

npx eslint --init

npx eslint 文件名

module.exports = {
  env: { // 运行环境
    browser: true,
    es2021: true,
    node: true
  },
  extends: [ // 继承共享配置 
    'standard'
  ],
  parserOptions: { // 是否使用ES版本语法
    ecmaVersion: 12
  },
  rules: { // 配置校验规则开启或关闭
    'no-alert': "error"   // off warn error
  },
  globals: { // 代码中可以使用的全局成员
    "jQuery": "readonly"  
  }
}

5.ESLint配置注释

忽略eslint-disable-line一行当中所有问题

const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string 

console.log(str1)

6.ESLint结合自动化工具

在babel前执行

gulp-eslint

webpack ----> npm i eslint-loader --dev

{
  test: /.js$/,
  exclude: /node-modules/,
  use: 'eslint-loader',
  enforce: 'pre'
}

例如reack项目会报错 React/App

npm i eslint-plugin-react

rules: {
  'react/jsx-users-react': 2,
  'react/jsx-users-vars': 2
}

2.集成

extends: [ // 继承共享配置 
  'standard'，
  'plugin:react/recommended'
],

7.现代化项目集成eslint

vue

8.ESLint检查TypeScript

parser: '@typescript-eslint/parser',  // 指定语法解析器

9.styleLint

npm i stylelint -D
// npx stylelint ./index.css

.stylelintrc.js

moudle.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ]
}

npm i stylelint-config-sass-guidelines -D

10.prettier

代码自动格式化

npm i prettier -D

npx prettier style.css --write   // 覆盖原文件
npx prettier . --write

11.Git Hooks工作机制

代码提交前强制lint

• git钩子，每个钩子对应一个任务
• 通过shell脚本可以编写钩子任务触发时要具体执行的操作

husky可以实现GitHooks的使用需求

git commit之前强制lint

npm i husky -D

package.json

"husky": {
  "hooks": {
    "pre-commit": "npm run test"
  }
}

"scripts": {
   "test": "eslint ./index.js"
}

husky 不能同时代码格式化

npm i lint-staged -d

"lint-staged": {
  "*.js": [
    "eslint",
      "git add"
  ]
}

"scripts": {
   "precommit": "lint-staged"
}

"husky": {
  "hooks": {
    "pre-commit": "npm run precommit"
  }
}