模块构建失败：错误：TypeScript 未输出任何内容

Question

当我尝试编译一个 .ts 文件时，我会得到以下错误：

Module build failed: Error: Typescript emitted no output for C:\xampp\htdocs\node-api\src\js\server.ts. 
at successLoader (C:\xampp\htdocs\node-api\node_modules\ts-loader\dist\index.js:39:15)
at Object.loader (C:\xampp\htdocs\node-api\node_modules\ts-loader\dist\index.js:21:12)

我使用下面的配置文件进行编译。

Webpack:

const path = require( 'path' ),
    CleanWebpackPlugin = require( 'clean-webpack-plugin' );

module.exports = env => {
    return {
        mode: env.dev ? 'development' : 'production',
        entry: {
            'server': './src/js/server.ts'
        },
        output: {
            path: __dirname,
            filename: './dist/js/[name].js',
        },
        externals: '/node_modules',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: ['/node_modules/', '/src/scss/'],
                    use: [
                        'babel-loader'
                    ]
                },
                {
                    test: /\.ts(x?)$/,
                    exclude: ['/node_modules/', '/src/scss/'],
                    use: [
                        'babel-loader',
                        'ts-loader',
                    ]
                },
                {
                    test:  /\.json$/,
                    loader: 'json-loader'
                },
            ]
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.js' ],
            alias: {
                '@': path.resolve(__dirname, './src/js')
            }
        },
        plugins: [
            new CleanWebpackPlugin(['./dist/js', './dist/css']),
        ]
    }
};

Typescript：

{
    "compilerOptions": {
        "removeComments": true,
        "preserveConstEnums": true,
        "allowJs": true,
        "outDir": "./dist/js",
        "target": "es5",
        "moduleResolution": "node",
        "module": "es2015",
        "lib": [
            "es2015",
            "es2016"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}

Babel:

巴别塔（Babel）：

{
    "presets": [
        [
            "env", {
                "targets": {
                    "node": "current"
                }
            }
        ],
        "stage-2", "es2015"
    ],
    "plugins": ["dynamic-import-node"]
}

如其他问题中建议的那样，我已经改变了解析扩展名的顺序，但是这并没有解决它（.js在.ts之前）。使用Typescript 2.8.3与Node 8.11.1和Mongoose 5.0.15结合使用，并由Webpack 4.6编译。因此，我仍然想知道如何解决上述错误。

- SuperDJ

---

请发布您的 tsconfig.json 文件。 - Sajeetharan

@Sajeetharan 它在 Typescript: 下面。 - SuperDJ

那个 index.d.ts 文件来自于 node_modules，或者至少不是我创建的文件。它可能也是 server.ts 文件中的某些内容吗？ - SuperDJ

你需要像这样导入所有模块：import * as express from 'express'，并且尝试在 typeconfig.json 中设置你的模块属性为 commonjs。 - Ank

你尝试过移除 outDir 吗？因为如果开启了这个选项，tsc 就不会输出任何内容。 - Amir Tugi

Answer 1

请在您的 tsconfig.json 文件中将 noEmit 设为 false。 默认情况下，它设置为true；一旦我们将其更改为false，就可能不会再出现此错误。

"noEmit": false

- Pavan Kumar Vempati

---

尝试将此作为评论添加或详细说明您的答案。 - Deepak Kumar

但是...但是...为什么？ - Chris Hawkes

Answer 2

当使用ts-loader时，可以按照以下方式在webpack配置中覆盖compilerOptions：

    rules: [
      {
        test: /\.[jt]s$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
          {
            loader: 'ts-loader',
            options: {
              compilerOptions: {
                noEmit: false,
              },
            },
          },
        ],
      },
    ]

- haravares

---

此选项无法在 webpack.config.json 中设置，Webpack 版本为 5.47。 - BEvo

我喜欢这个选项，因为它允许在tsconfig中使用noEmit: true，这可以防止除了构建期间之外的输出。@BEvo，它是可用的，但你可能需要将use: 'ts-loader'更改为loader: 'ts-loader'。 - Joakim

这对我在Cypress插件文件上运行'Cucumber' .feature文件的ts-loader预处理器进行设置： `on（ 'file:preprocessor', webpack（{ webpackOptions：{ resolve：{ extensions：['.ts'，'.js']， }， module：{ rules：[ { test：/ \ .ts $ /， exclude：[/ node_modules /]， use：[ { loader：'ts-loader'， options：{ compilerOptions：{ noEmit：false， }... ``` - Gus

Answer 3

在我的情况下，我必须从tsconfig.json中删除"emitDeclarationOnly": true，或者将其设置为false。如果启用此选项，则只会输出d.ts文件而不是JavaScript文件。了解更多信息：https://www.typescriptlang.org/tsconfig#emitDeclarationOnly。

- jbarradas

---

没错！那就是正确的答案。这里使用的是webpack 5.76和ts-loader 9.4。谢谢。 - danb4r

Answer 4

使用webpack 5和Typescript 4.5，我可以通过以下方式运行一个expressjs + prisma服务器：

webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              compilerOptions: {noEmit: false},
            }
          }
        ],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

tsconfig.json:

{
  "compilerOptions": {
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Source: https://webpack.js.org/guides/typescript/

- Bob