1 | # tsify
|
2 |
|
3 | [Browserify](http://browserify.org/) plugin for compiling [TypeScript](http://www.typescriptlang.org/)
|
4 |
|
5 | [](https://www.npmjs.com/package/tsify)
|
6 | [](https://npmjs.org/package/tsify)
|
7 | [](http://travis-ci.org/TypeStrong/tsify)
|
8 | [](https://david-dm.org/TypeStrong/tsify)
|
9 | [](https://david-dm.org/TypeStrong/tsify#info=devDependencies)
|
10 | [](https://david-dm.org/TypeStrong/tsify#info=peerDependencies)
|
11 |
|
12 | # Example Usage
|
13 |
|
14 | ### Browserify API:
|
15 |
|
16 | ``` js
|
17 | var browserify = require('browserify');
|
18 | var tsify = require('tsify');
|
19 |
|
20 | browserify()
|
21 | .add('main.ts')
|
22 | .plugin(tsify, { noImplicitAny: true })
|
23 | .bundle()
|
24 | .on('error', function (error) { console.error(error.toString()); })
|
25 | .pipe(process.stdout);
|
26 | ```
|
27 |
|
28 | ### Command line:
|
29 |
|
30 | ``` sh
|
31 | $ browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js
|
32 | ```
|
33 |
|
34 | Note that when using the Browserify CLI, compilation will always halt on the first error encountered, unlike the regular TypeScript CLI. This behavior can be overridden in the API, as shown in the API example.
|
35 |
|
36 | Also note that the square brackets `[ ]` in the example above are *required* if you want to pass parameters to tsify; they don't denote an optional part of the command.
|
37 |
|
38 | # Installation
|
39 |
|
40 | Just plain ol' [npm](https://npmjs.org/) installation:
|
41 |
|
42 | ### 1. Install browserify
|
43 | ```sh
|
44 | npm install browserify
|
45 | ```
|
46 |
|
47 | ### 2. Install typescript
|
48 |
|
49 | ``` sh
|
50 | npm install typescript
|
51 | ```
|
52 |
|
53 | ### 3. Install tsify
|
54 | ``` sh
|
55 | npm install tsify
|
56 | ```
|
57 |
|
58 | For use on the command line, use the flag `npm install -g`.
|
59 |
|
60 | # Options
|
61 |
|
62 | * **tsify** will generate inline sourcemaps if the `--debug` option is set on Browserify, regardless of the flag status in `tsconfig.json`.
|
63 | * **tsify** supports almost all options from the TypeScript compiler. Notable exceptions:
|
64 | * `-d, --declaration` - See [tsify#15](https://github.com/TypeStrong/tsify/issues/15)
|
65 | * `--out, --outDir` - Use Browserify's file output options instead. These options are overridden because **tsify** writes to an internal memory store before bundling, instead of to the filesystem.
|
66 | * **tsify** supports the TypeScript compiler's `-p, --project` option which allows you to specify the path that will be used when searching for the `tsconfig.json` file. You can pass either the path to a directory or to the `tsconfig.json` file itself. (When using the API, the `project` option can specify either a path to a directory or file, or the JSON content of a `tsconfig.json` file.)
|
67 | * **tsify** supports overriding the `files`, `exclude` and `include` options. In particular, if `"files": []` is specified, only the Browserify entry points (and their dependencies) are passed to TypeScript for compilation.
|
68 | * **tsify** supports the following extra options:
|
69 | * `--global` - This will set up **tsify** as a global transform. See the [Browserify docs](https://github.com/substack/node-browserify#btransformtr-opts) for the implications of this flag.
|
70 | * `--typescript` - By default we just do `require('typescript')` to pickup whichever version you installed. However, this option allows you to pass in a different TypeScript compiler, such as [NTypeScript](https://github.com/TypeStrong/ntypescript). Note that when using the API, you can pass either the name of the alternative compiler or a reference to it:
|
71 | * `{ typescript: 'ntypescript' }`
|
72 | * `{ typescript: require('ntypescript') }`
|
73 |
|
74 | # Does this work with...
|
75 |
|
76 | ### tsconfig.json?
|
77 |
|
78 | tsify will automatically read options from `tsconfig.json`. However, some options from this file will be ignored:
|
79 |
|
80 | * `compilerOptions.declaration` - See [tsify#15](https://github.com/TypeStrong/tsify/issues/15)
|
81 | * `compilerOptions.out`, `compilerOptions.outDir`, and `compilerOptions.noEmit` - Use Browserify's file output options instead. These options are overridden because **tsify** writes its intermediate JavaScript output to an internal memory store instead of to the filesystem.
|
82 | * `files` - Use Browserify's file input options instead. This is necessary because Browserify needs to know which file(s) are the entry points to your program.
|
83 | * `compilerOptions.sourceMaps` - Source maps are only generated if the `--debug` option is set on Browserify.
|
84 | * `compilerOptions.inlineSourceMaps` - Generated source maps are always inline.
|
85 |
|
86 | ### Watchify?
|
87 |
|
88 | Yes! **tsify** can do incremental compilation using [watchify](//github.com/substack/watchify), resulting in much faster incremental build times. Just follow the Watchify documentation, and add **tsify** as a plugin as indicated in the documentation above.
|
89 |
|
90 | ### Gulp?
|
91 |
|
92 | No problem. See the Gulp recipes on using [browserify](https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md) and [watchify](https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md), and add **tsify** as a plugin as indicated in the documentation above.
|
93 |
|
94 | ### Grunt?
|
95 |
|
96 | Use [grunt-browserify](https://github.com/jmreidy/grunt-browserify) and you should be good! Just add **tsify** as a plugin in your Grunt configuration.
|
97 |
|
98 | ### IE 11?
|
99 |
|
100 | The inlined sourcemaps that Browserify generates [may not be readable by IE 11](//github.com/TypeStrong/tsify/issues/19) for debugging purposes. This is easy to fix by adding [exorcist](//github.com/thlorenz/exorcist) to your build workflow after Browserify.
|
101 |
|
102 | ### ES2015? *(formerly known as ES6)*
|
103 |
|
104 | TypeScript's ES2015 output mode should work without too much additional setup. Browserify does not support ES2015 modules, so if you want to use ES2015 you still need some transpilation step. Make sure to add [babelify](//github.com/babel/babelify) to your list of transforms. Note that if you are using the API, you need to set up **tsify** before babelify:
|
105 |
|
106 | ``` js
|
107 | browserify()
|
108 | .plugin(tsify, { target: 'es6' })
|
109 | .transform(babelify, { extensions: [ '.tsx', '.ts' ] })
|
110 | ```
|
111 |
|
112 | # FAQ / Common issues
|
113 |
|
114 | ### SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
|
115 |
|
116 | This error occurs when a TypeScript file is not compiled to JavaScript before being run through the Browserify bundler. There are a couple known reasons you might run into this.
|
117 |
|
118 | * If you are trying to output in ES6 mode, then you have to use an additional transpilation step such as [babelify](//github.com/babel/babelify) because Browserify does not support bundling ES6 modules.
|
119 | * Make sure that if you're using the API, your setup `.plugin('tsify')` is done *before* any transforms such as `.transform('babelify')`. **tsify** needs to run first!
|
120 | * There is a known issue in Browserify regarding including files with `expose` set to the name of the included file. More details and a workaround are available in [#60](//github.com/TypeStrong/tsify/issues/60).
|
121 |
|
122 | # Why a plugin?
|
123 |
|
124 | There are several TypeScript compilation transforms available on npm, all with various issues. The TypeScript compiler automatically performs dependency resolution on module imports, much like Browserify itself. Browserify transforms are not flexible enough to deal with multiple file outputs given a single file input, which means that any working TypeScript compilation transform either skips the resolution step (which is necessary for complete type checking) or performs multiple compilations of source files further down the dependency graph.
|
125 |
|
126 | **tsify** avoids this problem by using the power of plugins to perform a single compilation of the TypeScript source up-front, using Browserify to glue together the resulting files.
|
127 |
|
128 | # License
|
129 |
|
130 | MIT
|
131 |
|
132 | # Changelog
|
133 |
|
134 | * 5.0.4 - Fix export in `d.ts` file.
|
135 | * 5.0.3 - Improve detection of case-sensitive file systems.
|
136 | * 5.0.2 - Remove `@types/browserify` and incorrect/undocumented use of TypeScript types in `tsify` signature.
|
137 | * 5.0.1 - Remove default import from `index.d.ts` and add `@types/browserify` dependency.
|
138 | * 5.0.0 - **Breaking**: Fix type declarations for TypeScript 4 compatibility. With this fix, the TypeScript version must be 2.8 or above.
|
139 | * 4.0.2 - Add `types` to `package.json`.
|
140 | * 4.0.1 - Fix so that `watchify` does not stop listening.
|
141 | * 4.0.0 - Re-applied changes from 3.0.2: added support for the `forceConsistentCasingInFilenames` compiler option.
|
142 | * 3.0.4 - Added support for overriding the `files`, `exclude` and `include` options.
|
143 | * 3.0.3 - Reverted 3.0.2.
|
144 | * 3.0.2 - Added support for the `forceConsistentCasingInFilenames` compiler option.
|
145 | * 3.0.1 - Fixed an error with file system case sensitivity detection.
|
146 | * 3.0.0 - **Breaking**: Dropped support for Browserify < 10.x. Re-instated changes from 2.0.4 to 2.0.7.
|
147 | * 2.0.8 - Reverted to 2.0.3. Changes introduced from 2.0.4 to 2.0.7 have issues with early versions of Browserify.
|
148 | * 2.0.7 - Tracked files for filtered stream and module-name 'rows'. Using `allowJs` no longer causes problems with streams.
|
149 | * 2.0.6 - Filtered module-name 'rows', too, as filtering only source 'rows' re-broke Browserify's [require](https://github.com/substack/node-browserify#brequirefile-opts) option.
|
150 | * 2.0.5 - The fix in 2.0.4 was too aggressive, as it filtered too many Browserify 'rows'. Now, only 'rows' from stream sources are filtered.
|
151 | * 2.0.4 - Fixed a bug that broke Browserify's [require](https://github.com/substack/node-browserify#brequirefile-opts) option.
|
152 | * 2.0.3 - Fixed a bug related to case-sensitive paths and normalized more path parameters.
|
153 | * 2.0.2 - Added support for specifying the `project` option using the JSON content of a `tsconfig.json` file.
|
154 | * 2.0.1 - Fixed a bug in which the `include` option was broken if `tsconfig.json` was not in the current directory.
|
155 | * 2.0.0 - **Breaking**: updated to the latest `tsconfig`, so `filesGlob` is no longer supported. Use TypeScript 2's `exclude` and `include` options instead.
|
156 | * 1.0.9 - Implemented additional compiler host methods to support the default inclusion of visible `@types` modules.
|
157 | * 1.0.8 - Implemented file system case-sensitivity detection, fixing [#200](//github.com/TypeStrong/tsify/issues/200).
|
158 | * 1.0.7 - Replaced `Object.assign` with [`object-assign`](https://github.com/sindresorhus/object-assign) for Node 0.12 compatibility.
|
159 | * 1.0.6 - Fixed a bug in which TypeScript 2 libraries (specified using the `lib` option) were left out of the compilation when bundling on Windows.
|
160 | * 1.0.5 - Fixed a bug where empty output resulted in an error.
|
161 | * 1.0.4 - Fixed numerous bugs:
|
162 | * Refactored to use canonical file names, fixing [#122](//github.com/TypeStrong/tsify/issues/122), [#135](//github.com/TypeStrong/tsify/issues/135), [#148](//github.com/TypeStrong/tsify/issues/148), [#150](//github.com/TypeStrong/tsify/issues/150) and [#161](//github.com/TypeStrong/tsify/issues/161).
|
163 | * Refactored to avoid having to infer the TypeScript root, fixing [#152](//github.com/TypeStrong/tsify/issues/152).
|
164 | * Misconfiguration of `tsify` as a transform now results in an explicit error.
|
165 | * Internal errors that previously went unreported are now emitted to Browserify.
|
166 | * 1.0.3 - Fixed a bug introduced in 1.0.2 (that resulted in the `target` being set to `ES3`).
|
167 | * 1.0.2 - Added support for the TypeScript compiler's short-name, command-line options (e.g. `-p`).
|
168 | * 1.0.1 - On Windows, sometimes, the Browserify `basedir` contains backslashes that need normalization for findConfigFile to work correctly.
|
169 | * 1.0.0 - **Breaking**: TypeScript is now a `devDependency` so we don't install one for you. Please run `npm install typescript --save-dev` in your project to use whatever version you want.
|
170 | * 0.16.0 - Reinstated changes from 0.15.5.
|
171 | * 0.15.6 - Reverted 0.15.5 because of breaking changes.
|
172 | * 0.15.5 - Used `TypeStrong/tsconfig` for parsing `tsconfig.json` to add support for `exclude` and more.
|
173 | * 0.15.4 - Fixed some compilation failures introduced by v0.14.3.
|
174 | * 0.15.3 - Added support for the `--global` flag to use **tsify** as a global transform.
|
175 | * 0.15.2 - Added support for the `files` property of `tsconfig.json`.
|
176 | * 0.15.1 - Added support for `--project` flag to use a custom location for `tsconfig.json`.
|
177 | * 0.15.0 - Removed `debuglog` dependency.
|
178 | * 0.14.8 - Reverted removal of `debuglog` dependency for compatibility with old versions of Node 0.12.
|
179 | * 0.14.7 - Only generate sourcemap information in the compiler when `--debug` is set, for potential speed improvements when not using sourcemaps.
|
180 | * 0.14.6 - Fixed output when `--jsx=preserve` is set.
|
181 | * 0.14.5 - Removed `lodash` and `debuglog` dependencies.
|
182 | * 0.14.4 - Fixed sourcemap paths when using Browserify's `basedir` option.
|
183 | * 0.14.3 - Fixed `allowJs` option to enable transpiling ES6+ JS to ES5 or lower.
|
184 | * 0.14.2 - Fixed `findConfigFile` for TypeScript 1.9 dev.
|
185 | * 0.14.1 - Removed module mode override for ES6 mode (because CommonJS mode is now supported by TS 1.8).
|
186 | * 0.14.0 - Updated to TypeScript 1.8 (thanks @joelday!)
|
187 | * 0.13.2 - Fixed `findConfigFile` for use with the TypeScript 1.8 dev version.
|
188 | * 0.13.1 - Fixed bug where `*.tsx` was not included in Browserify's list of extensions if the `jsx` option was set via `tsconfig.json`.
|
189 | * 0.13.0 - Updated to TypeScript 1.7.
|
190 | * 0.12.2 - Fixed resolution of entries outside of `process.cwd()` (thanks @pnlybubbles!)
|
191 | * 0.12.1 - Updated `typescript` dependency to lock it down to version 1.6.x
|
192 | * 0.12.0 - Updated to TypeScript 1.6.
|
193 | * 0.11.16 - Updated `typescript` dependency to lock it down to version 1.5.x
|
194 | * 0.11.15 - Added `*.tsx` to Browserify's list of extensions if `--jsx` is set (with priority *.ts > *.tsx > *.js).
|
195 | * 0.11.14 - Override sourcemap settings with `--inlineSourceMap` and `--inlineSources` (because that's what Browserify expects).
|
196 | * 0.11.13 - Fixed bug introduced in last change where non-entry point files were erroneously being excluded from the build.
|
197 | * 0.11.12 - Fixed compilation when the current working directory is a symlink.
|
198 | * 0.11.11 - Updated compiler host to support current TypeScript nightly.
|
199 | * 0.11.10 - Updated resolution of `lib.d.ts` to support TypeScript 1.6 and to work with the `--typescript` option.
|
200 | * 0.11.9 - Fixed dumb error.
|
201 | * 0.11.8 - Handled JSX output from the TypeScript compiler to support `preserve`.
|
202 | * 0.11.7 - Added `*.tsx` to the regex determining whether to run a file through the TypeScript compiler.
|
203 | * 0.11.6 - Updated dependencies and devDependencies to latest.
|
204 | * 0.11.5 - Fixed emit of `file` event to trigger watchify even when there are fatal compilation errors.
|
205 | * 0.11.4 - Added `--typescript` option.
|
206 | * 0.11.3 - Updated to TypeScript 1.5.
|
207 | * 0.11.2 - Blacklisted `--out` and `--outDir` compiler options.
|
208 | * 0.11.1 - Added `tsconfig.json` support.
|
209 | * 0.11.0 - Altered behavior to pass through all compiler options to tsc by default.
|
210 | * 0.10.2 - Fixed output of global error messages. Fixed code generation in ES6 mode.
|
211 | * 0.10.1 - Fixed display of nested error messages, e.g. many typing errors.
|
212 | * 0.10.0 - Added `stopOnError` option and changed default behavior to continue building when there are typing errors.
|
213 | * 0.9.0 - Updated to use TypeScript from npm (thanks @hexaglow!)
|
214 | * 0.8.2 - Updated peerDependency for Browserify to allow any version >= 6.x.
|
215 | * 0.8.1 - Updated peerDependency for Browserify 9.x.
|
216 | * 0.8.0 - Updated to TypeScript 1.4.1.
|
217 | * 0.7.1 - Updated peerDependency for Browserify 8.x.
|
218 | * 0.7.0 - Updated error handling for compatibility with Watchify.
|
219 | * 0.6.5 - Updated peerDependency for Browserify 7.x.
|
220 | * 0.6.4 - Included richer file position information in syntax error messages.
|
221 | * 0.6.3 - Updated to TypeScript 1.3.
|
222 | * 0.6.2 - Included empty *.d.ts compiled files in bundle for Karma compatibility.
|
223 | * 0.6.1 - Fixed compilation cache miss when given absolute filenames.
|
224 | * 0.6.0 - Updated to TypeScript 1.1.
|
225 | * 0.5.2 - Bugfix for 0.5.1 for files not included with expose.
|
226 | * 0.5.1 - Handled *.d.ts files passed as entries. Fix for files included with expose.
|
227 | * 0.5.0 - Updated to Browserify 6.x.
|
228 | * 0.4.1 - Added npmignore to clean up published package.
|
229 | * 0.4.0 - Dropped Browserify 4.x support. Fixed race condition causing pathological performance with some usage patterns, e.g. when used with [karma-browserify](https://github.com/Nikku/karma-browserify).
|
230 | * 0.3.1 - Supported adding files with `bundler.add()`.
|
231 | * 0.3.0 - Added Browserify 5.x support.
|
232 | * 0.2.1 - Fixed paths for sources in sourcemaps.
|
233 | * 0.2.0 - Made Browserify prioritize *.ts files over *.js files in dependency resolution.
|
234 | * 0.1.4 - Handled case where the entry point is not a TypeScript file.
|
235 | * 0.1.3 - Automatically added *.ts to Browserify's list of file extensions to resolve.
|
236 | * 0.1.2 - Added sourcemap support.
|
237 | * 0.1.1 - Fixed issue where intermediate *.js files were being written to disk when using `watchify`.
|
238 | * 0.1.0 - Initial version.
|