Show Topics

Bundle JavaScript

Prepros can bundle your JavaScript with Webpack. Just enable "Bundle Imports and Requires" option in the file options sidebar. Prepros also transpiles all the imported JavaScript files then bundles them if you enable the "Transpile with Babel" option.

You can import files with both ES6 import syntax and commonjs require function.

import React from 'react'; // imports this from node_modules
import './file.js';
require('./another.js');

You can also import modules from node_modules folder after installing them with the built in npm gui

Note: Webpack takes a while to process files when SourceMaps are enabled so enable SourceMaps only when you are actively debugging an issue.

Global Variables

If you want to substitute global variables in your output bundle, you can use the "Global Variables" option to do that.

if(DEBUG) {
  console.log('This is Debug Mode');
}

When you set DEBUG global to true, the output will be.

if("true") {
  console.log('This is Debug Mode');
}

Prepros substitutes global variables as strings by default but if you want to substitute a boolean or an expression you can add @ character to the variable name to substitute an expression. When you set @DEBUG global to true, the output will be.

if(true) {
  console.log('This is Debug Mode');
}

External Modules

If you have already added a library or module to your html page with script tag. Eg: React from cdnjs.org or jQuery from jQuery CDN, You can mark a module as external to prevent it from being bundled from node_modules folder.

import React from 'react'; // React will not be bundled and will be loaded from window.React
import $ from 'jquery'; // jQuery will not be bundled and will be loaded from window.$

Imported Files

Prepros compiles the parent file whenever you edit an imported file. Prepros also re-scans imported files whenever you edit a file. Refresh project with CTRL+R or CMD+R to manually re-scan imported files.

import './b.js';
require('./c.js');

// This file will processed automatically whenever you edit b.js or c.js

Legacy @append/@prepend Syntax

You can enable support for legacy "@append/@prepend" statements by enabling the "Join @append/@prepend" option in the file options sidebar.

// @prepros-append statements can be used to append a file at the end of another file.

// @prepros-append first.js
// @prepros-append second.js
// @prepros-append third file.js
// @prepros-append fourth.min.js

// @prepros-prepend statements can be used to prepend a file at the begining of another file.

// @prepros-prepend first.js
// @prepros-prepend second.js
// @prepros-prepend third file.js
// @prepros-prepend fourth.min.js

The above file will output the concatenated form of first.js, second.js, third file.js and fourth.min.js.