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
        })
      );
    };

复制代码