如何使用"ModuleConcatenation救助:模块不是ECMAScript模块"来修复模块.救援消息? [英] How to fix modules with "ModuleConcatenation bailout: Module is not an ECMAScript module" bailout message?
问题描述
Webpack3附带了ModuleConcatenation
插件,当与--display-optimization-bailout
标志一起使用时,它将为您提供纾困的原因.
Webpack3 comes with the ModuleConcatenation
plugin that when used with the --display-optimization-bailout
flag will give you the reason for bailout.
救助消息不是那么容易理解,而且很难理解为什么它们发生在特定模块上.
The bailout messages not that easy to understand, and it's hard to understand why they happened to a specific module.
这是我的项目的非常简化版本中webpack
命令的输出:
Here is my output for the webpack
command on a very simplified version of my project:
> 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
.这里是其内容:
I simplified the contents of ./src/client/bootstrap/ErrorTrap.js
as much as I could, and I still get the ModuleConcatenation bailout: Module is not an ECMAScript module
. Here are its contents:
class ErrorTrap {
}
export default ErrorTrap;
我研究了了解这一救助消息,它发生的原因之一是该模块没有导入或导出时,如在
I looked into understanding this bailout message, and one of the reasons it happens is when the module doesn't have imports or exports, as seen at https://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/lib/dependencies/HarmonyDetectionParserPlugin.js#L12-L14, but I don't know why it's not considering this module a ECMAScript
module.
.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' }
推荐答案
您正在使用Babel转换JavaScript文件,默认情况下,es2015
预设将ES模块(import
/export
)转换为CommonJS(节点使用什么,require
). Webpack接收CommonJS模块,但是ModuleConcatenationPlugin
依赖于ES模块.您可以使用 modules
选项将Babel配置为不转换模块.
You're using Babel to transpile your JavaScript files and by default the es2015
preset transforms ES modules (import
/export
) to CommonJS (what Node uses, require
). Webpack receives the CommonJS modules, but the ModuleConcatenationPlugin
relies on ES modules. You can configure Babel to not transform the modules with the modules
option.
{
"presets": [
["es2015", { "modules": false }]
]
}
Webpack 2+开箱即用地支持ES模块,最好将它们留在webpack中,因为它启用了摇树.
Webpack 2+ supports ES modules out of the box and it's best to leave them to webpack, because it enables features such as Tree Shaking.
这篇关于如何使用"ModuleConcatenation救助:模块不是ECMAScript模块"来修复模块.救援消息?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!