Skip to content
This repository has been archived by the owner on Aug 28, 2019. It is now read-only.

@owlpkg/typescript-loader - TypeScript Webpack Loader

License

Notifications You must be signed in to change notification settings

eddyw/owlpkg-typescript-loader

Repository files navigation

Webpack TypeScript Loader

A TypeScript loader for Webpack:

Install

npm install --save-dev @owlpkg/typescript-loader

Install with TSLint Support

npm install --save-dev @owlpkg/typescript-loader tslint tslint-language-service

Usage (with tsconfig.json)

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        include: path.resolve('src'),
        exclude: /node_modules/,
        use: [
          {
            loader: '@owlpkg/typescript-loader',
            options: {
              tsconfig: './tsconfig.json',
              cache: true
            }
          }
        ]
      }
    ]
  }
}

Usage (with jsconfig.json)

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        exclude: /node_modules/,
        use: [
          {
            loader: '@owlpkg/typescript-loader',
            options: {
              jsconfig: './jsconfig.json',
              cache: true
            }
          }
        ]
      }
    ]
  }
}

Usage (with HappyPack and TSLint)

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        include: path.resolve('src'),
        exclude: /node_modules/,
        use: [
          {
            loader: 'happypack/loader',
            options: {
              id: 'buildMyApp'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'buildMyApp',
      verbose: false,
      loaders: [
        {
          loader: '@owlpkg/typescript-loader',
          options: {
            tslint: './tslint.json',
            tsconfig: './tsconfig.json',
            cache: true,
          }
        }
      ]
    })
  ]
}

Loader Options

Name Type Default Description
tsconfig {string} './tsconfig.json' Path to TSConfig File (It cannot be used together with jsconfig option)
jsconfig {string} undefined Path to JSConfig File (It cannot be used together with tsconfig option)
tslint {string} undefined Path to tslint.json file
tslintFormatter {string} undefined Transform emitted result using a tslint formatted as specified in tslint/formatters
cache `{boolean Object}` false
getCustomTransformers () => ({ before?: TransformerFactory[], after?: TransformerFactory[] }) () => ({}) Provides custom transformers. For instance, typescript-plugin-styled-components

Important!

Only the compilerOptions in your tsconfig or jsconfig file are taken into account for compilation. It's important to specify the exclude and (optionally) the include properties in the loader.

Contributing

This is a young project and a work in progress (but stable). So, it needs help. Please, feel free to contribute.

License

MIT License

Inspiration

(It's at the end of the README, so you don't have to read it if you don't want to)

I started to write this loader to improve build time and build time in incremental builds in my own projects. It was inspired in ts-loader, HappyPack and cache-loader mainly. In fact, the internal built-in cache shares (almost) the same code base as cache-loader.

The idea, VSCode is able to display diagnostic errors almost immediatly after you open the editor (even in big projects). I figured that if I build the loader as if it were a Code Editor such as VSCode, I should figure out a way to implement Type Checking only for the watched files. Here is a helpful link: Using the Compiler API

Technically, every file that is being transpiled is added to a list of watch-files. So, by watching files we are able to detect changes even before webpack calls the loader and transpile the source in the background and make the transpiled code and diagnostics available when the loader is called. This decreases build time in incremental builds or Webpack Watch Mode.

TSLint runs as a TypeScript Language Service Plugin, so there is no need for a separate loader or run a separate process for it. It works within the TS Compiler (to say in a way) and the errors and warnings are part of the TS diagnostic messages as well.

The cache (based on cache-loader), keeps the last result of a transpiled file and its diagnostics, so restarting Webpack loads the previously saved result from the cache. If no files were changed, then build time is really fast. However, if a file was changed, that file is transpiled but the unchanged files are served from cache.

About

@owlpkg/typescript-loader - TypeScript Webpack Loader

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published