Frontend Workflow Toolbox Summary
2016-09-18 by terryoy, in guides
I'm working my job as a frontend developer currently. So I will do some research and write about the tools I've been using to develop Javasript frontend projects.
require() method to import, and “module.exports” to export, just like the way nodejs does.
When compiling, browserify will start with an entry file(e.g. './app.js'), then find the whole
abstract syntax tree of the file by static analysis, and pack all the related content into one files.
In order to make node modules more compatible with browser side, browserify also provides many builtins modules such as
The best part of browserify is that providing the static analysis and compiling platform, you can also have customized transformers for files other than the standard JS. This enables compiling coffee script or other favors, and also other plugins such as code coverage, in a pipe streaming way.
In bundling, browserify has two functions:
ignore, making a stub definition for some methods only available for node-specific modules
exclude, to separate files in different bundle, so don't pack the specific files
If you want to do something quick and dirty, just checkout the Gulp Recipes and copy the the code you want. The Recipes have prepare many examples of small tasks for you to reference.
- Gulp: github.com/gulpjs/gulp
- Gulp + Browserify Guide: www.viget.com/articles/gulp-browserify-starter-faq
- Gulp Recipes: github.com/gulpjs/gulp/tree/master/docs/recipes
- Principles of Gulp Plugin: github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/README.md
transformer in browserify and compile the files you have written in ES6, etc. The official web site says the main features about it:
- Babel Presets,
- Babel Polyfill, new globals such as Promise or new native methods.
- JSX and Flow support
- ES6: github.com/rse/es6-features
- Babel: babeljs.io/
- Babel Plugins(Presets, Stage-X, and Transform Plugins): babeljs.io/docs/plugins/
3.1 Coffee Script
3,2 Type Script
There are some terms in web frontend development that is not meaning obviously, so I collect some of them here.
Polyfill - a polyfill is cod e that implements a feature on web browsers that do not support it. It is a shim for a browser API.
Shim - A small library that transparently intercepts API calls. This term can be commonly used to support an old API in a newer environment, or a new API in an older environment, or running programs on a different platform than they were developed for.
glob) - A pattern that specifies a set of files with wildcard characters. It is originally a program
/etc/globthat look for files by patterns, then it is used in a lof of libraries in many language. The original word is short for 'global command'.