https://github.com/thelarkinn/virtual-dependency-loader

webpack loader that takes a single file, and declare pieces of that file as "dependencies" as if it existed.
https://github.com/thelarkinn/virtual-dependency-loader

javascript single-file-components webpack webpack-loader

Last synced: 4 days ago
JSON representation

webpack loader that takes a single file, and declare pieces of that file as "dependencies" as if it existed.

• Host: GitHub
• URL: https://github.com/thelarkinn/virtual-dependency-loader
• Owner: TheLarkInn
• License: mit
• Created: 2017-08-28T19:23:38.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-29T05:20:49.000Z (about 7 years ago)
• Last Synced: 2024-10-07T21:41:20.452Z (about 1 month ago)
• Topics: javascript, single-file-components, webpack, webpack-loader
• Language: JavaScript
• Size: 64.5 KB
• Stars: 33
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# virtual-dependency-loader

Take a single file, process pieces of that file as "dependencies" in loader chain. This is traditionally leveraged inside of other loaders.

## Usage

### Installation

`npm install --save virtual-dependency-loader`

### Inside of another loader implementation

**loader.js**

```javascript

import querystring from 'querystring';

import {stringifyRequest} from 'loader-utils';

export default function someLoader(source, map, ast) {

  const [normalSource, virtualizedSource] = source.split("__virtual_dependency__");

  const {loadModule, resourcePath, async} = this;

  const callback = async();

  const dummyFilePath = path.resolve(__dirname, "../dummy-file.js");

  const inlineLoaderOptions = queryString.stringify({

    code: virtualizedSource,

    filename: `${resourcePath}.script.js`

  });

  const resource = stringifyRequest(`virtual-dependency-loader?${inlineLoaderOptions}!${dummyFilePath}`)

  const virtualizedSourceProcessedByOtherLoaders = loadModule(resource, (err, code, map) => {

    const newSource = [normalSource, code].join("__virtual_dependency__");

    callback(null, newSource);

  });

};

```

**file-that-was-ran-through-loader.js**

```javascript

var hello = "hello";

/* __virtual_dependency__ */

class Bar {

  constructor(foo) {

    this.foo = foo;

  };

  print() {

    console.log(this.foo);

  }

}

const baz = new Bar(hello);

```

## Credit

Hats off to Jason Miller for this idea while he was working on his (vue/polymer/sfc)=>preact compiler/loader.