启用ES7的修饰器语法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37860930/article/details/80690838

修饰器语法是ES.next 2阶段特性,使用修饰器语法可以使我们的代码更加简洁。但我们用create-react-app创建的项目时,并不能使用修饰器语法,需要我们自己配置

我使用修饰器语法的场景:

  • react的状态管理mobx需要@observable、@observer来观察变化
  • react路由需要@withRouter将路由信息传递给组件的props对象上
  • antd组件的form表单@Form.create()等


配置.babelrc文件

npm run eject启动后配置.babelrc文件

//首先安装配置需要的依赖
npm install --save-dev babel-preset-env 
npm install --save-dev babel-plugin-transform-decorators-legacy
npm install --save-dev babel-plugin-transform-class-properties

//然后在根目录下创建.babelrc文件
{
  "presets": ["env","react"],
  "plugins": ["transform-decorators-legacy","transform-class-properties"]
}

配置说明

  1. babel-preset-env取代babel-preset-2015
  2. 由于.babelrc文件会覆盖脚手架的配置文件,所以presets要添加react
  3. transform-decorators-legacy是修饰器配置
  4. transform-class-properties是类中定义实例属性的新方法,以前定义实例的属性只能写在constructor中,现在可以直接写在外面
//以前定义实例属性写在constructor
class Test extends React.Component{
    constructor(props){
        super(props)
        this.state = {}
    }
}
//现在定义实例属性可以直接写在外面
class Test extends React.Component{
    state = {}
}

另一种简单的配置

npm install babel-preset-stage-2 --save-dev
npm install babel-preset-react-native-stage-0 --save-dev
{
  "presets": ["react-native-stage-0/decorator-support"]
}
阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页