# @evg656e/requirify

> Node-style require for browser-like JavaScript environments

Latest version **0.0.10** (published 2017-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @evg656e/requirify
pnpm add @evg656e/requirify
yarn add @evg656e/requirify
bun add @evg656e/requirify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2017-08-18 |
| First published | 2017-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | evg656e |
| Maintainers | evg656e |
| Keywords | babel, qml, require, browserify |

## Links

- npm: https://www.npmjs.com/package/@evg656e/requirify
- Repository: https://github.com/evg656e/requirify
- Homepage: https://github.com/evg656e/requirify#readme
- Issues: https://github.com/evg656e/requirify/issues
- npm.io page: https://npm.io/package/@evg656e/requirify

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.0.10 (latest) — 2017-08-18
- 0.0.9 — 2017-08-12
- 0.0.8 — 2017-08-05
- 0.0.7 — 2017-08-05
- 0.0.6 — 2017-08-05
- 0.0.5 — 2017-08-04
- 0.0.4 — 2017-08-04
- 0.0.3 — 2017-08-02
- 0.0.2 — 2017-08-01
- 0.0.1 — 2017-07-31

## README

# requirify

Node-style require for browser-like and QML JavaScript environments.

## Why?

Super fast (in terms of setup) prototyping. No need to build assets, no need to rebuild QML apps. When ready, fallback to Webpack (or whatever tool) builds.

## Install

npm install @evg656e/requirify --save-dev

## Usage

You can find some code examples in <https://github.com/evg656e/broadcast-example> and this project test folder.

### Browsers with local files

Enable local file support:
  * Chrome: run `chrome --allow-file-access-from-files`
  * Firefox: go to `about:config`, set `security.fileuri.strict_origin_policy` to `false` (you will probably want to create separate profile for this)

Add link to requirify to HTML page:
```html
<!--  Change paths appropriate to your project structure. -->
<script src="./node_modules/@evg656e/requirify/dist/require.js"></script>
```

Now you can access Node-like modules within your page:
```js
var Button = require('./lib/button');

var btn = new Button('Go!');
btn.on('clicked', function(target) {
    console.log('Button clicked:', target.text);
});
btn.click();
```

Where `lib/button.js` is:
```js
var Widget = require('./widget');

function Button(text, parent) {
    Widget.call(this, parent);
    this.text = text;
}

Button.prototype = Object.create(Widget.prototype);
Button.prototype.constructor = Button;

Button.prototype.click = function() {
    this.emit('clicked', this);
};

module.exports = Button;
```

And `lib/widget.js` is:
```js
var EventEmitter = require('events'); // https://www.npmjs.com/package/events 

function Widget(parent) {
    EventEmitter.call(this);
    this.parent = parent;
    this.visible = false;
}

Widget.prototype = Object.create(EventEmitter.prototype);
Widget.prototype.constructor = Widget;

Widget.prototype.show = function() {
    if (!this.visible) {
        this.visible = !this.visible;
        this.emit('visibilityChanged', this);
    }
};

module.exports = Widget;
```

### QML with qmlscene

Install [Qt](https://www.qt.io/download-open-source/).

Open Qt Creator, choose `New Project` -> `Qt Quick UI Prototype`.

In `Projects` tree `Add New...` -> `Qt` -> `JS File`:
```js
Qt.include('./node_modules/@evg656e/requirify/dist/require.js'); // change paths to appropriate for you project structure

var Button = require('./lib/button');
```

In QML file:
```qml
import QtQuick 2.8
import QtQuick.Window 2.2
import './lib.js' as Lib // <-- import JS resource, see http://doc.qt.io/qt-5/qtqml-javascript-imports.html

Window {
    id: window
    // ...
    Component.onCompleted: {
        var btn = new Lib.Button('Go!');
        btn.on('clicked', function(target) {
            console.log('Button clicked:', target.text);
        });
        btn.click();
        // you can access QML items from JS, e.g.:
        var btn2 = new Lib.Button('Click me', window); // <-- you can use QML Window properties and methods within JS code
    }
}
```

### Node.js HTTP server

To make work `require` with server-side generated HTML pages, handle `require-path` header in your HTTP server:
```js
const http = require('http');
const url = require('url');
const fs = require('fs');

http.createServer(function(req, res) {
    // add this block (don't use this in production!)
    const requirePath = req.headers['require-path'];
    if (requirePath) {
        res.writeHead(200);
        fs.createReadStream(requirePath).on('error', () => {
            res.writeHead(404)
            res.end()
        }).pipe(res);
    }
    // ...
}).listen(8080);
```

Now JS-files will be send from HTTP server (including modules from `node_modules` like `events`). See <https://github.com/evg656e/broadcast-example> for details.

### ES6 and Babel

You can prototype with ES6 modules, using [babel-standalone](https://www.npmjs.com/package/babel-standalone) for Browsers and QML, and [babel-register](https://www.npmjs.com/package/babel-register) for Node.js.

Enable ES6 in HTML JS:
```js
var Babel = require('./node_modules/babel-standalone');
require.extensions['.js'] = function(content) {
    return Babel.transform(content, { presets: ['es2015'] }).code;
};
var Foo = require('./lib/foo').default; // <- foo contains ES6 code and uses ES6 modules (import/export)
```

Enable ES6 in QML JS:
```js
Qt.include('./node_modules/@evg656e/requirify/dist/require.js');
var Babel = require('./node_modules/@evg656e/requirify/dist/babel.qml'); // <- use patched version of babel-standalone from requirify, standard version won't work because of QML JS engine bugs
require.extensions['.js'] = function(content) {
   return Babel.transform(content, { presets: ['es2015'] }).code;
};
var Foo = require('./lib/foo').default;
```

Enable ES6 in Node:
```js
require('babel-register');
const Foo = require('./lib/foo').default;
```
See <https://babeljs.io/docs/usage/babel-register/> for details.

---
_Source: https://npm.io/package/@evg656e/requirify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._