React + Typescript + Webpack

prtyaa 2023-12-26 17:34:29  65665

分类专栏：资讯

首先确保你的电脑已经安装了 Node.js。

第一步启动项目

首先创建一个目录并初始化项目：

mkdir react_typescript_webpack
cd react_typescript_webpack
npm init -y

在上述目录中创建一个子目录 src，用于放置源码：

mkdir src
touch src/index.tsx

然后在这个目录中新建一个名为 index.tsx 的入口文件。

依赖

这里我使用 npm 所以在 package.json 中填写如下内容：

{
  "name": "react_typescript_webpack",
  "version": "1.0.0",
  "description": "Build UI that scales",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [
    "react",
    "typescript",
    "webpack"
  ],
  "author": "bonta.jacopo@gmail.com",
  "license": "ISC",
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@types/react": "^16.8.24",
    "@types/react-dom": "^16.0.5",
    "@types/webpack": "4.1.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.4.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

要安装这些依赖，运行：

npm install

第二步配置

TypeScript 配置文件

touch tsconfig.json

输入如下内容：

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "es6",
    "jsx": "react",
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true
  }
}

webpack 配置文件

touch webpack.config.js

输入如下内容：

const path = require('path');

module.exports = {
    mode: 'none',
    entry: {
        app: path.join(__dirname, 'src', 'index.tsx')
    },
    target: 'web',
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: '/node_modules/'
            }
        ],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

第三步：编写项目代码

在入口文件 index.tsx 中编写业务逻辑：

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

import App from './App';

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

编写 App.tsx 文件：

import React from 'react';

export default function App() {
    return <h1>Hello, world!</h1>
}

运行编译命令：

npm run build

现在会编译生成一个纯 JS 文件。

接下来在 src 目录中编写我们的静态页面 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Typescript Webpack</title>
</head>
<body>
    <!-- React app root element -->
    <div id="root"></div>
</body>
</html>

安装 html-webpack-plugin

npm install --save-dev html-webpack-plugin@4.5.2

编辑 webpack.config.js 如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'none',
    entry: {
        app: path.join(__dirname, 'src', 'index.tsx')
    },
    target: 'web',
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: '/node_modules/'
            }
        ],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html')
        })
    ]
}

再次运行

npm run build

会生成静态 html 文件以及 js 文件到 dist 目录中。

最后一步是需要一个服务器来对外发布这些文件了，一个简单粗暴的方案是：

npm i -g live-server
cd dist
live-server

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30934

赞同 0

评论 0 条

React + Typescript + Webpack

第一步 启动项目

第二步 配置

第三步：编写项目代码

相关文章

关注我们

第一步启动项目

第二步配置