为什么ts-loader无法编译我的TypeScript代码？

Question

为什么ts-loader无法编译我的TypeScript代码？

6

我正在尝试使用Webpack和ts-loader编译一些TypeScript代码，但是它没有按照我的期望来执行tsc。如果我对一个ts文件进行更改，则Webpack不会将其重新编译为js文件，如果我删除了已生成的js文件并重新运行Webpack，情况也是一样的。

由于我可以运行"./node_modules/typescript/bin/tsc"来生成js文件，所以Typescript的设置很好。我想知道ts-loader是否只需根据我的tsconfig.json运行tsc？如果是这样，为什么它无法捕获更改并如预期生成我的js文件？

正如您所看到的，我的入口点是"./Client/boot-client.ts"，但即使在通过Webpack运行时，这个也没有被编译。

我正在运行特定的Webpack命令：./node_modules/webpack/bin/webpack.js --progress，它产生了以下输出。

[0] building modulests-loader: Using typescript@2.2.2 and C:\git\coliver\couchtrace\Couchtrace.Web\tsconfig.json
[1] building modulests-loader: Using typescript@2.2.2 and C:\git\coliver\couchtrace\Couchtrace.Web\tsconfig.json
[1] Hash: 568887199c9c2bcbe47ec00669704990969dbee5
Version: webpack 2.3.2
Child
    Hash: 568887199c9c2bcbe47e
    Time: 20096ms
                 Asset    Size  Chunks                    Chunk Names
        main-client.js  554 kB       0  [emitted]  [big]  main-client
    main-client.js.map  859 kB       0  [emitted]         main-client
       [0] delegated ./node_modules/rxjs/Observable.js from dll-reference vendor_c9f874e7c2f104739cd8 42 bytes {0} [not cacheable] [built]
       [5] delegated ./node_modules/rxjs/Subject.js from dll-reference vendor_c9f874e7c2f104739cd8 42 bytes {0} [not cacheable] [built]
      [14] delegated ./node_modules/@angular/core/index.js from dll-reference vendor_c9f874e7c2f104739cd8 42 bytes {0} [not cacheable] [built]
      [19] ./~/rxjs/AsyncSubject.js 1.6 kB {0} [built]
      [20] ./~/rxjs/ReplaySubject.js 2.99 kB {0} [built]
      [33] delegated ./node_modules/angular2-universal/browser/index.js from dll-reference vendor_c9f874e7c2f104739cd8 42 bytes {0} [not cacheable] [built]
      [34] ./~/rxjs/add/operator/map.js 156 bytes {0} [built]
      [60] ./Client/src/app.module.ts 1.86 kB {0} [built]
      [61] delegated ./node_modules/angular2-universal-polyfills/browser.js from dll-reference vendor_c9f874e7c2f104739cd8 42 bytes {0} [not cacheable] [built]
      [68] ./~/rxjs/Rx.js 9.61 kB {0} [built]
     [180] ./~/rxjs/add/operator/takeUntil.js 186 bytes {0} [built]
     [335] ./Client/boot-client.ts 951 bytes {0} [built]
     [344] delegated ./node_modules/rxjs/symbol/rxSubscriber.js from dll-reference vendor_c9f874e7c2f104739cd8 42 bytes {0} [not cacheable] [built]
     [351] delegated ./node_modules/rxjs/util/ObjectUnsubscribedError.js from dll-reference vendor_c9f874e7c2f104739cd8 42 bytes {0} [not cacheable] [built]
     [353] delegated ./node_modules/@angular/router/index.js from dll-reference vendor_c9f874e7c2f104739cd8 42 bytes {0} [not cacheable] [built]
        + 345 hidden modules
Child
    Hash: c00669704990969dbee5
    Time: 20085ms
             Asset    Size  Chunks                    Chunk Names
    main-server.js  552 kB       0  [emitted]  [big]  main-server
       [5] delegated ./node_modules/rxjs/Subject.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
      [14] delegated ./node_modules/@angular/core/bundles/core.umd.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
      [19] ./~/rxjs/AsyncSubject.js 1.6 kB {0} [built]
      [20] ./~/rxjs/ReplaySubject.js 2.99 kB {0} [built]
      [21] ./~/rxjs/util/ArgumentOutOfRangeError.js 974 bytes {0} [built]
      [32] delegated ./node_modules/angular2-universal/node/index.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
      [53] delegated ./node_modules/rxjs/add/operator/map.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
      [59] ./Client/src/app.module.ts 1.86 kB {0} [built]
      [60] delegated ./node_modules/zone.js/dist/zone-node.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
      [61] delegated ./node_modules/angular2-universal-polyfills/node.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
      [62] delegated ./node_modules/aspnet-prerendering/index.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
      [69] ./~/rxjs/Rx.js 9.61 kB {0} [built]
     [336] ./Client/boot-server.ts 1.37 kB {0} [built]
     [356] delegated ./node_modules/rxjs/symbol/rxSubscriber.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
     [360] delegated ./node_modules/@angular/router/bundles/router.umd.js from dll-reference ./vendor 42 bytes {0} [not cacheable] [built]
        + 346 hidden modules

版本信息

webpack: 2.3.2
ts-loader: 2.0.3
typescript: 2.2.2

webpack配置文件

var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var merge = require('webpack-merge');

// Configuration in common to both client-side and server-side bundles
var sharedConfig = {
    context: __dirname,
    resolve: { extensions: [ '.ts', '.js' ]  },
    output: {
        filename: '[name].js',
       // publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        rules: [
            { test: /\.js$/, enforce: 'pre', use: 'source-map-loader' },
            { test: /\.ts$/, enforce: 'pre', use: 'source-map-loader' },
            { test: /\.ts$/, use: ['ts-loader', 'angular2-template-loader'], exclude: /node_modules/ },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            { test: /\.css$/, use: ['to-string-loader','css-loader'] },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
            { test: /\.json$/, use: 'json-loader' }
        ]
    }
};

// Configuration for client-side bundle suitable for running in browsers
var clientBundleOutputDir = './wwwroot/dist';
var clientBundleConfig = merge(sharedConfig, {
    entry: { 'main-client': './Client/boot-client.ts' },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [
        // Plugins that apply in development builds only
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        })
    ] : [
        // Plugins that apply in production builds only
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ]),
    target: 'web',
    devtool: 'inline-source-map'
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
var serverBundleConfig = merge(sharedConfig, {
    resolve: { mainFields: ['main'] },
    entry: { 'main-server': './Client/boot-server.ts' },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./Client/dist/vendor-manifest.json'),
            sourceType: 'commonjs2',
            name: './vendor'
        })
    ],
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './Client/dist')
    },
    target: 'node'
});

module.exports = [clientBundleConfig, serverBundleConfig];

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "lib": [ "es6", "dom" ],
    "types": [ "node" ]
  },
  "exclude": [ "bin", "node_modules" ]
}

- ChrisO

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Jungo · Accepted Answer

ts-loader并不会将任何文件写入磁盘。它会编译你的TypeScript文件，并将生成的JavaScript传递给webpack，这一过程在内存中进行。没有必要输出已编译的JavaScript，因为它已经包含在了包(bundle)中。包含所有需要的内容。

你可以看到以下代码行编译了./Client/boot-client.ts（它并不意味着被写入磁盘）：

[335] ./Client/boot-client.ts 951 bytes {0} [built]