npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

karma-typescript-preprocessor2-without-gulp-utils

v2.0.0

Published

Leverage the power of gulp-typescript compiler to a simple yet powerfull karma preprocessor plugin

Downloads

7

Readme

Transpile files in memory using gulp-typescript. No temp files are generated.

NPM


This preprocessor uses gulp-typescript transpiler, a great plugin mainted by ivogabe and other 21 contributors. Among its best features we highlight:

  • Very fast rebuilds by using incremental compilation
  • Very good error reporting handle

How to install

First you need to include reference to this plugin in your package.json, just write karma-typescript-preprocessor2 (note number 2 at the end):

  {
    "devDependencies": {
      "karma": "^0.13.15",
      "karma-typescript-preprocessor2": "1.2.1"
    }
  }

You can also install via cli:

$ npm install karma-typescript-preprocessor2 --save-dev

Configuration Options

Here is a full featured example with all options that you can use to configure the preprocessor:

// karma.conf.js 
module.exports = function(config) {
  config.set({
    files: [
      '**/*.ts'   // Preprocessor will convert Typescript to Javascript
    ],
    preprocessors: {
      '**/*.ts': ['typescript', 'sourcemap']   // Use karma-sourcemap-loader
    },
    typescriptPreprocessor: {
      // options passed to typescript compiler 
      tsconfigPath: './tsconfig.json', // *obligatory
      compilerOptions: { // *optional
        removeComments: false
      },
      // Options passed to gulp-sourcemaps to create sourcemaps
      sourcemapOptions: {includeContent: true, sourceRoot: '/src'},
      // ignore all files that ends with .d.ts (this files will not be served)
      ignorePath: function(path){ 
       return /\.d\.ts$/.test(path);
      },
      // transforming the filenames 
      // you can pass more than one, they will be execute in order
      transformPath: [function(path) { // *optional
        return path.replace(/\.ts$/, '.js');
      }, function(path) {
         return path.replace(/[\/\\]test[\/\\]/i, '/'); // remove directory test and change to /
      }]
    }
  });
};
//tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "amd",
    "noEmitOnError": false,
    "removeComments": true,
    "sourceMap": true,
    "listFiles": true,
    "experimentalDecorators": true,
    "outDir": "wwwroot",
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "artifacts"
    ".git",
    ".vs"
  ]
}

By design karma-typescript-preprocessor2 only allows primary configuration build by tsconfig.json . Working this way, a lot of problems with typos and references are completely solved, as compiler will use same basedir to resolve files, but you can always override (or include) new options by using compilerOptions property.

Unsuported typescript configuration options

As we use gulp-typescript to transpiler typescript code, we have the same unsuported properties as theirs, so:

  • Sourcemap options (sourceMap, inlineSources, sourceRoot)
  • rootDir - Use base option of gulp.src() instead.
  • watch - Use karma singleRun: false configuration instead.
  • project - See "Using tsconfig.json".

And obvious ones: help, version

Sourcemaps

Transpiling with gulp-typescript requires the use of gulp-sourcemaps to create sourcemaps.

Plugin Options

Below there are list of plugin options

transformPath: (string)=> string | ((string) => string)[]

default value:

function(path){
 return path.replace(/\.ts$/, '.js');//replace .ts to .js from virtual path
}

It is used to change virtual path of served files. Sometimes it should be necessary to change virtual directory of a served file to allow tests, example:

Let's suppose that you have the following folder hierarchy:

\basedir
 \wwwroot
  module
     file1.js
     file2.js
 \src
   module
     file1.ts
     file2.ts
 \test
   module
     file1.spec.ts
     file2.spec.ts

If file1.spec.ts and file2.spec.ts reference file1.ts and file2.ts, and you are using typescript module option, you will need to remove virtual directory test, so all modules referenced by *.specs.ts will be solved successfully. To make it work, you just need to write something like:

// karma.conf.js 
(...)
typescriptPreprocessor: {
  // options passed to the typescript compiler 
  tsconfigPath: './tsconfig.json', //*obligatory
  compilerOptions: {//*optional
    removeComments: false
  },
  // transforming the filenames 
  // you can pass more than one, they will be execute in order
  transformPath: [function(path) {//
   return path.replace(/\.ts$/, '.js'); // first change .ts to js
 }, function(path) {
   return path.replace(/[\/\\]test[\/\\]/i, '/'); // remove directory test and change to /
  }]
}
(...)

Here there is a simple example seed where you can see what is described here in action.

ignorePath: (string)=> boolean

It could be used to ignore files that you don't want to serve. Keep in mind that ignorePath runs before transformPath

default value:

function(path){
 return /\.d\.ts$//.test(path);
}

sourcemapOptions: any

Specify gulp-sourcemaps write options. Inline sourcemaps are the easiest to configure for testing. For more info see gulp-sourcemaps write options.

compilerOptions: any

You can provide or override any compiler options avaliable by gulp-typescript, for more info you can access gulp-typescript project options.

License

karma-typescript-preprocessor2 is licensed under the MIT license.

Need help? Open an issue :)