Question

Webpack3附带ModuleConcatenation插件，当与--display-optimization-bailout标志一起使用时，会为您提供救助的原因。

救助信息并不容易理解，而且很难理解他们为什么会碰到特定模块。

以下是我项目非常简化版本上webpack命令的输出：

> webpack --bail --display-optimization-bailout

Hash: 4a9a55dc2883e82a017e
Version: webpack 3.4.1
Child client:
    Hash: 4a9a55dc2883e82a017e
    Time: 594ms
                                   Asset       Size  Chunks                    Chunk Names
        a.d3ade61d21d5cb8dd426.bundle.js  712 bytes       0  [emitted]         a
    a.d3ade61d21d5cb8dd426.bundle.js.map    6.57 kB       0  [emitted]         a
                           manifest.json  102 bytes          [emitted]         
                              index.html     299 kB          [emitted]  [big]  
       [0] multi ./src/client/bootstrap/ErrorTrap.js 28 bytes {0} [built]
           ModuleConcatenation bailout: Module is not an ECMAScript module
       [1] ./src/client/bootstrap/ErrorTrap.js 199 bytes {0} [built]
           ModuleConcatenation bailout: Module is not an ECMAScript module

我尽可能地简化了./src/client/bootstrap/ErrorTrap.js的内容，我仍然得到了ModuleConcatenation bailout: Module is not an ECMAScript module。以下是其内容：

class ErrorTrap {
}

export default ErrorTrap;

我研究了解这个救助信息，其中一个原因是模块没有进口或出口，如https://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/lib/dependencies/HarmonyDetectionParserPlugin.js#L12-L14所示，但我不知道为什么它没有将此模块视为ECMAScript模块。

.babelrc

{
  "presets": [
    "es2015"
  ]
}

webpack.config.js 表示：

{ target: 'web',
  devtool: 'source-map',
  entry: { a: [ './src/client/bootstrap/ErrorTrap.js' ] },
  output:
   { path: '/project/build/client/assets',
     filename: '[name].[chunkhash].bundle.js',
     chunkFilename: '[name].[chunkhash].chunk.js',
     publicPath: '/assets/' },
  module: { rules: [ [Object], [Object], [Object], [Object], [Object] ] },
  resolve: { alias: { 'lodash.defaults': 'lodash' } },
  plugins:
   [ ModuleConcatenationPlugin { options: {} },
     CommonsChunkPlugin {
       chunkNames: [Object],
       filenameTemplate: undefined,
       minChunks: Infinity,
       selectedChunks: undefined,
       children: undefined,
       async: undefined,
       minSize: undefined,
       ident: '/project/node_modules/webpack/lib/optimize/CommonsChunkPlugin.js0' },
     ManifestPlugin { opts: [Object] },
     ChunkManifestPlugin {
       manifestFilename: 'chunk-manifest.json',
       manifestVariable: 'webpackManifest',
       inlineManifest: false },
     OccurrenceOrderPlugin { preferEntry: undefined },
     DefinePlugin { definitions: [Object] },
     VisualizerPlugin { opts: [Object] },
     ExtractTextPlugin { filename: '[name].[contenthash].css', id: 1, options: {} },
     UglifyJsPlugin { options: [Object] },
     LoaderOptionsPlugin { options: [Object] } ],
  name: 'client' }

Answer 1

您正在使用Babel来转换您的JavaScript文件，默认情况下，es2015预设会将ES模块（import / export）转换为CommonJS（Node使用的是require }）。 Webpack接收CommonJS模块，但ModuleConcatenationPlugin依赖于ES模块。您可以将Babel配置为不使用modules option转换模块。

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

Webpack 2+支持开箱即用的ES模块，最好将它们留给webpack，因为它支持Tree Shaking等功能。

Answer 2

对于那些使用现代@babel/preset-env的人：

{
  "presets": [
    ["@babel/preset-env",{
      "targets": {
        ...
      },
      "modules": false
    }],
    "@babel/preset-react"
  ],
  "plugins": [...
}

但是不好的事情（但不是很关键）是，在那之后我不能像以前一样在我的webpack配置文件中使用ES模块，所以在webpack.config.babel.js中：

import webpack from 'webpack';

应更改为：

const webpack = require('webpack');

Answer 3

我最近在Ionic和Angular遇到了一个非常相似的问题。我已经将一个自定义组件导入到app.module.ts中，然后将其插入entryComponents中，后来决定我想走另一条路。我删除了导入，却忘记了entryComponents条目。而且我有同样的错误。

import numpy as np

# first, find the index of maximum on the unraveled matrix
arg_min = np.argmin(all_chi2)

# then find back the 2d indexes
m_min, n_min = np.unravel_index(arg_min, allchi2.shape)

然后它指向我的variable.scss路径，然后是下一行

ModuleConcatenation bailout: Module is not an ECMAScript module

因此，对于任何有类似问题的人（最有可能使用Ionic和Angular的人），您可能必须确保您不尝试在页面中使用未实际导入但仍带有尾随点的组件。 page.module.ts entryComponents。

如何使用＆＃34; ModuleConcatenation bailout修复模块：模块不是ECMAScript模块＆＃34;救助消息？

3 个答案: