Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

babel-inline-import-loader

Package Overview
Dependencies
3
Maintainers
1
Versions
7
Issues
File Explorer

Advanced tools

babel-inline-import-loader

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

    1.0.1latest
    GitHub

Version published
Maintainers
1
Weekly downloads
789
increased by10.35%

Weekly downloads

Readme

Source

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

Last updated on 07 Jun 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc