Is it possible to mix AMD and CommonJS modules within same Typescript project
is there a way to mix AMD and CommonJS modules in the same Typescript project (preferably using NodejsTools)
Yes. Use grunt-ts. See https://github.com/basarat/demo-fullstack/tree/master/src specifically the gruntfile common files : https://github.com/basarat/demo-fullstack/blob/master/src/Gruntfile.js#L4-L6 commonjs : https://github.com/basarat/demo-fullstack/blob/master/src/Gruntfile.js#L26 amd : https://github.com/basarat/demo-fullstack/blob/master/src/Gruntfile.js#L37
This is more of a long comment than an answer
I've been looking at the same problem, and I did try grunt-ts ,gulp-ts, Webstorm file watchers, cmd line scripts , Everything but Visual Studio as I 'm afraid to rely on the IDE for the build process (Webstorm watchers are an exception as its the same as a grunt or any other watcher, easy to replicate , and its just handy to try configurations);I'm currently using internal modules but compiling only the 'exporting' modules with file filters (extension based ,is the cleaner)and tsc load the chain when they are referenced ;
I have different output targets based on what I'm trying to achieve, as in node, browser, angular, testing, mocha, jasmine, etc...
like in:
/MyModulemyModule.tsmyModule.d.tsmyModule.mdl.ts (exports amd)myModule.export.ts (exports commonjs)myModule.test.ts (exports mocha test, no KARMA!)etc... not relying on Ts ' export module' ability
It works but ...But I'm not 100% happy , to many files .... it smells ... too many targets Gruntfile is difficult to read(too big) , I need to remember or document how it works until I got the time to fully automate it (if reasonably possible)
I think the options below make more sense on DRY and KISS sense but I'm also not 100% sold on the boilerplate needed.
Typescript modules should be templatable so when they compile the module could have the 'shape' I want without to rely on extra build steps
Some Options to don't need to compile multiple targets , or file duplication
It should be possible to mix require based AMD files and common js. Your html page would then include scripts similar to the following:
<script src="/tscode_common/common_js_file.js"></script><script data-main="/tscode_amd/tscode_amd_config.js" type="text/javascript" src="lib/require.js"></script>But a specific TypeScript project can only be AMD or common js - as the compiler options are per project.
A solution to this issue may be to nest TypeScript sub-projects (.prj) in sub-directories of your main web application something like the following:
+- / (base directory for web application )+- /main_app.prj ( main web app project file )+- index.html+- /tscode_common/ ( put all common js files here )+- /tscode_common/common_js.prj ( project file with commonjs options)+- /tscode_common/common_js_file.ts (common ts files )+- /tscode_amd/ ( put all amd files here )+- /tscode_amd/amd_js.prj ( project file with amd options )+- /tscode_amd/tscode_amd_config.ts ( require config file )+- /tscode_amd/amd_js_file.ts ( amd ts files )