如何创建TypeScript的React项目

42次阅读

共计 2895 个字符，预计需要花费 8 分钟才能阅读完成。

前提是 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/

正文完