CODEWITHSUNDEEP
typescriptwebpacktypescript-typings
delp
delp

Reputation: 811

Webpack with typings.json

I've been looking at this blog tutorial - http://www.jbrantly.com/typescript-and-webpack/ on creating a bundled JS file that combines the code from a Typescript project and its libraries that is uses (such as jQuery in the link) and bundles it using webpack.

While the tutorial is good (and I've had it working as expected), it's now out of date in that tsd.json files are replaced with typings.json and so far I've been unable to create a dummy project like the tutorial in the link but using typings.

So any ideas on what config is required or how do I use typings (https://github.com/typings/typings) and use webpack to bundle up code?

Upvotes: 2

Views: 3693

Answers (2)

Sebastian Sebald
Sebastian Sebald

Reputation: 16906

Both the typings and tsd project behave very similar. Especially when it comes to include the typings into you project.

typings, as does tsd, will but all your installed typings (see this for how to install new typings) into a typings directory. Inside that directory a file called index.d.ts is placed. This file contains all the references to the installed typings.

When you're building your TypeScript project make sure that the index.d.ts ist part of your files property inside the tsconfig.json. For example:

{
    "compilerOptions": {
        "..": ".."
    },
    "files": [
        "typings/index.d.ts",
        "src/index.ts"
    ]
}

Where src/index.ts is the entry file for the project. You shouldn't have to edit anything when it comes to webpack.

If you want to have an example, this is a project I did a while ago. But since I do not have a files property in my tsconfig.json the TypeScript compiler finds the definition files by itself.

Upvotes: 2

delp
delp

Reputation: 811

You install typings -

  1. npm install typings
  2. typings install dt~jquery --save --global (this installs the d.ts for jquery)
  3. Make sure that you include the import - e.g. import $ = require('jquery'); in your TS file. IDE's such as intelliJ will compile your code fine without it - but webpack will not see jQuery and therefor will not include it without it.

Everything else will be the same as the tutorial link.

Upvotes: 2

Related Questions