带有 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

I think I know why, since rs is not really used, except for type references that disappear once transpiled to es5, so webpack must be optimizing the import away.

你是对的。如果仅使用类型信息，则 TypeScript 将去除导入。

可用的 "fixes" 是：

你有：require('./rolesService');
"Use" 导入：rs;

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

带有 typescript 外部 commonjs 模块的 Webpack

Webpack with typescript external commonjs module

typescript

webpack