时间戳

首页 > 解决方案 > Webpack / Typescript - ModuleConcatenation 救助：模块不是 ECMAScript 模块？

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

问题描述

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

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

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

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

我的 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;

标签： typescriptwebpack

解决方案

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

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

这导致 NoEmitOnErrorsPlugin 做这件事并且不产生输出

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

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

推荐阅读