🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

babel-inline-import-loader

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-inline-import-loader

A webpack loader enabling files imported by babel-plugin-inline-import to trigger rebuilds when content changes

1.0.1
latest
Version published
Maintainers
1
Created

babel-inline-import-loader

npm version

A webpack loader enabling files imported by babel-plugin-inline-import to trigger rebuilds when content changes.

Installation

First install babel-plugin-inline-import@3.0.0 or later. Then:

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

Usage

In your webpack config, put 'babel-inline-import-loader' before 'babel-loader':

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-inline-import-loader',
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                ['inline-import', {
                  extensions: ['.txt']
                }]
              ],
              // Make sure cacheDirectory is disabled so that Babel
              // always rebuilds dependent modules
              cacheDirectory: false // default
            }
          }
        ]
    ]
  }
};

Next.js

In Next.js, add the following to your next.config.js:

module.exports = {
  // ...
  webpack: (config, { defaultLoaders, dir }) => {
    const rulesExceptBabelLoaderRule = config.module.rules.filter(
      (rule) => rule.use !== defaultLoaders.babel
    );

    config.module.rules = [
      ...rulesExceptBabelLoaderRule,
      {
        test: /\.(js|jsx)$/,
        include: [dir],
        exclude: /node_modules/,
        use: [
          'babel-inline-import-loader',
          {
            ...defaultLoaders.babel,
            options: {
              ...defaultLoaders.babel.options,
              // Disable cacheDirectory so that Babel
              // always rebuilds dependent modules
              cacheDirectory: false,
            },
          },
        ],
      },
    ];
    return config;
  },
};

Example

Run npm start and open http://localhost:8080/. Edit example.txt and webpack should rebuild and reload the page automatically.

How does it work?

babel-inline-import-loader depends on babel-plugin-inline-import#10, so that a comment block specifying the original module path is included next to the inlined import. For example,

import example from './example.txt';

is compiled to

/* babel-plugin-inline-import './example.txt' */ const example = 'hello world';

babel-inline-import-loader then parses the value './example.txt' from the comment and includes that file in webpack's dependency graph via this.addDependency.

FAQs

Package last updated on 07 Jun 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts