1.node，和npm 这是最基础的，node的版本最好是比较新的，能支持npx。
2.使用npm全局安装下create-app-react 脚手架：
npm install -g create-react-app
3.命令行创建TypeScript项目：
npx create-react-app my-app --template typescript
4.添加项目关于webpack扩展：
这里使用yarn来安装 customize-cra，react-app-rewired，我再本地使用npm安装一直提示失败。
yarn add customize-cra react-app-rewired --dev
4.1 配置less
npm install less less-loader@5.0.0 --save-dev
5.更改package.json中的scripts配置，修改如下：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
}
6.新建 config-overrides.js 文件
在 package.json 同级目录下新建 config-overrides.js 文件
const {
override,
addDecoratorsLegacy,
disableEsLint,
addWebpackAlias,
fixBabelImports,
addLessLoader
} = require("customize-cra")
const path = require("path")
module.exports = override(
// 添加装饰器
addDecoratorsLegacy(),
disableEsLint(),
// 设置路径别名
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
}),
// 按需加载
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true
}),
// 配置less
addLessLoader({
javascriptEnabled: true,
ModifyVars: {'@primary-color': '#1DA57A'},
sourceMap:false,
}),
);
这里需要注意如果你改完config-overrides.js 之后npm start 启动项目报 Error: Cannot find module '@babel/plugin-proposal-decorators' 这个错误是因为缺少这个依赖 安装
npm install --save-dev @babel/plugin-proposal-decorators
7.配置路径别名
更目录新建tsconfig.path.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./src/*"]
}
}
}
在tsconfig.json中引入
"extends": "./tsconfig.path.json",
8.npm start 启动项目
npmstart.png
