babel-plugin-import-globals

Automatically import a whitelist of modules when they are used. This is a bit like setting a global variable, except that it is isolated to your project (it does not affect dependencies or dependents of the module as they will not be running your babel transforms). This can save a lot of time with the few core modules that are used everywhere, while still leaving most modules using the standard import foo from 'foo' syntax so it's very explicit where something comes from.

Installation

npm install babel-plugin-import-globals --save

Usage

Put something like this in your .babelrc:

.babelrc

1{
2  "plugins": [
3    [
4      "import-globals",
5      {
6        "React": "react",
7        "Component": {"moduleName": "react", "exportName": "Component"},
8        "PropTypes": {"moduleName": "react", "exportName": "PropTypes"}
9      }
10    ]
11  ]
12}

And then you can just do

1class MyElement extends Component {
2  static propTypes = {
3    name: PropTypes.string.isRequired,
4  };
5  render() {
6    return <div>{this.props.name}</div>
7  }
8}

And this tool will magically add in:

1import React, {Componet, PropTypes} from 'react';
2
3class MyElement extends Component {
4  static propTypes = {
5    name: PropTypes.string.isRequired,
6  };
7  render() {
8    return <div>{this.props.name}</div>
9  }
10}

License

MIT