One of the wonderful things about the rise of open source is the corresponding increase in framework and library options. One of the biggest disadvantages is the huge fragmentation caused by this increase in options.
After researching numerous various options and prototyping with several different frameworks / libraries, languages and build tools (Babel, TypeScript, Grunt, Gulp, Bower,Webpack, Aurelia, React, ad infinitum), I’ve found what I consider to be the best (read most likely not to be dead/deprecated within 6 months).
Truthfully, this is a fairly minimalist solution as it allows me to customize each project easily. It includes the following:
- A testing framework (Mocha + Chai — run-away community favorites)
- Build scripts (NPM scripts are powerful, cross-platform and minimalist)
- A bundler (Webpack -relatively easy, powerful, well-supported)
- A linter (TypeScript — okay, this is more a language than a linter but close enough)
- An initial project structure (it’s amazing how much time teams spend arguing about this)
- VS Code bindings (An excellent, minimalist, hackable editor)
So, without further ado, here’s how to use the template:
- clone the wet-template repository (WEbpack + Typescript – ‘wet’, get it?)
- From a shell / command prompt do the following:
- ‘npm install -dev’
- ‘code .’
- Create a new git repo in a separate folder
- Copy everything except the .git folder into your new repo.
- Modify the package.json in this new folder to account for your git repo, description, keywords, author, etc.
Dude, where’s my code
- src – All of your source code (TypeScript files) should be in the src folder.
- test – Tests, surprisingly, are placed in the test folder (again, TypeScript here).
- example – examples (html pages, etc.) are placed here. This folder can also be used for hosting an app if desired
Tips ‘n Tricks
Automatic Provisioning (typings)
In Visual Studio Code, press ctrl+shift+B (or ‘npm run build’ from a command line). This will build the example code so you can ensure everything works. The first time the build task runs, it executes the provision.js script which installs TypeScript typings and then removes itself from the build script of the package.json file so typings aren’t reinstalled every time you build.
I’ve included an html loader (commonly used for requiring templates in various front-end frameworks like vue.js)
wet-template is a minimalist project template for WebPack and Typescript — clone it, npm install it and go.