Webpack / Typescript - ModuleConcatenation 救助：模块不是 ECMAScript 模块？答案

【问题标题】：Webpack / Typescript - ModuleConcatenation bailout: Module is not an ECMAScript module?Webpack / Typescript - ModuleConcatenation 救助：模块不是 ECMAScript 模块？
【发布时间】：2019-03-04 21:00:42
【问题描述】：

当mode = "development"，但不是"production" - 一切都是"not an ECMAScript module" 时，项目构建良好。

生产模式自动使用ModuleConcatenationPlugin，开发不那么有意义，但我不明白为什么ModuleConcatenation 不开心。

Webpack 文档说“请记住，此插件仅适用于由 webpack 直接处理的 ES6 模块。使用转译器时，您需要禁用模块处理（例如 Babel 中的模块选项）” - 我除了将“模块”编译器选项设置为“es6”之外，还没有找到一种方法来为 typescript 执行此操作？

任何关于如何追踪问题的见解或建议将不胜感激 - 我已经为此花费了一天时间:(

我的 tsconfig.json：

{
    "include": [
        "src/browser/**/*",
        "src/shared/typings/*"
    ],
    "exclude": [
        "node_modules"
    ],
    "compilerOptions": {
        "outDir": "./dist/public/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "moduleResolution": "node",
        "target": "es5",
        "allowJs": true,
        "resolveJsonModule": true,
        "jsx": "react",
        "allowSyntheticDefaultImports": true
    }
}

webpack.config：

const webpack = require('webpack');
const path = require('path');

const config = {
  mode: "production",

  entry: './src/browser/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist', 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)?$/,
        loader: 'awesome-typescript-loader',
        options: {
          useCache: false,
          configFileName: 'test.tsconfig.json'
        }
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: 'file-loader'
      },
    ]
  },
  resolve: {
    extensions: [
      '.tsx',
      '.ts',
      '.js'
    ]
  }
}

module.exports = config;

【问题讨论】：

标签： typescript webpack

【解决方案1】：

好的，所以我（最终）想通了。

我认为是警告的东西被打字稿标记为错误。

这导致 NoEmitOnErrorsPlugin 执行此操作并且不产生任何输出

因此，ModuleConcatenationPlugin 与此无关，但会引发“...不是 ECMAScript 模块”错误 - 也就是一个巨大的红鲱鱼。

所以，未来的 Google 员工 - 确保 ModuleConcatenationPlugin 确实有要连接的模块！

【讨论】：

您能详细说明一下吗？你到底做了什么来解决这个问题？
澄清一下，我的代码有一个编译错误。这意味着没有产生编译输出。 ModuleConcatenationPlugin 没有可使用的编译输出，但它产生的错误无济于事。所以，没有什么可以修复的 - 当我的代码编译时一切都很好