Browserify plugin for compiling TypeScript files with seamless integration and incremental compilation support
—
Comprehensive configuration options for tsify, including TypeScript compiler options and tsify-specific settings.
Complete configuration interface supporting all TypeScript compiler options and tsify-specific settings.
interface TsifyOptions {
// tsify-specific options
/** Files/patterns to exclude from compilation */
exclude?: string[];
/** Explicit list of files to compile */
files?: string[];
/** Whether to set up as global transform */
global?: boolean;
/** Files/patterns to include in compilation */
include?: string[];
/** Short form for module option */
m?: string;
/** Short form for project option */
p?: string | Record<string, any>;
/** Path to tsconfig.json file or directory, or inline tsconfig object */
project?: string | Record<string, any>;
/** Short form for target option */
t?: string;
/** Custom TypeScript compiler reference */
typescript?: string | typeof import('typescript');
// TypeScript Compiler Options (commonly used)
/** Allow JavaScript files to be compiled */
allowJs?: boolean;
/** Allow importing modules with .json extension */
allowSyntheticDefaultImports?: boolean;
/** Allow default imports from modules without default export */
esModuleInterop?: boolean;
/** Ensure consistent casing in file names */
forceConsistentCasingInFileNames?: boolean;
/** Enable all strict type checking options */
strict?: boolean;
/** Raise error on expressions and declarations with implied any type */
noImplicitAny?: boolean;
/** Raise error on this expressions with implied any type */
noImplicitThis?: boolean;
/** Report errors for fallthrough cases in switch statements */
noFallthroughCasesInSwitch?: boolean;
/** Report errors on unused locals */
noUnusedLocals?: boolean;
/** Report errors on unused parameters */
noUnusedParameters?: boolean;
/** Enable strict null checks */
strictNullChecks?: boolean;
/** Enable strict function types */
strictFunctionTypes?: boolean;
/** Enable strict bind/call/apply methods */
strictBindCallApply?: boolean;
/** Enable strict property initialization checks */
strictPropertyInitialization?: boolean;
/** JSX code generation */
jsx?: 'preserve' | 'react' | 'react-jsx' | 'react-jsxdev' | 'react-native';
/** Specify JSX factory function */
jsxFactory?: string;
/** Specify JSX fragment factory function */
jsxFragmentFactory?: string;
/** Module system */
module?: 'commonjs' | 'amd' | 'system' | 'umd' | 'es6' | 'es2015' | 'es2020' | 'esnext' | 'none';
/** Module resolution strategy */
moduleResolution?: 'node' | 'classic';
/** ECMAScript target version */
target?: 'es3' | 'es5' | 'es6' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'esnext';
/** List of library files to include in compilation */
lib?: string[];
/** Base directory for resolving non-relative module names */
baseUrl?: string;
/** Path mapping entries for module resolution */
paths?: Record<string, string[]>;
/** Allow accessing UMD globals from modules */
allowUmdGlobalAccess?: boolean;
/** Remove comments from output */
removeComments?: boolean;
/** Emit design-type metadata for decorated declarations */
emitDecoratorMetadata?: boolean;
/** Enable experimental decorators */
experimentalDecorators?: boolean;
/** Skip type checking of declaration files */
skipLibCheck?: boolean;
/** Do not emit outputs if any errors were reported */
noEmitOnError?: boolean;
/** Preserve const enums in generated code */
preserveConstEnums?: boolean;
/** Do not erase const enum declarations */
isolatedModules?: boolean;
/** Import emit helpers from 'tslib' */
importHelpers?: boolean;
/** Downlevel iteration for ES5/ES3 */
downlevelIteration?: boolean;
/** Enable incremental compilation */
incremental?: boolean;
/** Specify file to store incremental compilation information */
tsBuildInfoFile?: string;
}tsify reads configuration from multiple sources in order of precedence:
Automatic tsconfig.json Detection:
// tsify automatically finds tsconfig.json in current directory or parent directories
browserify()
.add('src/main.ts')
.plugin(tsify) // Uses tsconfig.json automatically
.bundle();Custom tsconfig.json Path:
browserify()
.add('src/main.ts')
.plugin(tsify, {
project: './config/custom-tsconfig.json'
})
.bundle();Inline Configuration:
browserify()
.add('src/main.ts')
.plugin(tsify, {
project: {
compilerOptions: {
target: 'es2017',
strict: true,
esModuleInterop: true,
allowJs: true
},
include: ['src/**/*']
}
})
.bundle();tsify overrides certain TypeScript compiler options for Browserify compatibility:
Always Overridden:
sourceMap → false (uses inline source maps when --debug is set)inlineSourceMap → Set based on Browserify's --debug optioninlineSources → Set based on Browserify's --debug optionmodule → Defaults to commonjs for Browserify compatibilityrootDir → Set internally for proper file resolutionoutDir → Set internally to virtual output directoryBlacklisted Options (ignored):
out - Use Browserify's output options insteadoutFile - Use Browserify's output options insteadnoEmit - Must emit for bundling to workControl which files are included in TypeScript compilation:
interface FileInclusionOptions {
/** Explicit list of files to compile (overrides tsconfig files) */
files?: string[];
/** Glob patterns to include */
include?: string[];
/** Glob patterns to exclude */
exclude?: string[];
}Usage Examples:
// Only compile entry points and their dependencies
browserify()
.add('src/main.ts')
.plugin(tsify, {
files: [] // Empty array means only entry points
})
.bundle();
// Include/exclude patterns
browserify()
.add('src/main.ts')
.plugin(tsify, {
include: ['src/**/*'],
exclude: ['**/*.test.ts', 'node_modules/**']
})
.bundle();Custom TypeScript Compiler:
const ntypescript = require('ntypescript');
browserify()
.add('main.ts')
.plugin(tsify, {
typescript: ntypescript // Use alternative compiler
})
.bundle();
// Or by name
browserify()
.add('main.ts')
.plugin(tsify, {
typescript: 'ntypescript'
})
.bundle();Global Transform Mode:
browserify()
.add('src/app.ts')
.plugin(tsify, {
global: true, // Process all files, not just dependencies
allowJs: true // Include JavaScript files
})
.bundle();React/JSX Setup:
browserify()
.add('src/App.tsx')
.plugin(tsify, {
jsx: 'react-jsx',
esModuleInterop: true,
allowSyntheticDefaultImports: true,
strict: true
})
.bundle();ES2020 with Decorators:
browserify()
.add('src/main.ts')
.plugin(tsify, {
target: 'es2020',
experimentalDecorators: true,
emitDecoratorMetadata: true,
strictPropertyInitialization: false
})
.bundle();Strict Mode with Path Mapping:
browserify()
.add('src/main.ts')
.plugin(tsify, {
strict: true,
baseUrl: './src',
paths: {
'@components/*': ['components/*'],
'@utils/*': ['utils/*']
}
})
.bundle();interface ConfigurationContext {
/** Current working directory */
currentDirectory: string;
/** Browserify options */
browserifyOptions: any;
/** Resolved tsconfig.json path */
configFile?: string;
/** Parsed TypeScript configuration */
parsedConfig: {
options: any;
fileNames: string[];
};
}Install with Tessl CLI
npx tessl i tessl/npm-tsify