npmpackage.info

Gathering detailed insights and metrics for babel-plugin-inline-import

Other packages similar to babel-plugin-inline-import

babel-plugin-inline-import-data-uri

1.0.1

Babel plugin to make raw files importable as base64 encoded data URI strings.

babel-plugin-import-graphql

2.8.1

Babel plugin to make .gql/.graphql files importable

babel-plugin-inline-json-import

0.3.2

Inlines JSON file imports straight into JS code

@startupjs/babel-plugin-rn-stylename-inline

0.55.11

Use styleName attributes with inline css and styl template strings

Gathering detailed insights and metrics for babel-plugin-inline-import

babel-plugin-inline-import - 3.0.0 | npmpackage.info

babel-plugin-inline-import

inline the raw content of import statements

3.0.0

244

MIT

JavaScript

Installations

npm install babel-plugin-inline-import

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.9.1

NPM Version

6.1.0 Pull Requests

Open

9

Total

23

Closed

3

Merged

11

Issues

Open

14

Total

21

Closed

7

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

Quadric

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

244 Stars

144 Commits

29 Forks

4 Watchers

10 Branches

13 Contributors

Updated on Jul 07, 2025

Maintainers

View All 13 Contributors

Package Meta Information

Latest Version

3.0.0

Package Id

babel-plugin-inline-import@3.0.0

Size

4.62 kB

NPM Version

6.1.0

Node Version

8.9.1

Published on

Jun 05, 2018

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

require-resolve

Dev Dependencies

babel-cli babel-core babel-eslint babel-preset-es2015-without-strict babel-preset-stage-1 chai eslint mocha sinon

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

1// server.js
2
3// bad syntax highlighting, no syntax checking
4const typeDefinitions = `
5type Query {
6  testString: String
7}
8schema {
9  query: Query
10}
11`;
12
13graphQLServer({
14  schema: [typeDefinitions],
15  ...
16});

Now (with Babel-Inline-Import):

1// /some/schema.graphql
2type Query {
3  testString: String
4}
5schema {
6  query: Query
7}

1// server.js
2import schema from '/some/schema.graphql';
3
4graphQLServer({
5  schema: [schema],
6  ...
7});

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:

1{
2  "plugins": [
3    "babel-plugin-inline-import"
4  ]
5}

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

1{
2  "plugins": [
3    ["babel-plugin-inline-import", {
4      "extensions": [
5        ".json",
6        ".sql"
7      ]
8    }]
9  ]
10}

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.

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.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More