All-in-one web app client project compiler using TypeScript and Sass! 📦 🚀
npm install -g instapack
If you encounter errors during installation, try:
Running install as Administrator or using elevated privileges (sudo).
Or clear the npm cache:
npm cache clean --force then:
npm install -g instapack --no-optional
Or downgrade to npm 4 to avoid buggy npm 5:
npm install -g npm@4
Or use Yarn instead:
yarn global add instapack
cd E:\VS\MyWebAppipack new emptyipack
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 the latest version 8 LTS.
When using Visual Studio 2015 (Update 3 or above), install the latest TypeScript SDK for Visual Studio 2015.
If using the latest Visual Studio Code, it should come with the latest TypeScript support out of the box.
Hyper-opinionated web app client project builder with near-zero configurations. It just works. 💖
Built-in new project scaffold tool. 🎁
Rich debugging experience using DevTools: set breakpoints, view variable values, and step into the TypeScript source code directly in the browser! 🔍
Lower the barrier of entry for developing a modern web app. 👼
Introduce structure to the app client source code. 🏢
Improve source code quality and maintainability with type hints and compile-time checks. 👓
Enforce best practices when building apps, which may significantly impact page load time. (e.g. bundling and minification) ✈️
Unify team build system across multiple projects, for any frameworks. ✊
Blur the boundary between design time and coding time using lightning fast
dev compilation mode. ⚡️
Recently every f-ing framework on this planet 🌏 has their own CLI, but only few are able to support TypeScript out of the box. So most people gave up on TypeScript right off the bat... 💔
Powered by webpack, instapack effortlessly devours modules written using modern JS standards (ES Harmony, CommonJS, AMD, UMD) and is capable of importing HTML templates out of the box. instapack is battle-tested 🔪 and is designed to cover 99.99% normal use cases when developing a modern web app.
With this powerful tool, you can save time ⌚️, save precious SSD space 👾, and save yourself from the pain of manually maintaining project build scripts! ☕️
Out of the box, these files will be used as the entry points:
client/js/index.ts, compiled to
client/css/index.scss, compiled to
The Sass language compiler service has been configured to enable
Spiced with 🌶 PostCSS AutoPrefixer for applying CSS vendor-prefixes automatically!
Concatenate files listed in
package.json. Read more below.
You may use
ipk to invoke the command line interface.
Scaffolds a new instapack project into your existing app folder where the command line is invoked. The following templates are available:
empty when you need a minimal clean slate. Use this template to author new templates!
vue when you want to develop a web app with Vue.js and Bootstrap 4.
vue+ when you want to develop a web app with Vue.js and Bootstrap 4, plus 🔥 plugins (includes ASP.NET Core MVC validation) and pre-compiled template setup!
react when you want to develop a web app with React and Semantic UI.
inferno when you want to develop a web app with Inferno and Zurb Foundation.
angular-bootstrap when you want to develop a web app with AngularJS (1.X) and Bootstrap 3 (includes ASP.NET Core MVC validation).
angular-material when you want to develop a web app with AngularJS (1.X) and Material Design (includes Angular UI Router).
If no template parameter is provided,
vue will be chosen.
Performs compilation against selected project type. Available projects:
concat. If no project parameter is provided,
all will be chosen.
In addition, build flags are available:
--watch enables incremental compilation on source code changes.
--dev disables outputs minification for fast build!
--uncharted disables source maps. (Slightly improves build speed)
--parallel enables experimental parallel build across all CPU threads! 🔱
You can combine multiple build flags, for example:
watchmode for massive productivity gainz! 💪
Remove files in the output folders.
instapack puts configuration inside
package.json to reduce project files clutter. For example, this is the included
input allows setting the input folder name. By default, it is set to
output allows setting the output folder name. By default, it is set to
jsOut allows setting the JS output file name. By default, it is set to
cssOut allows setting the CSS output file name. By default, it is set to
alias allows overriding module
import calls from all files, including dependencies. Read more: https://webpack.js.org/configuration/resolve/
externals allows rewriting module
import calls from all files, including dependencies, to globally exposed objects via
window object. Read more: https://webpack.js.org/configuration/externals/
so CDN can be used! 🎉
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.
Use concatenation for libraries that cannot be imported / do not need to be imported (for example, jQuery plugins). This hybrid approach allows greater compatibility with older libraries, while enjoying the rich development experience using TypeScript.
You can also use concat to improve compile time by placing vendored modules out of the app code bundle!
For consuming the libraries within the TypeScript app code, load them before
bundle.js then use the
externals module configuration (declare a global TypeScript module definition if not a npm module).
Alternatively, reference the library objects directly from the
window object (e.g.
concat configuration example: (produces
template allows changing the compilation mode of the imported HTML templates to enable Ahead-of-Time Template Compilation for certain frameworks, for improved performance.
string exports templates as string modules. This is handy when working with HTML-based templates for AngularJS, Vue.js, and Mustache / Handlebars using CommonJS module import syntax:
require('./MyTemplate.html') as string
vue exports templates as modules containing
staticRenderFns properties to be passed into a Vue.js component options.
You will need to create a global TypeScript definition file for
*.htmlmodules in order to import a template using ES Module syntax!
Starting version 4.0.0, instapack follows Semantic Versioning.
Bi-weekly releases (usually on 14th and 28th date of each month) will be performed for updating package dependencies. Bug reports will be dealt promptly. These actions will increment the patch version.
New non-breaking features will increment the minor version. Breaking changes will increment the major version.
Occasionally, beta builds will be published (
instapack@beta) for showcasing the bleeding edge version of the tool.
Alternatively, you may build directly from the source code repository:
git clonecd instapacknpm link # symlink global to local package for developmentnpm run build # alternatively, `npm install -g typescript` then `tsc`ipack --version
You can even use jQuery or plain vanilla JS; don't worry, we're not gonna judge. 😄
Add the packages required for your project using yarn / npm then start hacking. We'll take care of the outputs.
Also, pull requests are welcomed if you have a great starting templates and books for those projects. We'd love to expand our collections!
Our supported Node.js runtime is now the latest version 8 LTS.
We have a new recommended
ipack new tsconfig in your project root folder (where the
tsconfig.json is located) to upgrade!
It uses a standardized
ES2015 module code generation instead of
It allows Synthetic Default Imports syntax for importing non-ES modules just like a default-exported ES modules!
We've changed the CSS input file entry point from
index.scss. Please rename the said file!
We've changed the default JS and CSS output file names to
Make sure to update your
<script src="..."> and
<link href="..." /> references in the HTML files!
If that action is prohibitive, simply use the new
cssOut options to emit output file names identical to instapack 4:
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 appear to 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 potential 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