Bitrix Framework

Configuration

• Basic configuration:

  module.exports = {
  	input: './src/app.js', 
  	output: './dist/app.bundle.js',
  };
  

• All parameters:

  module.exports = {
  	// File to have a complete assembly. 
  	// Usually it's './src/<extension>.js
  	// Indicate a relative path 
  	input: string, 
  	
  	// Path to bundle, created as a result of assembly 
  	// Usually, it's ./dist/<extension_name>.bundle.js
  	// Indicate a relative path 
  	output: string,
  	
  	// Namespace to add all exports from input-indicated file
  	// For example 'BX.Main.Filter'
  	namespace: string,
  	
  	// Lists of files for forced merging. 
  	// Files will be merged without code duplicate checks. 
  	// sourcemaps are merged automatically 
  	// Indicate relative paths
  	concat: {
  		js: Array<string>,
  		css: Array<string>,
  	},
  	
  	// Allows or denies assembler to modify config.php
  	// Default: true (allowed)
  	adjustConfigPhp: boolean,
  	
  	// Allows or denies assembler to delete unused code. 
  	// Default: true (allowed).
  	treeshake: boolean,
  	
  	// Allows or denies rebuilding bundles 
  	// when assembly is triggered outside of root of current extension 
  	// Default: `false` (allowed)
  	'protected': boolean,
  	
  	plugins: {
  		// Re-defines Babel parameters.
  		// You can indicate your own Babel parameters
  		// https://babeljs.io/docs/en/options
  		// When set as false, the code will be compiled without transpiling
  		babel: boolean | Object,
  		
  		// Additional Rollup plugins, 
  		// executed when assembling bundles 
  		custom: Array<string | Function>,
  	},
  };
  

Find more details in the corresponding lesson. Extension is a method for organizing JS and CSS in Bitrix24 products.

Learn more...

Assembly

To launch the assembly, execute the following command:

$ bitrix build

Assembler recursively finds all files bundle.config.js and executes assembly and transpiling for each config.

Additional parameters:

• --watch, -w

  Change track mode. Re-builds bundles after updating source files.

  $ bitrix build --watch
  

• --test, -t

  Continuous tests mode. Tests are triggered after each assembly. Please be advised, assembly with parameter --test shows only a test status in reports, without indication of successful/negative test result. Full report is visible only by the command bitrix test.

  $ bitrix build --test
  

• --modules, -m

  Assembly for only specified modules. Parameter is supported by root directory only with modules local/js and bitrix/modules. Indicate module names in the value, comma-separated, for example:

  $ bitrix build --modules main,ui,landing
  

• --path, -p

  Start of assembly for specified directory. Indicate a relative path to directory in the value, for example:

  $ bitrix build --path ./main/install/js/main/loader
  

Test launch

Launches Mocha tests and displays a detailed report with test results.

Additional parameters:

• --watch, -w

  Change track mode. Launches tests after editing source files and test code.

  $ bitrix test --watch
  

• --modules, -m

  Indicated module testing only. Parameter is supported only in the repository root directory. Indicate module names, comma-separated, for example:

  $ bitrix test --modules main,ui,landing
  

• --path, -p

  Test launch from specified directory. Indicate relative path to directory in the value, for example:

  $ bitrix test --path ./main/install/js/main/loader.
  

Creating an extension

To create an extension:

• Go to directory local/js/ {module} {module}: name should not contain dots.
Execute the command bitrix create. After executing the command, creates an extension folder, for example, /ext and connected as follows: \Bitrix\Main\UI\Extension::load("partner.ext"); for the path local/js/partner/ext/.
• Reply to wizard questions