Ts + React + Styled-Components 構建開發環境

Create React Typescript App

yarn golbal add create-react-app

  npx create-react-app project-name --typescript
複製代碼

tsconfig.json 配置

{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react"
    },
    "include": [
      "src"
    ]
  }
複製代碼

通常插件模塊

• yarn add react-redux
• yarn add react-router
• yarn add react-router-dom
• yarn add axios
• yarn add antd
• yarn add react-app-rewired customize-cra

  用於重寫 create-react-app 的配置, 會讀取根目錄下的 config-overrides.js， react-app-rewired ^2.0 以上，結合customize-cra作override
  
    package.json 中 scripts 須要將 react-scripts 修改成 react-app-rewired
  複製代碼

  // config-overrides.js
      const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
      const path = require('path');
      
      module.exports = override(
        addWebpackAlias({
          '@': path.resolve(__dirname, 'src/')
        }),
        fixBabelImports('import', {
          libraryName: 'antd-mobile',
          libraryDirectory: 'es',
          style: 'css'
        })
      );
  複製代碼

• yarn add styled-components

  使用 styled-components 來使用寫 css/less/sass
  複製代碼

  // styled-components 仍是很強大的，這裏簡單舉幾個例子
  // px 對 vw 轉換， styleUtils.js
  export function px2vw(px, psd = 750) {
    return `${px / psd * 100}vw`;
  }
  // style.js
  import { px2vw } from '@/utils/styleUtils';
  import styled from 'styled-components';
  
  export const FullScreen = styled.div`
    width: ${px2vw(750)};
    height: 100vh;
    background-color: blue;
    .red {    // 能夠嵌套，就和 less/ sass 同樣方便
      color: red;
    }
  `;
  // demo.tsx
  import React from 'react';
  import {FullScreen} from './style';
  
  const Wrapper: React.FC = () => {
    return (
      <FullScreen>    // 引用style中的 FullScreen 包裹樣式 
        <div className="red">紅色的字</div>
      </FullScreen>
    );
  };
  
  export default Wrapper;
  
  複製代碼

• yarn add babel-plugin-import

  // 是一個用於按需加載組件代碼和樣式的 babel 插件，若是使用 antd-design 的話，能夠在其官網查看具體配置
  複製代碼

• yarn add eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react -D

代碼檢查 eslint

• yarn add eslint -D
• yarn add eslint-config-prettier eslint-plugin-prettier eslint-config-alloy -D
• yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

module.exports = {
      "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        'alloy',
        'alloy/react',
        'alloy/typescript',
      ],
      "env": {
        "browser": true,
        "node": true,
        "mocha": true
      },
      "parserOptions": {
          // 支持最新 JavaScript
          "ecmaVersion": 2018,
          "sourceType": 'module',
      },
      "settings": {
        "import/ignore": [
          "node_modules"
        ]
      },
      "rules": {
          ... ...
      }
    }
複製代碼

接口代理

• yarn add http-proxy-middleware -D

// http-proxy-middleware 會讀取根目錄下 setupProxy.js 的配置
    // setupProxy.js 
    import proxy from 'http-proxy-middleware';

    const target = 'xxxxx'; // 測試 ip
    
    module.exports = function(app) {
      // ...You can now register proxies as you wish!
      app.use(
        proxy(['/api'], {
          target: target,
          secure: false,
          changeOrigin: true
        })
      );
    };

複製代碼