2.tools.md

Posted on | In

tools链

  1. npm

    • npm是什么
    • npm工程初始化
    • npm遇到什么问题
    • 语义化的版本控制

  2. prettier

    • 格式美化和统一

    • 对于团队成员都应该使用相同的格式

    • 配置保存后强制修复格式

      配置prettier步骤

    1. npm install prettier -D

    2. 在vscode安装插件

    3. 配置vscode

      • setting中配置以下两项：
        format on save： 打开
        require config - require config 对勾

      • 创建一个新的config文件，

        文件名： .prettierrc

        内容： “singleQuete”: true // 开启字符串单引号检测

        1
        2
        3
        {
            "singleQuete": true
        }

  3. ESlint set up

    1
    npm install -D eslint eslint-config-prettier
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
        "extends": ["eslint:recommended", "prettier", "prettier/react"],
        "plugins": [],
        "parserOptions": {
            "ecmaVersion": 2018,
            "sourceType": "module",
            "ecmaFeature": {
                "jsx": true
            }
        },
        "env": {
            "es6": true,
            "browser": true,
            "node": true
        }
    }

  4. git

    1
    2
    3
    4
    5
    6
    7
    node_modules/
    .DS_Store
    .cache/
    dist/
    coverage/
    .vscode/
    .env

  5. parcel

    1
    npm install -D parcel-bundler

    增加script命令

    1
    "dev": "parcel src/index.html",

  6. 安装react and react-dom
    引入的时候需要我们使用， 按需引入， 因为构建器会进行摇树算法， 如果整个引入，那么摇树算法的作用就很小

  7. 模块化： 一个组件一个文件， 不能多组件一个文件

模块化使用es的import/export, 在react中，我们只需要返回特定的render函数， 这个render函数就是组件。