jFactory > Reference > Importing jFactory

Installing jFactory 1.8

Production and Development modules

jFactory provides a development version with additional input validation tests, debug tools, and logs. When using the development package, you must see a startup message in the console.

Import from <script>

! NOT RECOMMENDED !

The jFactory.umd.js file is a fully bundled export. Use this for quick library testing, or on non-bundled websites. For web applications, it is recommended to use the NPM module to reduce the library’s footprint with TreeShaking (see the next section).

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- loading dependencies from a cdn -->
    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery/jquery.min.js"></script>
    <!-- loading jFactory (development) from a cdn -->
    <script src="https://cdn.jsdelivr.net/npm/jfactory@1.8.0/dist/umd/jFactory-devel.umd.js"></script>
    <!-- or production: -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jfactory@1.8.0/dist/umd/jFactory.umd.js"></script> -->
</head>
<body>
<script>
    const { jFactory, JFactoryPromise } = jFactoryModule;

    let module = jFactory("myModule", {
        onEnable() {
            this.$log("enable")
        }
    });
    module.$install(true);

    JFactoryPromise.resolve('ok')
        .then(r => console.log(r));
</script>
</body>
</html>

Import from NPM

We recommend using a bundler with TreeShaking enabled, like Webpack in production mode. This will allow you to import only the necessary code from jFactory and dependencies, and reduce the overall footprint of your application. 

npm add jfactory

This package provides ES6 modules optimized for production or development, automatically selected by a conditional loader :

Conditional loading (Automatic import)

import { jFactory } from "jfactory"

const { jFactory } = require("jfactory")

This conditional loading is based on process.env.NODE_ENV to switch between development and production modules.

Note that Webpack configures NODE_ENV with the value of its mode option, so you shouldn’t need to configure anything : Your project will automatically use the production module if webpack is configured for production. Otherwise, just set process.env.NODE_ENV to "development" or "production".

[//]: # (Restriction: Because the “automatic import” is a CommonJS file, it may not work when imported from an ES6 “.mjs” file. ) [//]: # (In this case, you may need to load a specific version (see below) or to load it from a js file. )

Force a specific import

To ignore the loader and force a specific version (development or production), use one of these lines :

import { jFactory } from "jfactory/es" // production version, ES6

import { jFactory } from "jfactory/devel" // development version, ES6

const  { jFactory } = require('jfactory/es') // production loaded with require()

const  { jFactory } = require('jfactory/devel') // development loaded with require()

Import from raw source

jFactory can also be used from its unbundled source files (/src/index.mjs).

git clone https://github.com/jfactory-es/jfactory

<script>
    JFACTORY_ENV_DEV = true // enable developer mode
    // ... see /src/jFactory-env.mjs
</script>
<script type="module" src="src/index.mjs"></script>

Or as ES6 import:

import { jFactory } from "./src/index.mjs"

See also