/systemjs-ts-es6-vue

Vue with Typescript but without Webpack/Rollup

Primary LanguageTypeScript

Vue Class Component starter (Typescript)

Pet project for bundling es-modules for modern browsers and SystemJs-modules for IE10 (and other). No Webpack or Rollup using, but warm tube Gulp ;)

Run project: npm run deploy && npm run www or npm run deploy.dev && npm run www.dev Run jest tests: npm run test

Without bundlers

"Without bundlers" idea came from native "outFile" option of tsconfig.json But "outFile" option can be used only for SystemJs and AMD "module".

Gulp?!

It is very simple tool and it's used in our legacy project, which isn't hurry for bells & whistles ;)

SystemJs actual documentation & code examples

ES-modules reduced SystemJS popularity, therefore web is full of articles about SystemJS 0.xx configuration and almost nothing about actual 5.0 version! If you want to use older one, just use 0.19 because of typescript issue.

SystemJS 6.x have upgrade blocked error and related, so 5.0

Why Typescript & vue-class-component?

Because I want to write code which will be easy to migrate to Vue 3.0

Aliases problem solved

Relative paths are like a hell!

Questions

Why such a different setup?

Because of we have legacy .Net project on typescript, and need to start migrate to Vue, and if we already have native transpiler tsc from Microsoft which supports outFile bundling feature from tsconfig. Why we need another bundler such as webpack or rollup?! outFile feature supported only for SystemJS or AMD modules, that's why this project based on SystemJS and not need in .vue overengineering (even with @vue/test-utils).

Why SystemJs and not RequireJs (AMD)?

Because I have SystemJs bundle from the box (but needs to fix it in my project).

You use JSX inside the components?

No.

Resources

Tsc esm resolving

How to resolve js suffix?

  • Way to add the '.js' file extension
    • Another way: Zoltu ttypescript-transformer plugin but imports such as from "./Greeter.conf" or even from './IamHeader.html' are not supported. You shouldn't use dots in ts-files naming convention =(
  • .js removed since SystemJS v0.20 & TSC is outputting invalid ES module code (that's why earlier I need to fix imports manually)

Outdated packages

  • systemjs since 6.0 has various errors:
    • #2016 and single bundle by tsc is not supported (error System is not defined).
    • since (?) >= v6.2.6 has named modules errors in case of using outfile (single bundle) instead of outdir option in tsconfig.json. Workaround for grading v5 to v6 is fixing relative paths of named systemjs modules to absolute & strange, but systemjs v6 don't know differences between import bundle file & entry point, fixed by imported only bundle file that have entry point =(
  • es-module-shims since 0.10.2 to 0.10.5 not working
  • vue-property-decorator 9.1.2 has not single file with all code!

External vue components

  • vue-multiselect used as script in index.htm & index.dev.htm not in importmaps because imported only in tests.