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