We Keep Coding

Ignore or replace dependencies' imports when bundling with Rollup

I'm bundling a JS library using Rollup. This lib has a dependency on #tensorflow/tfjs-core.
On tfjs's code, there's a function that fetches a URL. If it's in the browser environment, it uses the global fetch function; if it's not, it tries to import node-fetch.
Something among these lines:
fetch(path: string, requestInits?: RequestInit): Promise<Response> {
if (env().global.fetch != null) {
return env().global.fetch(path, requestInits);
}
if (systemFetch == null) {
systemFetch = require('node-fetch');
}
return systemFetch(path, requestInits);
}
My library is made to run in the browser, so it always uses the global fetch function. However, Rollup still bundles node-fetch's require in my lib's assets.
It should not be an issue, but some consumers are reporting errors when using the library in a React project that uses webpack:
Failed to compile.
./node_modules/[my lib]/index.js
Cannot find module: 'node-fetch'. Make sure this package is installed.
You can install this package by running: npm install node-fetch.
Question is: is there some way I can tell Rollup not no bundle this?
I thought about replacing the require('node-fetch') by undefined after the bundle is generated, but it feels like a dirty hack. Any other sugestions?
PS: I believe marking node-fetch as external on consumer projects would fix the issue, but since I do not use node-fetch in my lib, it would be nice to remove it from final output.

Other package managers can include or exclude files based on the environment, test, development, production, etc.
There is any number of ways of implementing this, even going so far as
# Makefile
ENVIRONMENT ?= test
ROLLUP = $(which rollup)
ENVSUBST = $(which envsubst)
rollup.config.js: src/$(ENVIRONMENT)
${ENVSUBST} < $# > $^
${ROLLUP} $^ -o $(ENVIRONMENT).js
If you created files named after your environments, you could compile them using
make -e environment=browser
I don't expect my code to work, only to express ideas.

There is this loc which is used to exclude node-fetch from the bundle. You could consider a similar approach in your rollup configuration. (I think) If you add that, node-fetch will/should not be a part of your minified library.

Deploy folder in CWD using Shipit JS

I'm trying to use shipit to deploy a dest/ folder which is already built on the file system (using gulp), but not checked out in git, to a remote.
However, rather than rsync'ing the existing directory to the remote, it tries to clone the repo in the workspace where my dest/ folder doesn't exist and fails.
Omitting the repositoryUrl option also causes this to fail.
Is there any way to achieve this using shipit? Or is it against the concept of shipit, and my dest/ folder should be built using their plugins?
My flow is:
Build from src/ -> dest/ (Gulp) -> Test -> Deploy dest/ to remote (shipit)
My shipit config:
default:
workspace: '/tmp/.shipit'
dirToCopy: './dest/'
repositoryUrl: git#gitlab.com:group/repo.git
...
staging:
servers: 'www-data#remote.com'
deployTo: '/path/to/ship/to/'

The solution was to be more specific with the deploy tasks which got ran, and specify the workspace as the current working directory like so:
default:
workspace: './'
dirToCopy: 'dest'
Only running the following tasks:
deploy:init
deploy:update
deploy:publish
deploy:clean
deploy:finish
I.e. removing the deploy:fetch task from the default task set.
This was made easier to achieve using the Shipit Captain module to integrate it with gulp.

Building Chart.js master - generated .js gives errors

I am getting an error when I work with a version of Chart.js master that I compiled myself. I must be missing some kind of dependency that I've missed in the documentation. I have no clue what .js I need to include.
When I move my mouse-cursor over the chart I get a bunch of errors related to a missing Color library. Which one am I missing exactly?
TypeError: i.color(...).saturate is not a function
Edit:
I have created a JSFiddle here: http://jsfiddle.net/o9ebb5sq/
This piece of code does not show the problem (using Chart 2.0.0-Beta). This is why I copied this release into my software and tried again. The problem I am describing disappears.
I am running a master build (created using 'gulp build') Which makes me think the problem is either present in git master, or it is caused by my build environment.
I have installed the following npm packages before I ran gulp build
gulp 3.9.0
gulp-concat 2.6.0
gulp-connect 2.2.0
gulp-html-validator 0.0.5
gulp-jshint 1.12.0
gulp-karma 0.0.5
gulp-replace 0.5.4
gulp-size 2.0.0
gulp-uglify 1.4.2
gulp-util 3.0.7
semver 5.0.3
karma 0.13.14
inquirer 0.11.0
I expect that maybe I am missing something here or that one of the packages I've used to build Chart.js has an issue.

In the package.json on 2.0 they have included a new dependency "color": "git://github.com/chartjs/color" you will also need to include this. Odd thing is they alias this to a helper
color = helpers.color = function(color) {
if (!window.Color) {
console.log('Color.js not found!');
return color;
}
return window.Color(color);
},
So I would have expected for you to see the log unless you already have something in the global namespace named Color.

How to set up minimal Aurelia project from scratch

