Welcome to weblogs.com.pk Sign in | Join | Help

Frontend Development–Browserify

Frontend Development Series

Vue.js Series

As the front-end code grow; we need an option to encapsulate our Javascript based work and need Javascript modules that only exposes required API. With this; we also need “Module Loaders” as Javascript had no notion of module and tracking module dependency and loading their Javascript files appropriately (loading jQuery before jQuery UI etc) can quickly become messy. Before Ecma Script 6 aka Ecma Script 2015; there were no standard way of defining modules; there were techniques or pattern and their respective loaders; Asynchronous Module Definition (AMD), CommonJS, Universal Module Definition (UMD) and System.register were popular. Node uses CommonJS format (require module thing). RequireJS and SystemJS are popular module loaders, RequireJS uses AMD and SystemJS supports AMD, CommonJS and UMD

ES6/ES2015 has now its own native module format and can load the modules accordingly, but sadly loading the modules are not supported in the browser. This is where Module bundlers comes; they work as Module Loader but by bundling the app and its module into a single Javascript file that we can then load into the browser like any traditional Javascript file. Browserify and Webpack are popular Module bundler.

For this post; lets make a simple Vuejs component; but first lets try to use Vuejs as an EcmaScript module; for this we will need something like this

vue-1

  • Note that for Vuejs we need to include it from the dist folder as we are not compiling the “View” and NPM default Vue package only includes the “Runtime” component and not (View) Compiler

To compile our EcmaScript module and “bundle” Vue and our Javascript app into single file so we can load it into the browser; we will need Browserify for bundling; Babelify (that uses Babel) to transpile the ES6/ES2015 code and an associated Babel Preset; so we can use the app in our dear good old Internet Explorer as well. We can add required NPM packages as development dependencies (—save-dev while installing) and have the following gulp task that browserify, transform using babelify (that will use babel to transpile using es2015 preset), bundle and save the file as a single Javascript file into the Scripts folder from where we are loading it into the browser

vue-2

Above our own code was not a Module; we were just using Vue.js as an EcmaScript Module. There are other techniques like transpiling and loading the Javascript modules in the browser; but for us, people coming from .NET background; gulp suits more as it fit perfectly with building the ASP.NET project and using the Task Runner’s option of mapping Gulp tasks into .NET project’s Build step that we saw in the previous post.

Vue.js has an interesting Single File Component option; in which we can have CSS, our View HTML and required Vue.js based Javascript code in the single .vue file that we can “consume” with Webpack and Browserify bundlers (build tools). The .vue file has three section, <style></style> section having the CSS style code for the component, the <template></template> section having the HTML code for the view and <script></script> section having the Javascript code. We can use pre-processors to write the CSS and View code in their required format. Here is one such simple .vue single file component

single-file-component

  • Note that we still need a Javascript file that is loading Vue and our Single File Component (as ES Module) and gluing them into the HTML/ASPX page using the global Vue instance like before; such Javascript module / code is generally called boot-loader that is establishing the environment that all subsequent code requires to run and it is the entry code that will get executed.

For .vue to work with our Browserify / Gulp setup; we need Vueify; that is a Browserify transform for Vue.js components. NPM install it and use it the browserify() call in the gulp task

single-file-component-gulp

  • The order of transforms is important; we first need to babelify and then vueify while browserify-ing :)
  • We also need babel-plugin-transform-runtime; its a Babel Transform Runtime that Vueify uses

We can now re-write our Validation work from the previous Vue.js post as a single file component

We need to load the vee-validate as ES module and use Vue.use() in our bootloader

vee-validate

  • VeeValidate uses the ES2015 promises; and even though we have transpile the code to ES5; we need the ES6 Promise Polyfill so our app can work in IE; a polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers, e.g., to support canvas (an HTML5 feature) in older browsers.

If we have multiple Javascript applications in a single “web project” needing common Javascript modules and we are bundling our frontend application we end up having these common modules repeating in the bundles increasing their size. For instance if we have two Vue apps; or .vue single file component; the Vue.js (and other common modules like VeeValidate) will get bundled repeatedly. To solve this; lets include the Vue.js file (and other such common modules) through Bower and add it into the HTML/ASPX page like very begining so we have a single Vue.js file

Vue-bower

Next we need to instruct Browserify not to bundle the Vue component when it comes across it; this is done using Browserify-Shim. Its shims a non CommonJS module using with an identifier under which the module has attached itself with the global window object. For example jQuery attaches with $ and Vue.js as Vue. Browserify-Shim is a Browserify Transform and instead of configuring it in the Gulpfile like we have been doing till now; I am configuring it using the Package.json. This is a popular technique that instead of configuring the module when being called; we set its configuring in the NPM package.json file from where the module picks up its configuration when invoked anywhere in the application.

vue-shim

  • Note that I am Browserify-ing our two .vue single file component individually in the Gulp task; we can have the .vue files and their bootloaders in a single folder and can write a gulp task that process each files in the specific folder instead of writing gulp task code for each component. Refer to https://stackoverflow.com/questions/40273966/gulp-bundle-browserify-on-multiple-files for such solution
  • Note that I am copying Vue.js file from the bowser_components to Script folder where ASPX/HTML is expecting it in the Gulp Task

But before we do this; lets refactor our two browserify()s; we are doing babelify transform that is doing Babel with es2015 preset; we can refactor it; and use Babel’s .babelrc configuration file. These dot files is another popular configuration technique for the Node modules. Bower also support dot configuration file; .bowerrc

babelrc

We learned about Javascript Modules, ES6’ native module support and why we need to transpile it using Babel and how Babel uses preset to target its transpilations. Why we need Browserify and how we do its transforms and use Babelify and Vueify. How we can use BrowserifyShim to not include common modules across multiple applications and instead include them ourselves to keep the bundles of our applications small and including common modules ourselves in ASPX/HTML. We also saw two popular approaches of Node modules configurations; the package.json and dot configuration files.

The code is available in vue branch @ https://github.com/khurram-aziz/WebApplication47

Happy Javascripting!

Published Sunday, December 10, 2017 7:31 PM by khurram

Comments

No Comments

New Comments to this post are disabled