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.
Currently supported Node.js is latest version 6 LTS.
instapack works with Node.js version 8.3, which is really fast. That said, it will be supported once LTS build is released in October 2017.
yarn global remove instapack # "yarn link" does not work...npm install -g instapackgit clonecd .\instapack\yarn # package restore...npm link # symlink global to local package for developmentnpm run build # alternatively, "yarn global add typescript" then "tsc"
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!
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.
Internally, instapack uses the following modules:
node-sass as the compiler service, syntax checker, and minifier for the CSS language. It is also configured to enable
Autoprefixer for applying automatic CSS vendor-prefixes.
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.
angular-bootstrap 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 file will cause the said file to be minified and then stringified. This is handy when working with HTML-based templates for AngularJS and Mustache / Handlebars.
In addition, build flags are available:
--watch for enabling compilation on change.
--dev for disabling minification, for fast compilation.
--unmap for disabling source maps, for slightly faster compilation.
-udw shorthand for
watch mode together, amusingly named as Unlimited Dev Works mode.
-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.
Remove files in the output folders.
instapack puts configuration inside
package.json to reduce project files clutter. For example, this is the included
instapack:input allows setting the input folder name. By default, it is set to
instapack:output allows setting the output folder name. By default, it is set to
instapack:concat allows packing browser libraries to be consumed directly from
<script src="..."> rather than as a module. The file names will be resolved node-style (but NOT their contents), which allows concatenating packages downloaded from
npm to be bundled, minified, and then placed into the output JS folder. For example: (produces
For consuming the libraries within the application code, load them before
bundle.js, then reference the library objects from the globally exposed variables via window object. (e.g. access jQuery using
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.
Add the packages required for your project using yarn / npm then 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 templates and books for those projects. We'd love to expand our collections. :)
ES Decorators themselves are on Stage 2 proposal (draft).
You'd be crazy to develop an application using THAT.
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.
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