react项目配置

配置项目路径

tsconfig.json文件中添加baseUrl,路径就是从src开始

{
  "compilerOptions": {
    "baseUrl": "./src",


// 'pages/Login'  =>   'src/pages/Login'

url alias 

 craco/packages/craco at master · dilanx/craco · GitHub

npm i @craco/craco@alpha

根路径下创建 craco.config.js

// @craco/craco 的配置文件
const path = require("path")
module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定: 使用 @ 表示 src 文件所在路径
      "@": path.resolve(__dirname, "src"),
    },
  },
}

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

根路径下创建 path.tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

在tsconfig.json中 

{
  "extends": "./path.tsconfig.json", // 新加这行
  "compilerOptions": {
  },
  "include": ["src"]
}

不能和上面的baseUrl同时使用 , 不然会报错... 浪费博主半个小时....

或者

npm run eject 然后在config文件夹下面的webpack.config.js中修改如下

   alias: {
        "@": path.resolve("src"),

生成环境和开发环境

    if (process.env.NODE_ENV === 'development') {
      console.log('开发环境')
    } else if (process.env.NODE_ENV === 'production') {
      console.log('生产环境')
    }

自适应

npm i postcss-px-to-viewport-8-plugin

然后在craco.config.js文件中配置如下

postcss-px-to-viewport/README_CN.md at 9d6c5cee5eea367fb4c7cf0c3bb1117979b5fbf4 · evrone/postcss-px-to-viewport · GitHub

// @craco/craco 的配置文件
const path = require("path")
module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定: 使用 @ 表示 src 文件所在路径
      "@": path.resolve(__dirname, "src"),
    },
  },
  style: {
    postcss: {
      mode: "extends",
      loaderOptions: {
        postcssOptions: {
          ident: "postcss",
          plugins: [
            [
              "postcss-px-to-viewport-8-plugin",
              {
                viewportWidth: 1920, // 设计稿的视口宽度
              },
            ],
          ],
        },
      },
    },
  },
}

vscode json配置

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "workbench.iconTheme": "vscode-icons",
  "js/ts.implicitProjectConfig.checkJs": true,
  "sync.gist": "ed30311fbdf977f6814b841b01cc60e2",
  "sync.autoDownload": false,
  "sync.autoUpload": true,
  // eslint
  "eslint.format.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.codeActionsOnSave.mode": "all",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "html",
    "vue",
    "javascript",
    "typescript",
    "typescriptreact"
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // vetur
  "vetur.format.enable": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDelete": false,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": false,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.suggest.insertMode": "replace",
    "editor.defaultFormatter": "Dart-Code.flutter"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vsicons.dontShowNewVersionMessage": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "typescript.updateImportsOnFileMove.enabled": "never",
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDragAndDrop": false,
  "workbench.editorAssociations": {
    "*.svg": "default"
  },
  "files.associations": {
    "*.md": "mdx"
  },
  "git.autofetch": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "remote.SSH.remotePlatform": {
    "local": "linux"
  },
  "workbench.colorTheme": "Dracula",
  "security.workspace.trust.untrustedFiles": "open",
  "git.ignoreLegacyWarning": true,
  "js/ts.implicitProjectConfig.experimentalDecorators": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.quickSuggestionsDelay": 0,
  "editor.fontSize": 12,
  "workbench.startupEditor": "none",
  "bracketPairColorizer.depreciation-notice": false,
  "markdown.preview.fontSize": 12,
  "files.autoSave": "afterDelay",
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}