详解create-react-app 2.0版本如何启用装饰器语法

详解如何在create-react-app 2.0版本中启用装饰器语法

随着JavaScript的发展，装饰器（Decorators）作为一种新的语法特性，给我们提供了一种更优雅的方式来处理类和方法。虽然装饰器语法尚未成为标准，但我们可以通过Babel在项目中使用它。在create-react-app（简称cra）的2.0版本中，我们可以通过react-app-rewired来启用装饰器语法。

步骤如下：

一、安装react-app-rewired

```bash

yarn add react-app-rewired

```

二、修改package.json中的启动脚本

在package.json中，我们需要将原来的启动、构建和测试脚本改为使用react-app-rewired启动。修改后的package.json部分如下：

```json

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react-app-rewired test"

}

```

三、安装装饰器语法所需的babel插件

接下来，我们需要安装装饰器语法所需的babel插件，以及可能的babel-core升级。使用yarn安装：

```bash

yarn add @babel/plugin-proposal-decorators metro-react-native-babel-preset -D

```

四、创建必要的配置文件并配置内容

在项目根目录下创建.babelrc和config-overrides.js文件。其中，.babelrc文件用于配置Babel转译规则，config-overrides.js用于覆盖create-react-app的默认配置。配置文件内容如下：

// .babelrc文件内容

```json

{

"presets": ["module:metro-react-native-babel-preset"],

"plugins": [

[

"@babel/plugin-proposal-decorators",

{

"legacy": true

}

]

]

}

```

// config-overrides.js文件内容

```javascript

const { getBabelLoader } = require('react-app-rewired');

const path = require('path');

module.exports = function override(config, env) { // eslint-disable-line no-unused-vars, func-name-matching (function is intentionally named legacy) const babelLoader = getBabelLoader(config.module.rules); const pwd = path.resolve(); babelLoaderclude = [path.normalize(`${pwd}/src`)]; // use babelrc babelLoader.options.babelrc = true; return config; }; ```上述代码实现了对webpack配置对象的劫持，并对其进行简单的修改以支持装饰器语法。具体来说，它使用了新的Babel规则并将Babel配置文件路径设置为项目的根目录。五、查看完整的package.json文件 以下是一个完整的package.json文件的示例，包括了之前所有步骤的配置信息： ```json { "name": "my-react-project", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.5.2", "react-app-rewired": "^1.6.2", "react-dom": "^16.5.2", "react-scripts": "2.0.5" }, "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "@babel/plugin-proposal-decorators": "^7.1.2", "metro-react-native-babel-preset": "^0.48.1", "webpack-bundle-analyzer": "^3.0.3" } } ``` 这样就完成了在create react app 2.0版本中启用装饰器语法的全部步骤。希望这篇文章对大家有所帮助，也希望大家多多支持我们的网站。以上就是本文的全部内容。如果您有任何问题或需要进一步的帮助，请随时联系我们。