Babel Inline Import 
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:
- If you are using
babel-nodeorbabel-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-loaderfor webpack, and 2) another one for babel usingbabel-plugin-inline-import. E.g. if you use a create-react-app / CRA based React app, you may have 1) foryarn start/ webpack and 2) foryarn 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.