1.node，和npm 這是最基礎(chǔ)的旬薯，node的版本最好是比較新的，能支持npx。
2.使用npm全局安裝下create-app-react 腳手架：
npm install -g create-react-app
3.命令行創(chuàng)建TypeScript項目：
npx create-react-app my-app --template typescript
4.添加項目關(guān)于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(),
// 設(shè)置路徑別名
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
