typescript-webpack-compatibility-plugin v1.3.0

typescript-webpack-compatibility-plugin

A typescript custom transformer to compatible with webpack loaders.

Abstract

This module is a custom transformer for TypeScript, it:

• transform css/less/scss files import statement to empty
• transform image/video/... files import statement to url or base64 string

Install

yarn add -D typescript-webpack-compatibility-plugin
# or var npm
npm i -D typescript-webpack-compatibility-plugin

Quick Start

1. compile with ttypescript, you need to configure your tsconfig.json:

   {
     "compilerOptions": {
       "plugins": [
         {
           "transform": "typescript-webpack-compatibility-plugin",
           "options...": "values..."
         }
       ]
     }
   }

2. compile with webpack, you need to configure with your webpack.config.js:

   import { createWebpackCompatibilityTransformer } from 'typescript-webpack-compatibility-plugin';
   export default {
     // ...
     module: {
       rules: [
         {
           test: /\.tsx?$/,
           loader: 'ts-loader', // or awesome-typescript-loader
           options: {
             getCustomTransformers: (program) => ({
               before: [
                 createWebpackCompatibilityTransformer(program, {
                   // options
                 }),
               ],
             }),
           },
         },
       ],
     },
   };

Options

import { HexBase64Latin1Encoding } from 'crypto';

export interface WebpackCompatibilityTransformerOptions {
  // these statements will be replaced by empty line
  // if is string, will be converted to RegExp
  // default is /\.(css|less|scss)$/
  removeImports?: string | RegExp;

  // the statements will be replaced by url of the target file
  // if is string, will be converted to RegExp
  // default is /\.(jpg|png|gif|mp3|mp4|svg|wav|ttf|ott)$/
  urlImports?: string | RegExp;

  // if the file is large than the value, will be converted to url
  // else will be converted to base64 string
  // default is 5120 (5K)
  urlLimit?: number;

  // the url template of the asset, the key flag is [:flag]
  // the :flags only supports `name`, `ext`, `hash:<len>?` currently
  // default is '"/static/[name].[hash:8].[ext]"'
  //
  // other example:
  // '__webpack_require__.p + "/static/[name].[hash:12].[ext]"'
  // if you use this, you need to set the global variable `__webpack_require__`
  // correctly before import the module.
  urlTemplate?: string;

  // the hash algorithm to generate url, default is sha1
  hashAlgorithm?: string;

  // the digest algorithm to stringify hash buffer, default is hex
  // if it is base64, url-unsafe chars will be replaced with:
  // + -> -
  // / -> _
  // and = suffix will be trimmed.
  digest?: HexBase64Latin1Encoding;
}

License

MIT