带有 typescript 外部 commonjs 模块的 Webpack

Question

为了使下面的代码正常工作，我需要在 rolesView.ts 中重复 require('./rolesService') 子句，或者取消注释 console.log 语句。如果我没有这两行，webpack 不会在包中包含引用的 rolesService.ts，从而导致缺少 RolesServiceProvider 错误。我想我知道为什么，因为 rs 并没有真正使用，除了类型引用一旦转译为 es5 就会消失，所以 webpack 必须优化导入。有没有办法不必重复 require('./rolesService') 两次。

rolesView.ts：

"use strict";

import angular = require('angular');

import rs = require('./rolesService');

require('./rolesService');

//console.log( rs);

class RolesViewController {
    static $inject = ['RolesService']
    constructor(private rolesService: rs.IRolesService) {
        rolesService.getRoles();
    }
}

angular.module('epsr').component('rolesView', {
    template: require('./rolesView.html'),
    controller: RolesViewController
});

rolesService.ts：

'use strict';

import angular = require('angular');

export interface IRole {
    id: string;
    name: string;
}

export interface IRolesService {
    getRoles(): ng.IPromise<IRole[]>;
}

class RolesService implements RolesService {
    static $inject = ['$http'];
    constructor(private $http: ng.IHttpService) {
    }

    getRoles(): ng.IPromise<IRole[]> {
        return this.$http.get('api/roles');
    }
}

angular.module('epsr').service('RolesService', RolesService);

Answer 1

我想我知道为什么，因为 rs 并没有真正使用，除了类型引用在转译为 es5 后消失，所以 webpack 必须优化导入。

你是对的。如果只使用类型信息，那么 TypeScript 将删除导入。

可用的“修复”是：

1. 你有什么：require('./rolesService');
2. “使用”导入：rs;

FWIW，Angular2 似乎通过 @Inject 指令解决了这个问题，该指令实际上使用了导入。