All-in-one web application client project compiler using TypeScript and Sass!
yarn global add instapack
npm install -g instapack
But seriously, please use Yarn from now on. Check it out.
cd E:\VS\MyWebAppipack newipack
Programmable API is also provided if you wish to integrate
instapack into your very own build script:
const instapack = ;let ipack = ;ipack;
Practical guides can be read in books folder.
When using Visual Studio 2017, select the latest TypeScript 2.X SDK from the individual component list during setup.
Optional but highly recommended, install Python 2.
Hyper-opinionated web application client project builder with zero configurations. It just works.
Built-in new project scaffold tool.
Rich debugging experience using Google Chrome DevTools.
Lower the barrier of entry for developing a modern web application.
Introduce structure to the application client source code.
Improve source code quality and maintainability with type hints and compile-time checks.
Enforce best practices when building the application, which may significantly impact page load time. (e.g. bundling and minification)
Unify team build system across multiple projects.
Blur the boundary between design time and programming time using blazing fast
dev compilation mode.
Stand-alone command line interface allows shipping to
npm, which enables build system upgrade without altering
project.json in each applications.
High quality tooling supported by latest stable Node.js, using strictly curated, actively maintained dependencies.
At a glance,
instapack looks similar to
webpack. However, that is where the similarity ends because
instapack is not designed to replace
webpack. Here is an analogy to help to differentiate these build systems:
gulp is like a DIY PC that you can construct from scratch. Very powerful but requires effort to configure and maintain.
webpack is like a barebone PC that can be plugged-in with off-the-shelf components. Not very versatile but easy to configure and good enough for most people.
instapack is like a laptop borrowed from your company, batteries included. You are not expected to modify it.
Consider the following example: Michael wants to develop a web application using ES6. One of the following events usually happens next...
Michael's next project uses an evolved version of his build system. However, when he needs to maintain his older applications, he needs to upgrade the build scripts manually...
Michael's hard drive is now full because each project has its own build system. Ouch.
Suddenly, Jack from the other team of the same company develops his own build system. So does Evan.
instapack is developed as an answer those problems and more!
instapack uses the following modules:
gulp as task orchestrator and build pipeline.
node-sass as the compiler service and syntax checker for the CSS language. It is also configured to enable
postcss for applying automatic CSS vendor-prefix using
autoprefixer, then minifying the result using
Out of the box, the following files will be used as the application entry points:
client/js/index.ts, compiled to
client/css/site.scss, compiled to
Concatenate files listed in
package.json. Read more below.
Starting version 4.0.0,
instapack follows Semantic Versioning.
Bi-weekly releases will be performed for updating package dependencies. This will increment the patch version.
Bug reports will be dealt promptly. This will increment the patch version.
New non-breaking features, such as addition of new task pipeline, will increment the minor version.
Breaking changes, such as behavior or configuration changes to existing task pipeline, will increment the major version.
You may use
ipk to invoke the command line interface.
Scaffolds a new
instapack project into your existing application from where the command line is invoked. The following templates are available:
empty when you need a minimal clean slate. Use this template to author a new template!
aspnet when you want to develop an ASP.NET Core MVC project with Bootstrap + JQuery Validation Unobtrusive.
angularjs when you want to develop a component-based application with AngularJS, using Bootstrap.
angular-material when you want to develop a single-page application with AngularJS, using Material Design.
If no template parameter is provided,
aspnet is chosen.
Performs compilation against selected project type. Available projects:
concat. If no project parameter is provided,
all is chosen.
.html files will cause the said files to be minified and then stringified. This is handy when working with HTML-based templates for AngularJS and Mustache / Handlebars.
Obviously, the concatenated libraries must be referenced in your HTML before
bundle.js (e.g. access jQuery using
In addition, build flags are available:
--watch for enabling compilation on change.
--dev for disabling minification for speed compilation.
-dw shorthand for
dev mode together, for massive productivity.
-s [port number] or
--server 19991 for experimental server mode. Build artefacts will be served directly to http://localhost:port using GZIP compression without writing to folder / file system.
instapack puts configuration inside
package.json to reduce project files clutter. For example, this is the included
instapack:input allows setting the input folder location. By default, it is set to
instapack:output allows setting the output folder location. By default, it is set to
instapack:concat allows packing libraries from
node_modules or a custom folder (for example,
./client/lib/vue.js). The files will be resolved node-style, bundled, minified, and then placed into the output JS folder.
Yup, rock solid stable. Our team has used
instapack to ship multiple AngularJS projects to production.
The majority of developers using
instapack are working full-time on ASP.NET Core MVC projects on Windows with Visual Studio on daily basis. This use case will be the core focus for tooling support.
However, there should be no reason for
instapack to not to run on OS X and Linux.
instapack will not suddenly introduce Windows or Visual Studio exclusive feature, and strive to maintain compatibility with multiple platforms.
In fact, you can just add the packages required and start hacking. We'll take care of the outputs. We have also enabled
tsx compilation specifically for React in our templates'
Also, pull requests are welcomed if you have a great starting template for those projects. We'd love to expand our template collections. :)
Our management does not like experimental features.
Also, in IIS, HTTP/2 is only supported when using Windows Server 2016. Many of our customers are still using Windows Server 2012 R2 to date.
As a testament to TypeScript effectiveness,
instapack is fully written using TypeScript!
libsassis native and fast.
Sure thing. You can use
require to sequentially load external files. For example, in your
; // client/js/a.js; // client/js/b.js; // client/js/folder/c.js// As you may have guessed already, module.exports also works with this technique.// You can also load libraries from node_modules// Note that you still need to use window[...] to load libraries referenced before bundle.jsvar _ = ;var $ = window'$';
That said, TypeScript is the key for scaling your application while maintaining source code quality. Try it, it's not that hard!
Windows Defender or other anti-virus software apparently slow down package restore and IDEs when opening projects.
For this very reason, it is highly recommended to:
Add anti-virus exclusion to Yarn installation folder:
C:\Program Files (x86)\Yarn. To double check, type:
Add anti-virus exclusion to Yarn cache folder:
C:\Users\Ryan\AppData\Local\Yarn. To double check, type:
yarn cache dir.
Add anti-virus exclusion to NodeJS installation folder:
C:\Program Files\nodejs. To double check, type:
Add anti-virus exclusion to Git installation folder:
C:\Program Files\Git. To double check, type:
Use very short root folder name for projects, such as
D:\VS, to avoid problems with Windows system paths over 260 characters long. Then exclude the folder from the anti-virus.
Set-ExecutionPolicy RemoteSigned -scope CurrentUseriex (new-object net.webclient).downloadstring('')scoop install concfgconcfg import firefly