Views: 634
Last Modified: 08.04.2022

Description

@bitrix/cli is a Bitrix24 developer console tool. The main purpose is to simplify and automate frontend development for Bitrix24 projects.
The following are requirements for normal operation, versions:
Node: 9.11.2
NPM: 5.6.0.

@bitrix/cli is a set of console commands:

  1. bitrix build for building and transpiling Transpiling is a process of interpreting certain programming languages and translating it to a specific target language. ES6+ code into the cross-browser ES5;
  2. bitrix test for launching Mocha Mocha is a JavaScript test framework that can be launched both at node.js, and in browser; convenient for asynchronous testing. Mocha tests are launched serially, allowing to create reports flexibly and precisely.

    Learn more...
    -tests;
  3. bitrix create for quick creating of extension Extension is a method of organizing JS and CSS code in software.

    Learn more...
    .

Note: first, @bitrix/cli is designed for handling extensions, site templates and component templates.

Installation

  • NPM: npm — package manager, included in Node.js.

    Learn more...

    $ npm install -g @bitrix/cli
    

  • YARN: Yarn is a new package manager, created jointly by Facebook, Google, Exponent and Tilde.

    Learn more...

    $ yarn global add @bitrix/cli
    

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.

Note: JS files, located in the directory ./test relative to file bundle.config.js are deemed as tests. Assembler immediately processes both the source code and test code when tests are triggered and then assembler executes them. That's why tests can be written on ES6+.

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

Note: You may skip /{module}. Remain in local/js/, execute in bitrix create the extension myext and load it \Bitrix\Main\UI\Extension::load("myext");.





Courses developed by Bitrix24