React 全套环境配置：构建强大、类型安全的 Web 应用程序

2023-12-26 11:48:34

前言

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它采用声明式编程范式，使开发人员能够轻松地创建交互式用户界面。Typescript 是 JavaScript 的超集，它增加了类型系统，使开发人员能够编写出更健壮的代码。Enzyme 是一个用于测试 React 组件的工具库，它提供了丰富的 API，使开发人员能够轻松地测试组件的行为。Jest 是一个用于测试 JavaScript 代码的工具库，它提供了丰富的功能，使开发人员能够轻松地编写和运行测试用例。Less 是一个用于编写 CSS 预处理器的语言，它提供了许多有用的功能，如变量、函数、嵌套规则等。Bootstrap 是一个用于构建响应式、移动端友好的 Web 应用程序的工具库，它提供了丰富的组件和样式，使开发人员能够快速地构建出美观、实用的 Web 应用程序。

安装依赖

在开始之前，我们需要先安装必要的依赖。您可以使用以下命令安装这些依赖：

npm install --save react react-dom typescript @types/react @types/react-dom enzyme enzyme-adapter-react-16 jest less less-loader bootstrap

安装完成后，您可以在项目中创建一个名为 package.json 的文件，并添加以下内容：

{
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "A React application",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.5.5",
    "@types/react": "^17.0.34",
    "@types/react-dom": "^17.0.11",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.7",
    "jest": "^27.5.1",
    "less": "^4.1.1",
    "less-loader": "^10.2.0",
    "bootstrap": "^5.1.3"
  },
  "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.4"
  }
}

配置 Webpack

接下来，我们需要配置 Webpack。Webpack 是一个用于构建 JavaScript 和 CSS 代码的工具。您可以使用以下命令安装 Webpack 和相关的插件：

npm install --save-dev webpack webpack-cli webpack-dev-server

安装完成后，您可以在项目中创建一个名为 webpack.config.js 的文件，并添加以下内容：

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader'
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
};

配置 TypeScript

接下来，我们需要配置 TypeScript。TypeScript 是一个用于编译 TypeScript 代码的工具。您可以使用以下命令安装 TypeScript 和相关的插件：

npm install --save-dev typescript ts-loader

安装完成后，您可以在项目中创建一个名为 tsconfig.json 的文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src"
  ]
}

配置 Enzyme

接下来，我们需要配置 Enzyme。Enzyme 是一个用于测试 React 组件的工具库。您可以使用以下命令安装 Enzyme 和相关的插件：

npm install --save-dev enzyme enzyme-adapter-react-16

安装完成后，您可以在项目中创建一个名为 enzyme.config.js 的文件，并添加以下内容：

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

配置 Jest

接下来，我们需要配置 Jest。Jest 是一个用于测试 JavaScript 代码的工具库。您可以使用以下命令安装 Jest 和相关的插件：

npm install --save-dev jest

安装完成后，您可以在项目中创建一个名为 jest.config.js 的文件，并添加以下内容：

module.exports = {
  transform: {
    '^.+\\.tsx?module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};
#x27;: 'ts-jest'
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};
#x27;,
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

创建应用程序

现在，我们可以开始创建我们的应用程序了。在项目中创建一个名为 src 的文件夹，并在其中创建一个名为 index.tsx 的文件，并添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

在项目中创建一个名为 public 的文件夹，并在其中创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>