Necessary Pigeonholing Mechanism

    babel-plugin-inline-import

    3.0.0 • Public • Published

    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.

    Install

    npm i babel-plugin-inline-import

    DownloadsWeekly Downloads

    36,211

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • zvictor