How to use deamdify transform - browserify

I have a simple AMD utility library. I am trying to use with the deamdify browserify transform.
define(function() {
return {
add: function(num1, num2) {
return num1 + num2;
}
};
});
I tried running the transform:
browserify -t deamdify util.js -o bundle.js
then in a seperate main.js file I tried importing the file
var util = require('bundle');
console.log(util.add(1, 2));
I tried running this with node but util.add is undefined so the console.log is not printed and an error is thrown (undefined is not a function)
Am I using the transform incorrectly? I tried making this as simple as a could.

Related

rollup custom cli arguments for the config throwing errors

I have an app in progress which requires 3 micro code bases and some iframe postMessage stuff.
Controlling the build of all these i aim to manage from a single rollup config file and injecting arguments in via cli:
"scripts": {
"dev:child": "rollup -c rollup.config.js -w --for_type child",
"dev:parent": "rollup -c rollup.config.js -w --for_type parent",
"dev:sidebar": "rollup -c rollup.config.js -w --for_type sidebar",
My rollup config works but the issue is that rollup complains that for_type is a non recognised argument.
What is the proper way of injecting custom arguments to rollup?
I cannot see anything here: https://rollupjs.org/guide/en/#configuration-files
When you export a function instead of an object in rollup.config.js, the first argument of the function will be a CLI arguments object. For example, if you config is:
export default cliArgs => {
let build = {
input: 'src/index.js',
output: [/* ... */],/
plugins: [/* ... */]
};
switch (cliArgs.for_type) {
case 'child':
// Customise build for child
break;
case 'parent':
// Customise build for parent
break;
case 'sidebar':
// Customise build for sidebar
break;
default:
// No CLI argument
break;
}
return build
};
Have another look at the documentation for more info.
From https://rollupjs.org/guide/en/#configuration-files
You can even define your own command line options if you prefix them with config:
export default commandLineArgs => {
if (commandLineArgs.configDebug === true) {
return debugConfig;
}
return defaultConfig;
};

Error when compiling Less in Gulp: `File not found with singular glob`

I'm working on a legacy site that has some pre-set-up Gulp commands.
I want to compile some .less files into .css. The existing script is as such:
gulp.task('less', function(){
return gulp.src('./src/css/less/app.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./src/css/'))
});
However, when I run this I get an error:
Error: File not found with singular glob: /src/css/less/app.less (if this was purposeful, use `allowEmpty` option)
I've checked all paths, all #import and directories and they're all ok.
I am using Gulp Local: 4.0.0, CLI: 2.3.0.
Would anyone know could be causing this?
Maybe later, but Gulp 4 has a new syntax for writing tasks.
Also, you have to fix the wrong path to the source file:
// gulpfile.js
const SRC = 'src';
const DIST = 'src';
function lessTask(cb) {
return src(SRC + '/less/app.less')
.pipe(less())
.pipe(dest(DIST + '/style.css'));
}
exports.default = series(lessTask);
# On terminal:
gulp

Gulp 4 watch all sass files, compile one

My file structure is:
sass
-main.sass
-variables.sass
-containers.sass
-buttons.sass
-helpers.sass
css
-main.css
In my main.sass file, I'm importing all the other sass files:
#import "variables";
#import "containers";
#import "buttons";
//etc...
In gulp I want to watch any changed scss file and compile only main.sass into main.css.
This is what I have:
var gulp = require('gulp');
var sass = require('gulp-sass');
function styles() {
return gulp.src('sass/main.sass', {
sourcemaps: true
})
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('css/'));
}
function watch() {
gulp.watch('sass/**/*.sass', styles);
}
var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);
The files are being watched but when I update one, the main.css file is not updated.
I believe one of your problems could be that you define a watching task via gulp.watch(...) but its reference is lost and so it never gets called. However, I don't really understand what you try to achieve with the call to parallel(). I'm currently working on a similar use case with a build script like the following:
var gulp = require('gulp');
function styles() {
return gulp.src('...')
.pipe(...)
.pipe(gulp.dest('...'));
}
exports.build = gulp.watch('...', styles);
This should be a minimal working example, just call gulp build.

VueJS use NPM Component in Browser using Browserify

I have a custom component in my page, defined as:
Vue.component('payment-page', {
template: '#payment-template',
data: function () {
return {
...
}
},
components: {
DatePicker
},
});
Now, in this component, I need to use a datepicker/daterange picker, of which I found this to be most helpful. It can be installed from NPM using npm install vue2-datepicker --save. I am using browserify so as to be able to use the datepicker in the browser, inside my component above.
For browserify, inside my main.js file I have this:
let DatePicker = require('vue2-datepicker');
then I use the command browserify main.js -o bundle.js to create my bundle.js file which I then import in my HTML file.
Problem is I always get the error Uncaught ReferenceError: DatePicker is not defined. Anything I'm doing wrong?

Running DOH on the command line with node.js

My first attempt to run tests using Dojo 1.8.3 on the command line with
node was thwarted by this error message:
../dojo/dojo.js:15
ode:function(){return _25;},guardCheckComplete:_37};};if(1){var _38=location.p
^
ReferenceError: location is not defined
The workaround is to use the uncompressed source instead of the release,
since the optimized version only seems to work in a browser. Next I tried a configuration script
// bootstrap.js
dojoConfig = {
baseUrl: ".",
packages:[{name: 'dojo', location: '../dojo_src'}],
deps: ['./ui_test.js']
};
require('../dojo_src/dojo.js');
And a simple test
// ui_test.js
dojo.require("doh.runner");
doh.register("test_1", [
function four_eq_4() {
var x = 4;
doh.is(x.toString(), "4");
}
]);
doh.run();
console.log("done.");
When I run the tests doh.run() does not seem to have an effect
$ node bootstrap.js
done.
My directory structure:
/app
bootstrap.js
ui_test.js
/util/doh
/dojo_src
What is the correct way to use DOH on the command line?
The answer is simple, but not obvious. Run with load=doh to invoke the test runner.
$ node bootstrap.js load=odh