Ts + React + Styled-Components 构建开发环境

2,327 阅读1分钟

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