Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

extraBabelIncludes未应用extraBabelPlugins规则造成无法Uglify的问题 #885

Open
datouxia opened this issue Oct 29, 2020 · 0 comments

Comments

@datouxia
Copy link

Environment(required) | 环境(必填)

  • roadhog version(roadhog版本)2.5.0-beta.4
  • Nodejs and Npm version(Nodejs 和 Npm 版本)12.18.2
  • Operating environment (e.g. OS name) and its version(操作系统版本): Mac OS 10.15.7

What did you do? Please provide steps to re-produce your problem.(请提供复现步骤)

初始化roadhog项目,安装monaco-editor-webpack-plugin,monaco-editor和babel-plugin-transform-es2015-literals
项目中正常引用monaco-editor,在webpack.config.js中引用
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
再手工增加配置,使得Monaco可以正常编译
webpackConfig.plugins.push(new MonacoWebpackPlugin({
languages: ['cpp', 'python']
}));
然后npm run build,发现如下提示
⚠️ ⚠️ ⚠️ It's not recommended to use webpack.config.js, since it's major or minor version upgrades may result in incompatibility. If you insist on doing so, please be careful of the compatibility after upgrading.

Build completed in 37.505s

Failed to compile.

Failed to minify the bundle. Error: 0.e4f97260.async.js from UglifyJs
Invalid syntax: 0b11110000 [0.e4f97260.async.js:154324,14]
at doneHandler (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/af-webpack/lib/build.js:91:27)
at /Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/webpack/lib/Compiler.js:265:13
at Compiler.emitRecords (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/webpack/lib/Compiler.js:371:38)
at /Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/webpack/lib/Compiler.js:258:10
at /Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/webpack/lib/Compiler.js:364:12
at next (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler. (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at next (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/tapable/lib/Tapable.js:220:14)
at callback (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/copy-webpack-plugin/dist/index.js:126:17)
at Compiler.afterEmit (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/copy-webpack-plugin/dist/index.js:220:13)
at Compiler.applyPluginsAsyncSeries1 (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/webpack/lib/Compiler.js:361:9)
at /Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/webpack/lib/Compiler.js:350:15
at /Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/async/dist/async.js:1064:13)
at /Users/zhangweibo/Desktop/Projects/hxr/web/node_modules/async/dist/async.js:969:16
Read more here: http://bit.ly/2tRViJ9

[graceful-process#4609] exit with code:1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hxr-web@1.0.0 build: cross-env ESLINT=none roadhog build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hxr-web@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/zhangweibo/.npm/_logs/2020-10-29T11_18_54_383Z-debug.log

原因为node_modules/monaco-editor/esm/vs/base/common/strings.js 中包含二进制数字语法,如 0b11110000
故增加配置.webpackrc.js
"extraBabelPlugins": [
"transform-es2015-literals",
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }],
],

结果npm run build问题同上。

通过webpack.config.js输出分析
console.log(webpackConfig.module.rules);
发现extraBabelIncludes生成的rule里面的options.plugins不存在,故使用如下代码补上
const monacoEditorConfig = webpackConfig.module.rules.find(rule => (rule.include) && (rule.include.indexOf('node_modules/monaco-editor') !== -1));
const monacoEditorExtraBabelLoaderConfig = monacoEditorConfig.use.find(u => u.loader.indexOf('babel-loader') !== -1);
monacoEditorExtraBabelLoaderConfig.options.plugins = ["transform-es2015-literals"];

What do you expected?(预期的正常效果)

extraBabelIncludes生成的rule里面的options.plugins应该和extraBabelPlugins一致。

What happen?(发生了何种非正常现象)

发现extraBabelIncludes生成的rule里面的options.plugins不存在

Re-producible online demo (可复现的在线demo)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant