Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including babel-plugin-inline-import with all npm packages installed. Try it out:

var babelPluginInlineImport = require("babel-plugin-inline-import")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

babel-plugin-inline-import v3.0.0

Babel plugin to make raw files importable

Babel Inline Import Build Status

Babel plugin to add the opportunity to use import with raw/literal content
It is good e.g. for importing *.graphql files into your code.

Examples

Before (without Babel-Inline-Import):

// 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):

// /some/schema.graphql
type Query {
  testString: String
}
schema {
  query: Query
}
// 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 section for details.

Install

npm install babel-plugin-inline-import --save-dev

Use

Add a .babelrc file and write:

{
  "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

{
  "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:

Also make sure that your task runner is watching for changes in the imported file as well. You can see it working here.

Motivate

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free