When installing the Aurelia navigation skeleton app it is far to overwhelming with all the 3rd party modules and ready-made scripts it uses. For me who have a good picture of what most of it is in theory, have a hard time learning when I can't do it one step at a time. For this reason I would like to set up a minimal Aurelia project by myself and then add complexity to it as I go along.
Main question: Which steps are necessary to set up a simple Aurelia project?
Assumptions:
I already have a Node server backend that can serve files.
I want to use ES6/7 (Babel).
I want to use system.js for module loading.
No unit or e2e tests, no styles, no docs.
As few node and jspm modules as possible.
Please do also explain a little on each step and describe what the necessary Aurelia files is and does.
I would be very thankful for any help :)

Install the jspm command line interface. jspm is a package manager for client-side dependencies. Read up on it... it's great.
npm install jspm -g
Create a folder for the project.
mkdir minimal
cd minimal
Initialize jspm client package management...
Accept all the defaults EXCEPT use the Babel transpiler option (vs Traceur)
jspm init
Enable all the fancy cutting edge babel goodness by adding the following line to the babelOptions in your config.js (jspm init created the config.js file):
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"stage": 0, <------ add this to turn on the hotness
"optional": [
"runtime"
]
},
...
Install Aurelia
jspm install aurelia-framework
jspm install aurelia-bootstrapper
Create an index.html that uses the SystemJS loader (jspm's module loader counter-part) to bootstrap Aurelia.
<!doctype html>
<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
When Aurelia bootstraps it's going to look for a default view and view-model... create them:
app.js
export class App {
message = 'hello world';
}
app.html
<template>
${message}
</template>
Install gulp and browser-sync to serve the files:
npm install gulp
npm install --save-dev browser-sync
Add a gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
// this task utilizes the browsersync plugin
// to create a dev server instance
// at http://localhost:9000
gulp.task('serve', function(done) {
browserSync({
open: false,
port: 9000,
server: {
baseDir: ['.'],
middleware: function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}
}
}, done);
});
Start the webserver.
gulp serve
Browse to the app:
http://localhost:9000
Done.
Here's what your project structure will look like when you're finished:
Note: this is just a quick and dirty setup. It's not necessarily the recommended folder structure, and the loader is using babel to transpile the js files on the fly. You'll want to fine tune this to your needs. The intent here is to show you how to get up and running in the fewest steps possible.

Check the article https://github.com/aurelia-guides/aurelia-guides.md-articles/blob/master/Building-Skeleton-Navigation-From-Scratch.md written specifically to ease the introduction to Aurelia.

I created a repo (up to date as of April 2017) that includes the absolute barebones necessary items to run Aurelia at https://github.com/nathanchase/super-minimal-aurelia
It's an ES6-based Aurelia implementation (rather than Typescript), it incorporates
code-splitting by routes (using the latest syntax in Aurelia's router to designate chunk creation according to files under a route), and it works in all evergreen browsers AND Internet Explorer 11, 10, and 9 thanks to a few necessary included polyfills.

The Aurelia documentation has a really nice chapter that explains what each part of a simple application does, one step at a time. It is probably a good start that do not overwhelm you with dependencies like Bootstrap and similar.
Also note that there is now a CLI interface to Aurelia that simplifies setting up a project from scratch.

I would definitely use the aurelia-cli for this.
Do the following:
npm install -g aurelia-cli
Then to start a new project do:
au new project-name
to run your project do:
au run --watch
I really feel the aurelia-cli "is the future" for aurelia!

I'm working with a Java Play project and still want to use the scala conversion of HTML file. Thus, I did the following
Download aurelia-core available via the basic aurelia project, which is linked from the quickstart tutorial
Fetch SystemJS using WebJars: "org.webjars.npm" % "systemjs" % "0.19.38"
Since systemjs-plugin-babel is currently unavailable as webjar, I ran npm install systemjs-plugin-babel and copied the fetched files to the assets directroy
The HTML code is like this:
<div aurelia-app="/assets/aurelia/main">
...loading data...
</div>
<script src="#routes.Assets.versioned("lib/systemjs/dist/system.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("javascripts/aurelia-core.min.js")" type="text/javascript"></script>
<script>
System.config({
map: {
'plugin-babel': '#routes.Assets.versioned("javascripts/systemjs-plugin-babel/plugin-babel.js")',
'systemjs-babel-build': '#routes.Assets.versioned("javascripts/systemjs-plugin-babel/systemjs-babel-browser.js")'
},
transpiler: 'plugin-babel',
packages: {
'/assets/aurelia': {
defaultExtension: 'js'
}
}
});
System.import('aurelia-bootstrapper');
</script>
Use main.js etc. from the quickstart tutorial

How to use npm modules on grunt?

Earlier when I was using node.js without grunt I had to simply write the following code to include an external module.
var express = require('express');
After I switched to grunt I am trying to use the following module qr-image.
I am stuck with the use of this module as whenever I use the following command my code breaks.
[ This is as per an official example. ]
var qr = require('../');
To Install this module in my node_modules directory I changed the package.json by adding the following dependency in
"devDependencies": {
.
.
.
"qr-image": "^2.0.0"
},
And then ran npm install command at the root directory level of my app.
Thus, Stuck with the implementation of this node.js qr-image module on grunt. Any help will be appreciated.

I believe the right way to do this is:
var qr = require('qr-image');
You can find an example in the project's readme.