Javascript 如果不直接使用，则导出的TypeScript类不包括在Web包包包中_Javascript_Typescript_Webpack_Ts Loader

Javascript 如果不直接使用，则导出的TypeScript类不包括在Web包包包中

javascript typescript webpack

Javascript 如果不直接使用，则导出的TypeScript类不包括在Web包包包中,javascript,typescript,webpack,ts-loader,Javascript,Typescript,Webpack,Ts Loader,我正在使用Angular 1.x将一个javascript项目转换为WebPack和TypeScript（使用）。我让它大部分工作，但我遇到了麻烦，当ts加载器似乎是优化我的脚本包外时，出口没有直接使用下面是一个演示该问题的示例项目（npm安装、webpack，然后加载index.html并查看控制台）显示了ClassA的日志记录，但angular报告缺少ClassB（提供程序）。如果您查看bundle.js，您会发现类B完全丢失。不同之处在于ClassA在导入后直接开始使用，而Class

我正在使用Angular 1.x将一个javascript项目转换为WebPack和TypeScript（使用）。我让它大部分工作，但我遇到了麻烦，当ts加载器似乎是优化我的脚本包外时，出口没有直接使用

下面是一个演示该问题的示例项目（npm安装、webpack，然后加载index.html并查看控制台）

显示了ClassA的日志记录，但angular报告缺少ClassB（提供程序）。如果您查看bundle.js，您会发现类B完全丢失。不同之处在于ClassA在导入后直接开始使用，而ClassB仅由类型引用以进行编译

这是一个bug，还是有办法强制包含ClassB？还是我做错了？Angular 2可能会解决这个问题，但现在这一步太大了

上述项目的相关脚本：

package.json

{
    "devDependencies": {
        "typescript": "^1.7.5",
        "ts-loader": "^0.8.1"
    },
    "dependencies": {
        "angular": "1.4.9"
    }
}

webpack.config.js

var path = require('path');

module.exports = {
    entry: {
        app: './src/entry.ts'
    },
    output: {
        filename: './dist/bundle.js'
    },
    resolve: {
        root: [
            path.resolve('./src/my_modules'),
            path.resolve('node_modules')
        ],
        extensions: ['', '.ts', '.js']
    },
    module: {
        loaders: [{
            test: /\.tsx?$/,
            loader: 'ts-loader'
        }]
    }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules"
  ]
}

index.html

<!doctype html>
<html ng-app="myApp">
    <body>
        <script src="dist/bundle.js"></script>
    </body>
</html>

A.ts类

// this line will be logged just fine
console.log('ClassA.ts: if you see this, then ClassA.ts was packaged properly');

class ClassA {
}

export = ClassA;

B.T类

declare var require: any;

// this line is never logged
console.log('ClassB.ts: if you see this, then ClassB.ts was packaged properly');

class ClassB {
}

var angular = require(angular);

angular.module('myApp').service(new ClassB());

export = ClassB;

通过添加额外的

require

调用而不使用

import

语句来显式包含模块

我还没有准备好通过添加重复导入来损坏我的.ts文件，因此我使用以下方法为其制定了一个通用解决方案：

作为概念证明，此正则表达式版本非常有限，仅支持以下格式：

import ClassA = require('ClassA');
// becomes
require('ClassA');import ClassA = require('ClassA');

但这对我很有效。类似地，我添加了：

我用这个解决方案做了一个改进。