# babel-plugin-inline-import

> Babel plugin to make raw files importable

Latest version **3.0.0** (published 2018-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-inline-import
pnpm add babel-plugin-inline-import
yarn add babel-plugin-inline-import
bun add babel-plugin-inline-import
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2018-06-05 |
| First published | 2016-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 243 |
| Author | Victor Duarte |
| Maintainers | zvictor |
| Keywords | babel-plugin, graphql, raw, extension, wrap, import, inline |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-inline-import
- Repository: https://github.com/Quadric/babel-plugin-inline-import
- Homepage: https://github.com/Quadric/babel-plugin-inline-import#readme
- Issues: https://github.com/Quadric/babel-plugin-inline-import/issues
- npm.io page: https://npm.io/package/babel-plugin-inline-import

## Dependencies (1)

- [require-resolve](https://npm.io/package/require-resolve.md) 0.0.2

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2018-06-05
- 2.0.6 — 2017-07-16
- 2.0.5 — 2017-06-06
- 2.0.4 — 2016-09-10
- 2.0.3 — 2016-09-09
- 2.0.2 — 2016-09-09
- 2.0.1 — 2016-08-31
- 2.0.1-beta.1 — 2016-08-31
- 2.0.0 — 2016-08-31

## README

# Babel Inline Import [![Build Status](https://travis-ci.org/Quadric/babel-plugin-inline-import.svg?branch=master)](https://travis-ci.org/Quadric/babel-plugin-inline-import)
Babel plugin to add the opportunity to use `import` with raw/literal content<br>
It is good e.g. for importing `*.graphql` files into your code.

## Examples

Before (without Babel-Inline-Import):
```javascript
// server.js

// bad syntax highlighting, no syntax checking
const typeDefinitions = `
type Query {
  testString: String
}
schema {
  query: Query
}
`;

graphQLServer({
  schema: [typeDefinitions],
  ...
});
```

Now (with Babel-Inline-Import):
```javascript
// /some/schema.graphql
type Query {
  testString: String
}
schema {
  query: Query
}
```

```javascript
// server.js
import schema from '/some/schema.graphql';

graphQLServer({
  schema: [schema],
  ...
});
```

**Note:** both cases are equivalent and will result in similar code after Babel transpile them. Check [How it works](#how-it-works) section for details.

## Install
```
npm install babel-plugin-inline-import --save-dev
```

## Use
Add a `.babelrc` file and write:
```javascript
{
  "plugins": [
    "babel-plugin-inline-import"
  ]
}
```
or pass the plugin with the plugins-flag on CLI
```
babel-node myfile.js --plugins babel-plugin-inline-import
```

By default, Babel-Inline-Import is compatible with the following file extensions:

* .raw
* .text
* .graphql


## Customize
If you want to enable different file extensions, you can define them in your `.babelrc` file
```javascript
{
  "plugins": [
    ["babel-plugin-inline-import", {
      "extensions": [
        ".json",
        ".sql"
      ]
    }]
  ]
}
```

## How it works

It inserts the __content__ of the _imported file_ directly into the _importing file_, assigning it to a variable with the same identifier of the _import statement_, thus replacing the _import statement_ and the _file path_ by its resulting raw content (no parsing occurs).

## Caveats

Babel does not track dependency between _imported_ and _importing_ files after the transformation is made. Therefore, you need to change the _importing file_ in order to see your changes in the _imported file_ spread. To overcome this:

* If you are using `babel-node` or `babel-register`, you can [disable babel cache (`BABEL_DISABLE_CACHE=1`)](https://babeljs.io/docs/usage/babel-register/#environment-variables-babel-disable-cache).
* If you are using webpack with `babel-loader`, you can use [babel-inline-import-loader](https://github.com/elliottsj/babel-inline-import-loader).

Also make sure that your task runner is watching for changes in the _imported file_ as well. You can see it working [here](https://github.com/Quadric/perfect-graphql-starter/blob/master/nodemon.json).


## Motivate
If you like this project just give it a star :) I like stars.

---
_Source: https://npm.io/package/babel-plugin-inline-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._