我正在编写一个JavaScript库，我想把它放在npm上。我目前在另一个项目中使用该库，并使用其GitHub存储库将其添加为依赖项：
"dependencies": {
// ... others
"react-web-component": "LukasBombach/react-web-component",
}我也在使用Webpack和UglifyJsPlugin。现在，当我想构建我的项目时，我得到一个错误：
编译失败。
无法缩小此文件中的代码：
./packages/react-scripts/node_modules/react-web-component/src/index.js第18行：0
在此阅读更多信息：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
错误命令失败，退出代码为% 1。
这是我的图书馆的问题。当我把它从我的deps（和我的代码）中删除时，编译工作。
我不知道问题出在哪里，我的代码看起来很简单：
const ReactDOM = require('react-dom');
const retargetEvents = require('./retargetEvents');
const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');
module.exports = {
create: function(app, tagName, options) {
const proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function() {
const shadowRoot = this.createShadowRoot();
const mountPoint = document.createElement('div');
getStyleElementsFromReactWebComponentStyleLoader().forEach(style =>
shadowRoot.appendChild(style)
);
shadowRoot.appendChild(mountPoint);
ReactDOM.render(app, mountPoint);
retargetEvents(shadowRoot);
},
},
});
document.registerElement(tagName, { prototype: proto });
},
};在retargetEvents和getStyleElementsFromReactWebComponentStyleLoader中需要有简单的module.export命令。你可以看到它们的源代码here和here。
我已经尝试使用ES6导出/导入命令发布我的库。
我的库的完整源代码（只有这3个文件）可以在https://github.com/LukasBombach/react-web-component上找到
7条答案
按热度按时间pjngdqdw1#
对于那些你正面临的问题。首先检查你的package.json是否使用了React-script 1.x。如果是这样，请尝试升级到2.x.x。
从官方的疑难解答文档npm run build无法缩小
在
[[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)之前，这个问题是由第三方node_modules使用现代JavaScript功能引起的，因为minifier在构建过程中无法处理它们。通过在[[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)和更高版本中编译node_modules内部的标准现代JavaScript特性，解决了这个问题。如果您看到此错误，则可能使用的是旧版本的
react-scripts。您可以通过避免使用现代语法的依赖项来修复它，或者通过升级到react-scripts@>=2.0.0并遵循更新日志中的迁移说明来修复它。升级到。
或
waxmsbnn2#
对于仍然面临这个问题的人，在这里我找到了一个对我有效的解决方案;我将在这里一步一步地解释它：
最近，我参与了一个项目，该项目使用旧版本的
create-react-app，在其webpack配置中使用webpack@3和uglifyJsPlugin。当我使用这个项目时，主要的问题和问题是在我安装其他npm包时出现的，我在开发模式下使用了一段时间。在我完成了我的任务之后，当我想构建项目时，我面临着以下头痛：这个问题是由缩小js文件引起的，所以我没有想到如果我改变
webpack.config.prod的配置来改变它的缩小过程，那么我就可以解决这个问题。所以我检查了webpack.config.prod文件，我看到它使用uglifyJsPlugin进行缩小。我更改了配置以使用terser-webpack-plugin，我得到了另一个错误，该错误将说明此pkg用于webpack@4。最后，我最终使用terser-webpack-plugin-legacy作为我的webpack@3配置，它工作得很好。请注意，我的create-react-app被弹出。qzlgjiam3#
我找到解决办法了！
我的代码中有一些ES6特性，即
foreach、~运算符和速记函数语法。丑化者不接受这一点。我需要用ES 5代码替换它，现在它工作得很好。cqoc49vn4#
对于任何有这个问题的人，升级
react-scripts不是解决方案，这是我的故事：首先，我使用带有自动导入插件的
vscode，它会自动在顶部添加导入。它工作OK…直到昨天。今天我在本地分支上运行了deploy脚本（上一次运行是在上周），我得到了这个可怕的错误消息，特别是：
这是没有意义的，因为
master构建工作正常，从那时起我就没有更新过我的软件包。绝望的是，我开始一个接一个地构建提交（实际上我是从第一批提交开始的，然后当它工作的时候，在中间尝试了一些其他的，等等）寻找罪魁祸首。
然后我找到了
自动导入插件在我的代码中添加了以下导入：
当它应该是：
导致一些
reselect源文件被编译，而不是使用库已经编译的文件。TL;DR;不要相信你的自动导入插件。永远不会：facepalm：
arknldoa5#
我通过导入外部库的缩小版解决了这个问题。用于socket. io客户端更改的F.E.
import io from 'socket.io-client';到
import io from 'socket.io-client/dist/socket.io.js';ttcibm8c6#
第一个改变是package.json。“react-scripts”：“2.0.3”，
1.删除package-lock.json（不是package.json！）和/或yarn.lock。
1.删除项目文件夹中的node_modules。
1.从项目文件夹中的package.json文件的依赖项和/或开发项中删除“eslint”。
1.运行npm install或yarn，具体取决于您使用的包管理器。
6ojccjat7#
1.我建议删除任何构建文件和节点模块文件。
1.删除package-lock.json文件
1.在package.json中，将
"react-scripts"替换为"react-scripts": "^5.0.1"1.运行
npm install，然后运行npm audit fix --force来修复问题这些东西为我工作。