JimmyBoh JimmyBoh - 1 month ago 20
TypeScript Question

Compile typescript project as local module

tl;dr



Can I have typescript compile different folders as separate libraries, and import the results like a node module?




For example, I have a
common
folder with 800 files, and then a few
app
folders (
app1
,
app2
, etc) each with 20+/- files. All of the
app
folders have references to classes/interfaces/etc inside of the
common
folder. The problem is that whenever I compile an
app
folder it also compiles all 800 of the
common
files. This compilation takes too long and I'd really like to avoid it.

I have tested and confirmed this using
tsc --diagnostics --listFiles
in both
common
and
app1
.

I've tried using the
exclude
property in
tsconfig.json
to ignore the
common
folder, but it seems to have no effect. I've also tried multiple configurations of
baseDir
,
paths
, etc. within the
compilerSettings
, but to no avail.

noResolve
seems to almost achieve what I am looking for, but is that safe??

Is there a way to compile them separately and avoid recompiling the independent
common
project all the time?





Tech Stack:


  • Angular 2.0.1

  • SystemJS 0.19.39

  • Typescript 2.0.3

  • Windows 8.1

  • ASP.NET MVC6


Answer

Separate your common folder into a different project call common, and make it into a node.js modules, instruction here:

https://docs.npmjs.com/getting-started/creating-node-modules

Then in your original project, you do following:

Method 1

npm link <folder path of common>

Method 2

npm install <folder path of common> --save

Method 1 is easier to use as update to common is automatically reflected in the main project and don't have to worry about updating.

Method 2 is good if you plan to later publish it as a standalone npm package. However update to common will require manual update step in the main project.

In your common folder, make sure you create a .npmignore file. Let say your common project have following structure:

.                                                                                                                                                               
├── index.d.ts
├── index.js                                                                                                                                                    
├── lib/  <--- compiled location                                                                                                                               
├── node_modules                                                                                                                                                
├── package.json                                                                                                                                                
├── src/                                                                                                                                                         
├── tsconfig.json                                                                                                                                               
├── typings                                                                                                                                                     
└── typings.json

then your .npmignore should look like following:

.DS_Store
.git
.gitignore
examples
node_modules
npm-debug.log
src
tsconfig.json
typings
typings.json

You can check out my ng2-simple-mq as an example.

Comments