Is it possible to mix AMD and CommonJS modules within same Typescript project

Question

I'm trying to integrate Durandal with node.js server using Typescript for defining modules both on server and client side.

The problem I've encountered is that Durandal is strongly dependent on RequireJS and AMD style of defining modules that I would like not to introduce on the server side, and since it uses RequireJS I don't have any chance to run CommonJS-ish modules on the client (default for node.js).

The final nail in the coffin is that I found no way of defining which files should be compiled as AMD modules and which one as CommonJS by tsc - it seems like a simplest solution.

I don't think separating client part and server part is an option, since a lot of code will be common to both parts.

So, my question is threefold:

• is there a way to mix AMD and CommonJS modules in the same Typescript project (preferably using NodejsTools)

• if not, is there a way to force Durandal to work with CommonJS files to load views/viewmodels and so on

• if none of this is possible is it possible (and wise) to use AMD modules on node.js server

Any ideas are highly appreciated

Lustig

Answer 1

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

Receive

Note: I just updated that demo to be even more awesome – Receive

Answer 2

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:

/MyModule
myModule.ts
myModule.d.ts
myModule.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

UMD (Universal Module Definition)

Browserify

amdefine

RequireJs in Node

Requirejs LOADING MODULES FROM COMMONJS PACKAGES

Toothpick

Answer 3

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 )

Ambidexter

Answer 4

Just create 2 copies of *.njsproj file. One copy for the server and one for the client side code. In the client project only keep public and view (exclude everything related to the server). Keep only what relates to the server in the server-side project. Make sure the client's project has AMD and the server's has CommonJs. Enjoy!

Loxodromics