TypeScript & React（下）

目录

TypeScript & React

TS开发环境的搭建

tsconfig.json

webpack.config.js

babel.config.js

.eslintrc.js

---

TypeScript & React

TS开发环境的搭建

• 软件版本：TypeScript:3.9.5;React:16.13.1 Node：8.17.0
• 环境搭建：正确搭建一个通用的TypeScript开发环境

差异：

• tsconfig->babel->eslint

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./",
    "target": "esnext",
    "allowJs": true,
    "noEmit": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "jsx": "react",
    "sourceMap": true,
    "pretty": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
  },  
  "typeRoots": [
    "node_modules/@types",
    "src/types"
  ],
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "**/*.spec.ts"
  ],
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const devPort = parseInt(process.env.port, 10) || 8065;
module.exports = (env) => {
  const publicPath = '';
  const buildPath = './build';
  const config = {
    mode: env.prod ? 'production' : 'development',
    entry: {
      app: path.join(__dirname, './src/index.tsx'),
    },
    devServer: {
      historyApiFallback: true,
      contentBase: path.join(__dirname, buildPath),
      port: devPort,
      hot: true,
      disableHostCheck: true,
    },
    output: {
      path: path.join(__dirname, buildPath),
      pathinfo: true,
      filename: env.prod || env.test ? '[name].[hash].js' : '[name].js',
      publicPath: `${publicPath}/`,
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    },
    module: {
      rules: [
        {
          test: /(\.ts|\.tsx)$/,
          exclude: /(node_modules)/,
          use: [
            {
              // 新增支持ts编译
              loader: 'babel-loader',
            },
          ],
        },
        {
          test: /\.css$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
              },
            },
            {
              loader: 'postcss-loader',
            },
          ],
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.ENV': env.dev,
      }),
      new webpack.LoaderOptionsPlugin({ options: {} }),
      new HtmlWebpackPlugin({
        title: 'React & TypeScript',
        template: path.join(__dirname, './src/view/index.html'),
        inject: true,
        hash: false,
        filename: 'index.html',
        publicPath: '',
      }),
    ],
    devtool: 'source-map',
    watch: true,
  };
  return config;
};

babel.config.js

module.exports = (api) => {
  api.cache(true);
  const plugins = [
    require('@babel/plugin-transform-runtime'),
    [require('@babel/plugin-proposal-decorators'), { legacy: true }],
    [require('@babel/plugin-proposal-class-properties'), { loose: true }],
    require('@babel/plugin-proposal-export-default-from'),
    // require("react-hot-loader/babel"),
  ];
  const presets = [
    [
      require('@babel/preset-env'),
      {
        modules: false,
        useBuiltIns: 'usage',
        corejs: { version: 3, proposals: true },
      },
    ],
    [require('@babel/preset-react')],
    // 插件将ts、tsx转译为js
    [require('@babel/preset-typescript')],
  ];
  return {
    plugins,
    presets,
  };
};

.eslintrc.js

const path = require('path');
module.exports = {
  root: true,
  // 新增ts的编译
  parser: '@typescript-eslint/parser',
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    // 新增tslint推荐
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  // 新增@typescript-eslint配置项
  plugins: ['@typescript-eslint', 'jsx-a11y', 'import', 'react-hooks'],
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module',
    // 关联ts配置文境
    project: './tsconfig.json',
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: {
          resolve: {
            alias: {
              '@': path.resolve(__dirname, './src'),
            },
            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
          },
        },
      },
    },
  },
  env: {
    browser: true,
  },
  globals: {
    window: true,
    ENV: true,
  },
  rules: {
    indent: ['error', 2],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'no-console': 1,
    'arrow-parens': 0,
    'no-shadow': 'off',
    'react/jsx-filename-extension': 'off',
    'react/jsx-props-no-spreading': 0,
    // 自定义规则
    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 0,
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        ts: 'never',
        tsx: 'never',
        js: 'never',
        jsx: 'never',
        json: 'never',
      },
    ],
    'import/no-unresolved': [2, { commonjs: true, amd: true }],
  },
};