启用ES7的修饰器语法

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

更好的配置方法参考扩展create-react-app的webpack配置

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

  • 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"]
}

2018 10.26
今天用以前的方法再配置修饰器时,报错了。升级到Babel 7时,就不能用下面的方法了。看了一下Babel 7文档并在网上搜索了一下解决方法
在这里插入图片描述
按照步骤走报了个错误
在这里插入图片描述
解决方法是删除package.json中的babel配置,然后在.babelrc文件中的presets加上"react-app"

{
  "presets": ["@babel/preset-env", "react-app"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

上面的配置方法是通过babelrc文件来配置的,还用一种更好的配置方法来扩展webpack配置,具体可以参考扩展create-react-app的webpack配置

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值