Need help with babel-plugin-inline-import?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

feats
215 Stars 29 Forks MIT License 143 Commits 15 Opened issues

Description

inline the raw content of import statements

Services available

!
?

Need anything else?

Contributors list

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): ```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
}
// 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:
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
    )
    .
  • If you are using webpack with
    babel-loader
    , you can use babel-inline-import-loader.
  • An alternative library for webpack is raw-loader. Advantage = detects changes to imported file w/o additional config or losing babel's cache. Disadvantage: maintain 2 separate configs. E.g. 1) one w/
    raw-loader
    for webpack, and 2) another one for babel using
    babel-plugin-inline-import
    . E.g. if you use a create-react-app / CRA based React app, you may have 1) for
    yarn start
    / webpack and 2) for
    yarn test
    / babel. For CRA, craco and craco-raw-loader may help.

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.