bpty-commonjs
What is it?
It's an alternative to commonjs to suit our needs. It works in a similar fashion. All dependencies can be found by using
the function require
.
It does however have some slight differences, namely the ability to override modules and the lack of automatically resolution by paths and HTTP requests.
Why no http requests
CQ already knows the dependencies required for our clientlibs to work, no point duplicating that functionality.
How to
You can manually register something with register()
. Or you can use the babel plugin @raininglemons/bpty-commonjs
to
build you project for you.
How to use @raininglemons/bpty-commonjs
This function takes a config object with the following options;
- {String} namespace - this is the name of your component
- {String} base - this is the base of your src files to be stripped out
For example with the following setup:
{
namespace: 'MyModule',
base: 'src/',
}
The following files will be rewritten as follows;
-
./src/index
->MyModule
-
./src/modules/index
-> `MyModule/modules' -
./src/modules/Homepage
->MyModule/modules/Homepage
All import + require statements will be rewritten to look for internal modules in their new locations, and now all files in your project become publicly available in a predictable manor under a custom namespace.
Gulp Example
'use strict';
const gulp = require('gulp');
const concat = require('gulp-concat');
const named = require('vinyl-named');
const webdav = require('gulp-webdav-sync');
const babel = require('gulp-babel');
const { parser } = require('@raininglemons/bpty-commonjs');
const jsSources = ['./src/*.js', './src/**/*.js'];
/**
* Builds JS to bpty-commonjs format.
* @type {{namespace: string, base: string}}
*/
const bptyConfig = {
namespace: 'CasinoFlix',
base: 'src/',
};
gulp.task('js', function () {
return gulp.src(jsSources)
.pipe(babel({
presets: ['es2015', 'react'],
}))
.pipe(babel({
plugins: [
parser(bptyConfig),
],
}))
.pipe(concat('dist.js', bptyConfig))
.pipe(gulp.dest('./dist'));
});
gulp.task('deploy', ['js'], function () {
var options = {
protocol: 'http:'
, base: 'dist'
, auth: 'admin:admin'
, hostname: '127.0.0.1'
, port: 4502
, pathname: '/etc/designs/clientlibs/components/react/CasinoFlix/js/'
, log: 'info'
, logAuth: true
, rejectUnauthorized: false
};
return gulp.src(['./dist/dist.js'])
.pipe(webdav(options))
});