如何创建TypeScript的React项目

前提是node和vscode还有git曾经装置好

步骤1
用vscode关上新建文件夹project_demo,根目录创立src文件夹,在src目录下创立以下文件
(1)index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="root"></div>
</body>

</html>

(2)index.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { APP } from './APP'

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

(3)index.css

.APP{
    color: red
}

(4)APP.tsx

import * as React from 'react'
import './index.css'
import './index.tsx'

export const APP = () =>
    <div className='APP'>
        
        hello
    </div>

步骤2
根目录下创立以下文件
(1)package.json
次要配置devDependencies(开发我的项目依赖的库)和dependencies(生产我的项目依赖的库)还有script

{
  "name": "new_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  //---------批改package.json 里 script---------
  "scripts": {
    "start": "webpack-dev-server --config=webpack.config.ts",
    "build": "webpack --config=webpack.config.ts"
  },
  "author": "",
  "license": "ISC",
  //---------配置devDependencies---------
  "devDependencies": {
    "@types/lodash": "^4.14.136",
    "@types/react": "^16.8.23",
    "@types/react-dom": "^16.8.5",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.1.0",
    "express": "^4.17.1",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^6.0.4",
    "ts-node": "^8.3.0",
    "tslint": "^5.18.0",
    "typescript": "^3.5.3",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-dev-server": "^3.7.2",
    "xml-loader": "^1.2.1"
  },
  //---------配置dependencies---------
  "dependencies": {
    "lodash": "^4.17.15",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-is": "^16.9.0",
    "antd": "^3.22.0"
  }
}

(2)webpack.config.ts

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
import { Configuration } from 'webpack'

const config: Configuration = {
    entry: './src/index.tsx',//入口
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },//输入
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
            template: './src/index.html',
        }),
        
    ],//插件
    module: {
        rules: [
            {
                test: /\.css$/,//用于标识出应该被对应的 loader 进行转换的某个或某些文件。
                use: [
                    'style-loader',
                    'css-loader'
                ]//示意进行转换时,应该应用哪个 loader。
            },//loder
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }


        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
} 
module.exports = config

(3)tsconfig.json

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es2018",
      "lib": [
        "es2018",
        "dom"
      ],
      "jsx": "react",
      "skipLibCheck": true,
      "sourceMap": true,
      "removeComments": true,
      "strict": true,
      "noUnusedLocals": true,
      "noImplicitReturns": true,
      "outDir": "build"
    },
    "exclude": [
      "node_modules",
      "build"
    ]
  }

(4)tslint.json(vscode须要装置tslint插件)

{
    "rules": {
        "triple-equals": true,
        "no-var-keyword": true,
        "no-conditional-assignment": true,
        "no-default-export": true,
        "only-arrow-functions": [
            true
        ],
        "arrow-return-shorthand": [
            true,
            "multiline"
        ],
        "no-invalid-this": true,
        "semicolon": [
            true,
            "never"
        ],
        "quotemark": [
            true,
            "single"
        ]
    }
}

能够间接github下载模板
步骤3
npm i->npm run start->关上浏览器输出http://localhost:8080/


【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据