I am trying to publish an NPM module to use it with Webpack in another project. The module is written in TypeScript and contains the Angular 1.5 module. So far I have come up with something like this:
import {ExampleDirective} from './example/ExampleDirective';
import {ExampleComponent} from './example/ExampleComponent';
import {IExampleInterface} from './example/IExampleInterface';
import {ExampleFilter} from './utils/ExampleFilter';
import {ExampleClass} from './example/ExampleClass';
import {ExampleService} from './example/ExampleService';
export {
IExampleInterface, ExampleClass, ExampleService
}
angular.module('my.components', [])
.directive('example1', ExampleDirective.factory())
.component('example2', new ExampleComponent())
.filter('example3', ExampleFilter.filter)
.service('ExampleService', ExampleService);
The file above is called index.ts and imports / exports all TS code for consumption. Then I have the following package.json:
{
"name": "my-components",
"version": "0.0.6",
"main": "lib/index.ts",
"typings": "lib/index",
"files": [
"lib/"
],
"scripts": {
"prepublish": "typings install && tsc"
},
"dependencies": {
"angular": "1.5.*",
"lodash": "4.13.*",
"moment": "2.14.*"
},
"peerDependencies": {
"bootstrap": "3.3.*",
"font-awesome": "4.6.*"
},
"devDependencies": {
"typescript": "1.8.*",
"typings": "1.3.*"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"declaration": true,
"outDir": "lib"
},
"files": [
"src/index.ts",
"typings/index.d.ts"
]
}
and typings.json:
{
"globalDependencies": {
"angular": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular.d.ts#060060dc34ef700a6ea9e00ccee69b570ff3c242",
"lodash": "github:DefinitelyTyped/DefinitelyTyped/lodash/lodash.d.ts#83f954972eea14a29161a0d9b9e602c4f8f824d1",
"moment": "github:DefinitelyTyped/DefinitelyTyped/moment/moment.d.ts#56295f5058cac7ae458540423c50ac2dcf9fc711",
"moment-node": "github:DefinitelyTyped/DefinitelyTyped/moment/moment-node.d.ts#8886ae591751e8a8237fa855617745768f0b1bdf"
}
}
When I start npm publishing, everything is compiled from the / src folder, and the JS code along with the TS definitions is in the / lib folder as desired. After publishing, I can use directives and components in my HTML templates and implement services.
However, there is one problem: when I need to import TS definitions wherever I need to import them as follows:
import {ExampleClass, IExampleInterface, ExampleService} from 'my-components/lib/index';
instead, for example:
import {ExampleClass, IExampleInterface, ExampleService} from MyComponents;
, , IDE (IntelliJ Ultimate) . index.ts, ? NPM/ TypeScript/typings/Webpack. .