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