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" idea came from native "outFile" option of tsconfig.json But "outFile" option can be used only for SystemJs and AMD "module".
It is very simple tool and it's used in our legacy project, which isn't hurry for bells & whistles ;)
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
Because I want to write code which will be easy to migrate to Vue 3.0
Relative paths are like a hell!
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).
Because I have SystemJs bundle from the box (but needs to fix it in my project).
No.
-
2015/10/28 Vue.js doesn't support templateURL. Why? That's why this project uses gulp-html-to-js & fix it result on dev/esm deploy.
-
2017/03/24 7 Ways to Define a Component Template in Vue.js by Anthony Gore.
On my opinion X-templates as script tag in html are not a good solution.
-
2016/03/19 You may not need Webpack by Ville M. Vainio.
-
2017/06/06 Vue + TypeScript Without a Module Bundler by Shawn Wildermuth.
-
2018/09/10 Building VueJS Applications with TypeScript by George Hanson.
-
2018/11/01 Modern Javascript Without a Bundler by Matt Allan.
-
2018/03/28 ES modules: A cartoon deep-dive by Lin Clark.
-
Importmaps supported by es-module-shims.
-
Today natively esm imports json files are supported only in nodejs (unflag) but not in browser (only in Blink & Chrome 91) =(
Another ways to read json in browser (not simple workarounds).
So we can use json configs only for nodejs processes, such as Express server with express-conf.node.json. Also tsconfig option '--resolveJsonModule' isn't supported in SystemJs modules.
- 2021/06/02 How to import JSON into JavaScript module by Marian Čaikovski.
- Using ttypescript-transformers ttypescript last updated to 1.5.12: 2021/04/30
- Way to add the '.js' file extension
- Another way: Zoltu ttypescript-transformer plugin but imports such as
from "./Greeter.conf"
or evenfrom './IamHeader.html'
are not supported. You shouldn't use dots in ts-files naming convention =(
- Another way: Zoltu ttypescript-transformer plugin but imports such as
- .js removed since SystemJS v0.20 & TSC is outputting invalid ES module code (that's why earlier I need to fix imports manually)
- 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 ofoutdir
option intsconfig.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!
- vue-multiselect used as script in
index.htm
&index.dev.htm
not in importmaps because imported only in tests.