如何将Babel插件添加到create-react-app项目？

Question

I'm following LearnCode.academy video tutorial and on video #7 at some point the tutor/presenter add the following code

@connect((store) => {
    return {user: store.user.user, tweets: store.tweers.tweers}
})

I understand I need to configure Webpack by adding babel-plugin-transform-decorators-legacy but create-react-app is not showing any of the configuration files. What is the solution here?

Answer 1

While you could eject for decorators it is completely unnecessary and comes with all downsides of ejecting (you don't get future updates to the tooling automatically).

Instead I recommend either using learning resources that don't rely on experimental features (which decorators currently are), or learning how to write equivalent code without them.

For example:

class MyComponent extends React.Component {
  // ...
}

export default connect((store) => {
    return {user: store.user.user, tweets: store.tweers.tweers}
})(MyComponent);

If you can't figure out how to write some example without decorators, create a new question and link to it in comments, and I'll try to answer.

Answer 2

In this case, you'll need to run the eject script to get all the configuration, and to change it from its defaults ( this is irreversible, backup before attempting! ). To do this, run:

npm run eject

This should add all the configuration files into your project, such as the Babel where you can add the plugin.