Warning: No baby photos on this one sorry!
Working on Swrl List 2 (https://swrl-list.herokuapp.com and https://play.google.com/store/apps/details?id=co.swrl.List2) has been a fun learning experience into client side JavaScript (as well as Cordova, see previous blogs: Cordova to the rescue!, Deploying Cordova apps to Heroku and Cooking with Firebase: an ode to Cordova plugin hell).
Coming from more of a server side background, I’m used to writing code in “classes” (or “namespaces” for Clojurians), importing them across files and keeping things organised. And in JavaScript too I would do this for nodeJs, using export.modules to achieve the same result.
Naively, I assumed I could simply do the same with client side Javascript and after finding results for import/export functionality, it looked like I could. After getting many console errors when trying this- I realised it wouldn’t just work- I would need to either add script tags for all files in my index.html (nah thanks) or “compile” my code.
Here comes Webpack to the rescue. To be honest I didn’t search and compare many options for this – I simply used the first thing which did what I wanted and it worked! I’ve read a few times on Twitter etc phrases like “I need to learn Webpack” – and honestly I’m either not using it right or I have no idea what they mean as it’s just a simple config file (all copied of course from various google searches).
This is my Webpack config:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
mode: 'production'
};
And that’s all there is to it!
I’m using 4 Webpack features:
- Javascript bundling: The
outputbit compiles (I keep saying compile, maybe transpile is a better word?) all my code to one file, including all dependencies which means it all works offline for Cordova Android! file-loader: I use typeface-raleway for my fonts, which means it’s all packaged into my bundle ready for offline appsstyle-loader: also needed for the typeface-raleway fontbabel. I needed this as the Cordova Android browser is a bit old and doesn’t support some ES6 features. Although I could write it all as ES5- I enjoy the ES6 syntax sometimes (like destructuring function array params). Babel magically transpiles all my code into ES5 code. Magic.
And there you have it- JavaScript written in a class like way and compiled/transpiled into a simple, offline capable, js file.
To see my code and have a laugh/cry see: https://github.com/mrkyle7/SwrlList2
Daddy Coder 
Aw, this was an extremely nice post. Spending some time and actual effort to generate
a very good article… but what can I say… Ihesitate a whole lot and don’t manage to get nearlpy anything
done.
LikeLiked by 1 person