如何使用 craco 在 react 项目中开启装饰器语法
装饰器（decorators）是一种实验性的语法，可以让我们用一种简洁优雅的方式来修改或增强类和类方法的行为。它们在一些框架或库中有广泛的应用，比如 Angular、MobX、Redux 等。但是，装饰器并不是标准的 JavaScript 语法，如果我们想在 react 项目中使用它们，我们需要做一些额外的配置。
什么是 craco
craco 是一个 npm 包，它的全称是 Create React App Configuration Override，意思是覆盖 create-react-app 的默认配置。create-react-app 是一个非常方便的脚手架工具，可以让我们快速创建一个 react 项目，但是它也有一些限制，比如它隐藏了 webpack 的配置文件，如果我们想要自定义一些配置，我们需要执行 eject 命令，暴露出所有的配置文件，这样就会失去 create-react-app 的优势和便利。
craco 的作用就是让我们可以在不执行 eject 命令的情况下，自定义 create-react-app 的配置，包括 webpack、babel、eslint、postcss 等。它提供了一个简单灵活的方式，让我们可以覆盖或扩展 create-react-app 的默认配置，而不会影响到 create-react-app 的核心功能。
如何使用 craco 开启装饰器语法
要使用 craco 开启装饰器语法，我们需要做以下几个步骤：
安装 craco 和相关的插件
首先，我们需要安装 craco 和相关的插件。我们可以在终端中执行以下命令：
npm install --save @craco/craco
npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
这样就安装了 craco 和 babel 的装饰器插件。
修改 package.json 中的 scripts 属性
接下来，我们需要修改 package.json 中的 scripts 属性，把 react-scripts 替换成 craco。我们可以把 package.json 中的 scripts 属性修改成这样：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
这样就告诉 create-react-app 使用 craco 来运行项目。
创建 craco.config.js 文件
然后，我们需要在项目根目录下创建一个 craco.config.js 文件，用来添加 craco 的配置。我们可以在 craco.config.js 文件中添加以下内容：
module.exports = {
babel: {
// 用来支持装饰器语法
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],
]
}
};
这样就告诉 babel 使用旧版的装饰器语法插件。
重新运行项目
最后，我们需要重新运行项目，让配置生效。我们可以在终端中执行以下命令：
npm start
这样就启动了项目，并开启了装饰器语法。
如何使用 craco 配置 eslint
除了开启装饰器语法外，我们还需要配置 eslint 来支持装饰器语法。否则，eslint 可能会报错或警告，影响我们的代码质量和开发体验。
要使用 craco 配置 eslint，我们需要做以下几个步骤：
在 craco.config.js 文件中添加 eslint 属性
首先，我们需要在 craco.config.js 文件中添加 eslint 属性，用来覆盖或扩展 create-react-app 的默认 eslint 配置。我们可以在 craco.config.js 文件中添加以下内容：
module.exports = {
// ...
eslint: {
enable: true, // 是否启用 eslint
mode: 'extends', // 覆盖模式，可以是 'extends' 或 'file'
configure: {
// 任何 eslint 配置选项
},
pluginOptions: {
// 任何 eslint 插件配置选项
}
}
};
如果想使用自定义的 eslint 配置文件
如果我们想使用自定义的 eslint 配置文件，比如 .eslintrc.js，我们可以把 mode 设置为 'file'，然后在项目根目录下创建一个 .eslintrc.js 文件，添加我们想要的配置。例如：
module.exports = {
// ...
eslint: {
enable: true,
mode: 'file',
}
};
module.exports = {
// 任何 eslint 配置选项
};
如果想使用 airbnb 的 eslint 配置
如果我们想使用 airbnb 的 eslint 配置，我们可以安装以下依赖，并在 .eslintrc.js 文件中添加以下内容：
npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
module.exports = {
extends: "airbnb",
rules: {
// 我们可以在这里覆盖或添加一些规则
}
};
在 .eslintrc.js 文件中添加 parserOptions 属性
无论我们使用哪种方式来配置 eslint，我们都需要在 .eslintrc.js 文件中添加 parserOptions 属性，并设置 legacyDecorators 为 true。这样可以让 eslint 使用旧版的装饰器语法，并避免报错。例如：
module.exports = {
// ...
parserOptions: {
ecmaFeatures: {
legacyDecorators: true
}
}
};
重新运行项目
最后，我们需要重新运行项目，让配置生效。我们可以在终端中执行以下命令：
npm start
这样就启动了项目，并配置了 eslint。
总结
通过以上几个步骤，我们就可以使用 craco 在 react 项目中开启装饰器语法，并配置对应的 eslint。这样就可以让我们享受到装饰器带来的便利和优雅，并保证代码质量和风格统一。当然，craco 还有很多其他的功能和用法，如果你想了解更多，请参考官方文档：craco.js.org/
