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 }],},
};