babel-plugin-auto-import

Convert global variables to import statements

This is an replacement for babel-plugin-auto-import but in another configuration style.

Known differences

This plugin fails test should insert import for object property where it transforms...

1let a = {
2  b: x,
3  y,
4  z: c
5}

...into...

1-import { x } from "some-path"
2+import { x, y } from "some-path"
3
4 let a = {
5   b: x,
6   y,
7   z: c
8 }

...which I believe is expected.

Examples

Example 1

1{
2  plugins: [
3    [
4      '@xymopen/babel-plugin-auto-import',
5      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
6      ({
7        Vue: { from: 'vue', default: true }
8      })
9    ]
10  ]
11}

...will transform...

1Vue.component('my-component', { /* ... */ })

...into...

1import Vue from 'vue'
2
3Vue.component('my-component', { /* ... */ })

Example 2

1{
2  plugins: [
3    [
4      '@xymopen/babel-plugin-auto-import',
5      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
6      ({
7        // You can defer the configuration generation
8        factory(babel, program, state) {
9          return {
10            Vue: { from: 'vue-class-component' },
11            Component: { from: 'vue-class-component', default: true }
12          }
13        }
14      })
15    ]
16  ]
17}

...will transform...

1@Component
2class MyComponent extends Vue { }

...into...

1import Component, { Vue } from 'vue-class-component'
2
3@Component
4class MyComponent extends Vue { }

Example 3

Suitable for injecting peer dependency.

1{
2  plugins: [
3    [
4      '@xymopen/babel-plugin-auto-import',
5      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
6      ({
7        Vue: { from: 'vue-property-decorator' },
8        Component: { from: 'vue-property-decorator' },
9        Prop: [
10          { from: 'reflect-metadata', sideEffect: true },
11          { from: 'vue-property-decorator' }
12        ]
13      })
14    ]
15  ]
16}

...will transform...

1@Component
2class MyComponent extends Vue {
3  @Prop() age
4}

...into...

1import 'reflect-metadata'
2import { Component, Vue, Prop } from 'vue-property-decorator'
3
4@Component
5class MyComponent extends Vue {
6  @Prop() age
7}

WARNING: The plugin doesn't check if the import is sideEffect and misconfiguration could result in conflict or be tree shaked.

Example 4

Suitable for polyfilling browser built-ins (eg. window.fetch).

1{
2  plugins: [
3    [
4      '@xymopen/babel-plugin-auto-import',
5      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
6      ({
7        fetch: { from: 'whatwg-fetch', sideEffect: true }
8      })
9    ]
10  ]
11}

...will transform...

1fetch('http://example.com/qwe')

...into...

1import 'whatwg-fetch'
2
3fetch('http://example.com/qwe')

Example 5

1{
2  plugins: [
3    [
4      '@xymopen/babel-plugin-auto-import',
5      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
6      ({
7        styles (babel, program, state) {
8          return {
9            from: `./${path.relative(state.cwd, state.filename).replace(/\.js$/, '.css')}`,
10            default: true
11          }
12        }
13      })
14    ]
15  ]
16}

...will transform component-name.js...

1// ...
2<input className={styles.className} />
3// ...

...into...

1import styles from './component-name.css';
2// ...
3<input className={styles.className} />
4// ...