先npm run inject暴露webpack

我們用create-react-app建立的專案時，並不能使用修飾器語法 
修飾器語法是ES.next 2階段特性。

我在使用mobx時需要用@observable讓屬性被觀測和元件觀測變化@observer 
使用路由時需要withRouter將路由資訊傳遞個元件的props物件上等都需要用到修飾器語法。

npm run inject啟動後配置.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

{
  "presets": ["env","react"],
  "plugins": ["transform-decorators-legacy","transform-class-properties"]
}
 

babel-preset-env取代babel-preset-2015 
由於.babelrc檔案會覆蓋腳手架的配置檔案，所以presets要新增react 
transform-decorators-legacy是修飾器配置 
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"]
}