babel-inline-import-loader
A webpack loader enabling files imported by babel-plugin-inline-import to trigger rebuilds when content changes
Last updated a year ago by elliottsj .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install babel-inline-import-loader 
SYNC missed versions from official npm registry.

babel-inline-import-loader

npm version Travis CI Build Status Greenkeeper badge

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.

Current Tags

  • 0.1.0                                ...           latest (a year ago)

5 Versions

  • 0.1.0                                ...           a year ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 20
Dependencies (3)
Dev Dependencies (10)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |