我有一个React应用程序(使用“create-react-app”构建),其中我集成了一些使用AMD的遗留代码。我有很多构造,例如:
define(["backbone", "basejs/app/AppUtils"],
function(Backbone, AppUtils) {
...
在开发模式下,开箱即用一切正常(例如“Yarn开始”)。但在生产模式下出现了一些错误(例如“Yarn构建”),错误如下:
index.html:1 ReferenceError: define is not defined
at Module.2936 (XopsConstants.js:1:1)
XopsConstants.js:1 Uncaught (in promise) ReferenceError: define is not defined
我知道Webpack通常会检测到“define(...)",并删除调用“define”,替换为所需的lib的注入。因此函数仍然保留在输出的代码中。因此出现错误,“define()”未定义。
我仔细查看了“react-scripts”,试图了解这两种情况之间的区别。我观察到将NODE_ENV
设置为“development”或“production”似乎会导致问题。我说的是这个文件/行。
我真的很感激一些提示,可能会帮助我,而调试。
目前我不明白这个问题是由babel还是webpack引起的。
更新
经过一些调整后,我可以比较输出的文件。所以对于这个原始代码:
define(["jquery", "backbone"],
function($, Backbone) {
var AppInit = function() {
// this.initialize.apply(this, arguments);
};
_.extend(AppInit.prototype, {
initApp: function() {
var originalBackboneSync = Backbone.sync;
if (window.isWindowsApp) {
var path = decodeURI(window.location.pathname);
window.operationDomain = new NodeDomain("operation", path.substr(1, path.lastIndexOf("/")) + "lib/modules/node/OperationDomain");
传输的DEV版本为:
/***/ "./src/old-app/AppInit.js":
/*!**************************************************!*\
!*** ./src/old-app/AppInit.js ***!
\**************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js"), __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js")], __WEBPACK_AMD_DEFINE_RESULT__ = (function ($, Backbone) {
var AppInit = function () {// this.initialize.apply(this, arguments);
};
_.extend(AppInit.prototype, {
initApp: function () {
var originalBackboneSync = Backbone.sync;
if (window.isWindowsApp) {
var path = decodeURI(window.location.pathname);
window.operationDomain = new NodeDomain("operation", path.substr(1, path.lastIndexOf("/")) + "lib/modules/node/OperationDomain");
我们可以注意到代码非常相似,并且没有define()。
这个版本是这样的:
/***/ "./src/old-app/AppInit.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _home_poweruser_git2_xops_xops6_xops6_react_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty.js");
define(["jquery", "backbone"], function ($, Backbone) {
var AppInit = function AppInit() {// this.initialize.apply(this, arguments);
};
_.extend(AppInit.prototype, {
initApp: function initApp() {
var originalBackboneSync = Backbone.sync;
if (window.isWindowsApp) {
var path = decodeURI(window.location.pathname);
window.operationDomain = new NodeDomain("operation", path.substr(1, path.lastIndexOf("/")) + "lib/modules/node/OperationDomain");
也就是说,我们可以看到令人不快的“define()"。为什么?webpack和/或babel的配置中似乎考虑了NODE_ENV的fork在哪里?
1条答案
按热度按时间rqqzpn5f1#
通过反复试验,我推断这似乎是一个错误,因为我有如下构造:
观察
data
键两次,这会发出一个提示警告:“no-dupe-keys”=存在重复密钥。我的修正:通过报告的编译器警告,我修正了这样的构造。然后修改了linter配置来防止这样的错误:
我也打开了这个bug。