Inhaltsverzeichnis
Notiz:
- Es eignet sich für Entwickler, die Create-React-App zum Erstellen von Projekten verwenden, das Projekt nicht auswerfen möchten, sondern die Konfiguration von Wepback im Projekt anpassen möchten
- Um React-Scripts4 verwenden zu können, müssen Sie Craco auf Version 6.0 aktualisieren. Wenn Sie React-Scripts3 verwenden, müssen Sie Craco5 verwenden
Folgende Effekte können erzielt werden
- Antd-Komponenten werden bei Bedarf geladen
- weniger unterstützen
- Unterstützen Sie die Syntax des Klassendekorators
- Unterstützt Webpack-Aliase und die Vervollständigung des vscode-Unterstützungspfads
Schritte
1. Abhängigkeiten installieren
Yarn add antd -S
Yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D
2. Erstellen Sie craco.config.js im Stammverzeichnis
const CracoLessPlugin = require('craco-less')
const path = require('path')
const pathResolve = pathUrl => path.join(__dirname, pathUrl)
module.exports = {
webpack: {
alias: {
'@': pathResolve('src'),
}
},
babel: {
plugins: [
['import', {
libraryName: 'antd', style: true }],
['@babel/plugin-proposal-decorators', {
legacy: true }]
]
},
plugins: [
{
plugin: CracoLessPlugin,
options: {
// 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
lessLoaderOptions: {
lessOptions: {
modifyVars: {
},
javascriptEnabled: true
}
}
}
}
]
}
3. Ändern Sie die Skripte in package.json
Parameterbeschreibung
PORT Startport
GENERATE_SOURCEMAP Ob beim Packen eine SourceMap generiert werden soll
{
"scripts":{
"start": "set PORT=5000 && craco start",
"build": "set GENERATE_SOURCEMAP=false && craco build",
"test": "craco test"
}
}
4. Erstellen Sie jsconfig.json im Stammverzeichnis
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@@/*": ["./*"],
"@/*": ["src/*"],
"@assets/*": ["src/assets/*"],
"@common/*": ["src/common/*"],
"@components/*": ["src/components/*"],
"@hooks/*": ["src/hooks/*"],
"@pages/*": ["src/pages/*"],
"@store/*": ["src/store/*"],
"@utils/*": ["src/utils/*"]
},
"experimentalDecorators": true
},
"exclude": ["node_modules", "build"]
}
Referenzartikel: