前端工程化

DevinDong
274 阅读3分钟

yarn workspace

git

插件作用
husky可以用于实现各种 Git Hook。这里主要用到 pre-commit这个 hook，在执行 commit 之前，运行一些自定义操作
lint-staged用于对 Git 暂存区中的文件执行代码检测

通过配置package.json或者lint-staged.config.js

{
    "husky":{
        "hooks":{
            "pre-commit":"lint-staged
        }
    },
    "lint-staged":{
        "*.{js,jsx}":[
            "eslint --fix",
            "git add"
        ],
        "*.{less,sass,css}":[
            "stylelint --config ./.stylelintrc.js --fix",
            "git add"
        ],
        "*.{ts,tsx}":[
            "eslint --fix",
            "prettier --parser typescript --write",
            "git add"
        ]
    }
}

eslint prettier

为什么使用eslint

  • 统一代码规范 :

    在开发中，可能会遇到很多不同的同事同时开发一个项目 ，或者在工作的调整中，会有接手一个项目， 这时候，就会发现完全和自己的开发风格不同，该起来非常痛苦。ESLint 统一代码规范，是我们在不 同的项目更好的融入项目开发。

  • 检测代码 :

    在开发中，会遇到一些非常低级的错误，如 alert 发到生产， 少一个 { 等，用了 ESLint ，我们可以在提交 代码前，进行代码检测，避免这些不必要的错误发到生产。

ESLint 项目中规范的方案

  • ESLint + Airbnb
  • ESLint + Standard
  • ESLint + Prettier | 插件 | 作用 |方案| |---|---|---| |eslint |ESLint 是一个可扩展，每条规则独立，被设计为完全可配置的lint工具。可以用来检测代码，避免低级错误可以用来规范代码的开发风格，统一代码习惯。|1，2，3| |eslint-config-airbnb|配置一些 eslint rules 的规范|1| |eslint-config-standard|standard 的规则配置包扩展|2| |prettier|代码格式化工具|3| |eslint-config-standard-react|react的扩展|2| |eslint-plugin-standard|standard规则|2| |eslint-plugin-import|在使用 import 的时候，一些 rules 规范。此插件旨在支持ES2015+（ES6+）导入/导出语法的linting，并防止文件路径和导入名称拼写错误的问题。ES2015+静态模块语法打算提供的所有优点都在编辑器中标记出来。|1，2，3| |eslint-plugin-jsx-a11y|一些 jsx 的 rules 规范|1，2，3| |eslint-plugin-react|一些 react 的 eslint 的 rules 规范|1，2，3| |eslint-plugin-react-hooks|···|1，2，3| |eslint-config-prettier|···|3| |eslint-plugin-prettier|···|3| |eslint-plugin-html|···|···| |eslint-plugin-promise|···|···| |babel-eslint|···|···|

eslint prettier配置

eslint prettier兼容

jenkins

webpack

常用插件

插件作用
@babel/preset-env一个智能预设，可让开发者使用最新的js语法，而无需微观管理目标环境需要哪些语法转换（and optionally,broser polyfills）
@babel/plugin-proposal-decorators允许使用修饰器的jsx语法
postcss-url处理样式url()图片，复制到输出目录或者转成Base64等操作
postcss-plugin-pxtoviewport把px换成为vw单位
autoprefixer自动给样式属性添加-webkit-等前缀用于兼容浏览器
webpack-plugin-import组件的按需引入
MiniCssExtractPlugin提取 JS 中引入的 CSS 打包到单独文件中，然后通过标签 <link>添加到头部，并支持 CSS 和 SourceMap 的按需加载,此插件适用于没有style-loader 的生产模式中，以及需要 HMR 的开发模式
style-loader通过 <style>标签直接将 CSS 插入到 DOM 中
babel-plugin-component饿了么封装的组件按需引入插件
postcss-loader,postcss-preset-envcss兼容性处理
optimize-css-assets-webpack-plugin压缩css代码

webpack优化

项目

微前端# Garfish 微前端框架

avatar
文章
阅读
粉丝