Vue + TypeScript Without a Module Bundler

I’ve been feeling kind of old school lately. I’ve been pining for just writing client-side code and watching it work. That’s not the world that we’re in these days.

Writing web apps has become complicated. Transpilation has made some thing really awesome, but it also has complicated the field. Webpack, Browserify, Babel and even TypeScript have all make our lives easier and awful at the same time.

I loved this tweet about our current situation:

i remember the days when people still programmed in low-level languages such as untranspiled javascript

Reference Paths: are links to other .ts files that I’m referencing. I hate this hack, but it works for my needs. The trick here isn’t just a hint for intellisense, it also tells TypeScript in what order to compile the .ts files. Since the app.js needs the createValidators, createFilters, and createDatePicker to all exist before it runs, the TypeScript compiler will make sure they are defined higher in our one JavaScript file. I didn’t know it did this either ; )

module: Essentially just creates a namespace for me since I don’t want any of this code in the global scope.

declare var: This creates an variable that already exists. In this case, it’s my external JavaScript files. I could have opted to try and get the typelibs for TypeScript, but I didn’t care. I am used to developing against these libraries in JavaScript.

export: This is used to expose objects from the namespace (e.g. object like here, or functions, or classes).

My goal here was to have one set of TypeScript that would be loaded on any page that needed Vue. Each page would bootstrap itself to load that part of the Vue code it needed. For that I created a partial view in ASP.NET MVC:

So I’m loading different versions in development and production, but that little script at the bottom does the magic. It calls a bootstraper function that each vue implements (inside the CodeCamp namespace). For example:

Looking at the Code

So What?

I am not sure that this exercise was anything more than me pining for a time before the setup for getting started with a library didn’t require a CLI to scaffold a whole project. I’m not super happy with how this works (as I wish that the typelib stuff in TypeScript were easier to setup, but this might be a Vue problem; and I wish that there were an easy loader that would load scripts as they need them instead of the one giant file approach so I could use require and import better). But this is closer how I want to be working. I am just not sure how to get there.

At the end of the day I suspect I’ll end up with webpack and just live with the 100 lines of setup for webpack that every project needs. I just hate the way I spend more time setting a project up than actually writing code.

Feel free to flame me, but please avoid the lazy “webpack is awesome, you’re not doing it right” posts.

Ready to Learn Vue with ASP.NET Core?

Shawn's 4-hour course will get you up to speed in no time. Vue.js is a great middle-ground between React and Angular for people who don't like the complexity of Angular, and the overly componentized React. Learn today at Wilder Minds Training!