CSS3前缀自动补齐

• 先使用 postcss
  • 下载包npm i postcss-loader postcss -D
  • 配合autoprefixer或者postcss-preset-env
    • npm i autoprefixer -D
    • npm i postcss-preset-env -D

      // package.json
      // 需要在这里面加需要兼容的浏览器。或者在根目录下创建.browserslistrc文件
      "browserslist": [
      "last 2 versions",
      "> 1%",
      "iOS >= 7",
      "Android > 4.1",
      "Firefox > 20"
      ]

      // .broserslistrc
      last 2 version
      > 1%
      iOS >= 7
      Android > 4.1
      Firefox > 20

      ```javascript // webpack.config.js ‘use strict’; const path = require(‘path’); const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); const CssMinimizerPlugin = require(“css-minimizer-webpack-plugin”);

module.exports = { module: { rules: [ { test: /.css$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader’, { loader: ‘postcss-loader’, options: { // plugins其实可以写成[‘postcss-preset-env’]就好的 postcssOptions: { plugins: [[‘postcss-preset-env’]] }, } } ] }, ] }, plugins: [ new CssMinimizerPlugin(), ], }

- 根据`[Can I Use](https://caniuse.com)`规则，自动补齐的
<a name="F9D4K"></a>
# 移动端CSS的px自动转rem
- W3C对 rem 的定义：font-size of the root element
- 使用：`px2rem-loader`
   - 下载包：`npm i px2rem-loader -D`
   - 页面渲染时计算根元素的font-size值
      - 可以使用淘宝的`lib-flexible`库
      - 下载包：`npm i lib-flexible -S`
<a name="wcF4K"></a>
# 资源内联
- 代码层面
   - 页面架构的初始化脚本
   - 上报相关打点
   - css内敛避免页面闪动
- 请求层面：减少HTTP网络请求
   - 小图片或字体内联（url-loader）
<a name="DRdyT"></a>
## HTML和JS内联
- raw-loader和html-loader都搞不成功，以后再来
<a name="ZUcW7"></a>
## CSS内联
- 方案一：借助`style-loader`
```javascript
// webpack.config.js
module.exports = {
  module: {
      rules: [
      {
          test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
                insertAt: 'top', // 样式插入到haed
              singleton: true, // 所以style合并成一个
            }
          },
          'css-loader']
      }
    ]
  }
}

• 方案二：html-inline-css-webpack-plugin

eslint

• Airbnb：eslint-config-airbnb、eslint-config-airbnb-base

• 腾讯内部的eslint

  • alloyteam团队：eslint-config-alloy
  • ivweb团队：eslint-config-ivweb

    制定团队的eslint规范

• 不重复造轮子，基于eslint-recommentd配置并改进

• 能够帮助发现代码错误的规则，全部开启
• 帮助保持团队的代码风格哦那个一，而不是限制开发体验

eslint的落地

方案一：和CI/CD系统集成

• 本地开发阶段增加precommit钩子

  • 安装husky：npm i husky -D

    // package.json
    {
    "scripst": {
     "precommit": "lint-staged"
    },
    "lint-staged": {
     "linters": {
       "*.{js,scss}": ["eslint --fix", "git add"]
    }
    }
    }

    方案二：和webpack集成

• 使用eslint-loader，构建时检查JS规范

  • 下载包
    • npm i eslint-loader babel-eslint- -D
    • npm i eslint eslint-plugin-import -D
    • 如果使用react，还要安装npm i eslint-plugin-react eslint-plugin-jsx-a11y -D
    • 如果使用react-hook，再装npm i eslint-plugin-react-hook -D
    • 若使用了airebnb的规则，则下载包：npm i eslint-config-airbnb -D
  • eslint的配置文档

    eslint的配置文件以及优先级

• 配置文件

  • JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
  • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
  • JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
  • (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
  • package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。

• 优先级

  • 修改优先级的方法，看官网
  • .eslintrc.js
  • .eslintrc.yaml
  • .eslintrc.yml
  • .eslintrc.json
  • .eslintrc
  • package.json

    在package.json中配置eslint

• 下面这个可以打包，有react的js

• rules中更多的配置规则，见官网

  {
  "eslintConfig": {
    "parser": "babel-eslint",
    // 要js能import，要加上下面这个
    "parserOptions": {
      "sourceType": "module"
    },
    "env": {
      "es6": true,
      "browser": true,
      "node": true
    },
    "rules": {
      "indent": [ "error", 2, { "SwitchCase" : 1 } ],
      "default-case": ["error"],
      "eqeqeq": ["warn"],
      "no-alert": ["error"],
      "no-console": ["warn"]
    }
  }
  }