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