Brunch, RequireJS, and ReactJS is giving me "Error: Mismatched anonymous define() module"
Brunch, RequireJS, and ReactJS is giving me "Error: Mismatched anonymous define() module"
问题：
在 requirejs 和 b运行ch 情况下，我根本无法使 React.js 正常工作。
我收到 react.js 库的不匹配定义错误，并且 React 没有出现在 windows object.I 我不确定该怎么做，并希望一些这里有人指导如何解决这个问题。也许我错误地使用了这种技术组合，也许这是不可能的？任何对我可能做错了什么的见解或解决此问题的建议都将不胜感激！
顺便说一句，如果我删除对 react.js 的 bower 引用，并从应用程序中删除所有 react.js 信息，一切都会正常工作。
请参阅我的以下编辑以获取一些其他评论和发现！
实际错误：
Error: Mismatched anonymous define() module: function (){var
define,module,exports;return (function e(t,n,r){function
s(o,u){if(!n[o]){if(!t[o]){var a=typeof
require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return
i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw
f.code="MODULE_NOT_FOUND",f}var
l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var
n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return
n[o].exports}var i=typeof require=="function"&&require;for(var
o=0;odereq,module,exports){*
Project文件结构如下：
Projectname
|-app
|-assets
|-index.html
|-components
|-appinit.js
|-styles
|-bower_components
|-react
|-requirejs
|-node_modules
|-public
|-bower.json
|-brunch.config
brunch.config文件，我觉得挺标准的，下面是内容：
exports.config = {
"modules": {
"definition" : "amd",
"wrapper" : "amd"
},
"files": {
"stylesheets": {
"defaultExtension": "css",
"joinTo": {
"css/app.css": /^app\/styles/,
"css/vendor.css": /^(bower_components|vendor)/
}
},
"javascripts": {
"joinTo": {
"js/app.js": /^app/,
"js/vendor.js": /^(bower_components|vendor)[\/]/,
"test/js/test.js": /^test(\/|\)(?!vendor)/,
"test/js/test-vendor.js": /^test(\/|\)(?=vendor)/
},
"order": {
"before": [
'bower_components/requirejs/require.js'
]
}
}
}
};
这里是 index.html 文件的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Application Test</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/css/app.css">
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
<script>
require.config({
"paths": {
"react": "bower_components/react/react-with-addons"
},
"shim": {
"react": {
exports: "React"
}
},
waitSeconds: 10
});
require(["components/appinit"], function (appInit) {
appInit.init();
});
</script>
</head>
<body style="height:100%; width:100%;">
<div id="main-content" style="margin-left: 100px; margin-top: 22px;">
My Main Content Goes Here.
</div>
</body>
</html>
以及appinit.js文件的内容：
define(function() {
var mainModule;
return mainModule = {
init: function () {
console.log("This is a test.");
return mainModule;
}
};
});
bower.json 文件 包含以下内容：
{
"name": “brunchreactrequirejstest",
"version": "1.0.0",
"homepage": "",
"authors": [
“person x"
],
"description": “description",
"main": "public/js/app.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"requirejs": "~2.1.15",
"react": "~0.12.2"
}
}
编辑
所以我相信我离解决这个问题越来越近了。我刚刚发现 b运行ch 只在非供应商 javascript 周围添加了定义包装器。所以，react.js 被编译成 vendor.js 文件，没有任何定义名称，所以 require.js 抛出 react.js 是匿名的异常。所以，也许我需要在编译过程中在供应商文件上添加 b运行ch 运行 r.js ？这听起来正确吗？我该如何在 b运行ch 中做到这一点？
React 项目不提供开箱即用的 AMD 接口，正如您在编辑中指出的那样，这不是 Brunch 会在供应商文件上为您做的事情。
您的选择似乎是将您的项目转换为使用 CommonJS 模块模式或使用 AMD 适配器，例如 https://github.com/philix/jsx-requirejs-plugin。
可能的解决方案：
所以我现在已经在 requirejs(AMD) 环境中运行了。我发现我的方法存在一个问题，那就是我相信一些与 React 一起工作的库期望将 React 作为全局公开 object.I 相信我可以将其填充到 requirejs export.config () 通过创建一个 requirejs 定义，手动将 react 放入浏览器 window 范围（稍后会详细介绍。）
以下是我所做的允许 React 在 AMD/RequireJS 环境中工作的更改：
（新）brunch.config 文件：
exports.config = {
"modules": {
"definition" : "amd",
"wrapper" : "amd"
},
"files": {
"stylesheets": {
"defaultExtension": "css",
"joinTo": {
"css/app.css": /^app\/styles/,
"css/vendor.css": /^(bower_components|vendor)/
}
},
"javascripts": {
"joinTo": {
"js/app.js": /^app/,
"js/vendor.js": /^(bower_components|vendor)[\/](?!react\/)/,
"test/js/test.js": /^test(\/|\)(?!vendor)/,
"test/js/test-vendor.js": /^test(\/|\)(?=vendor)/
},
"order": {
"before": [
'bower_components/requirejs/require.js'
]
}
}
},
"plugins":{
"react": {
"harmony": "yes"
}
}
};
（新）index.html'head'现在只包含这个：
<link rel="stylesheet" href="/css/app.css">
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
<script>
require(["components/appinit"], function (appInit) {
appInit.init();
});
</script>
build.js 文件： 所以我创建的这个文件在我调用项目 'npm start' 时由 node.js 执行，你将在下面的 package.json 文件中看到：
({
baseUrl: ".",
optimize: "none",
paths: {
react: "bower_components/react/react-with-addons"
},
name: "react",
out: "vendor/react-built.js"
})
基本上，它将 bower 路径分配给 react 路径，名称获取 bower 路径，以便它知道 r.js 将优化的文件的位置。 require.js 优化后的文件然后作为 react-built.js 被扔到供应商文件夹中。如果你还记得上面的内容，在我的新早午餐配置文件中，我排除了 bower-react javascript 库被编译到最终的 vendor.js 文件中，因为我已经添加了 requirejs 优化的 react 库使用此 build.js 文件生成。
因此 NPM package.json 文件的脚本部分如下所示：
"scripts": {
"start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server"
}
本质上，当您调用 'npm start' 时，r.js 会使用传递给它的 build.js 文件执行，然后调用 brunch。
因此，正如 es128 所提到的，下一部分是让任何 JSX 注释文件在 brunch 包装它们以包含 AMD 之前被预处理到 javascript。
== 编辑
所以通过 npm 安装 react-brunch 插件效果很好。保存 .jsx 文件后，.jsx 文件会编译为 javascript。我用插件信息更新了上面的 brunch-config 文件。我还没有将 React 全局填充和导出到 window 范围，但我相信这可能是一个不同的 Whosebug 主题，因为它与我原来的问题无关。
问题： 在 requirejs 和 b运行ch 情况下，我根本无法使 React.js 正常工作。
我收到 react.js 库的不匹配定义错误，并且 React 没有出现在 windows object.I 我不确定该怎么做，并希望一些这里有人指导如何解决这个问题。也许我错误地使用了这种技术组合，也许这是不可能的？任何对我可能做错了什么的见解或解决此问题的建议都将不胜感激！
顺便说一句，如果我删除对 react.js 的 bower 引用，并从应用程序中删除所有 react.js 信息，一切都会正常工作。
请参阅我的以下编辑以获取一些其他评论和发现！
实际错误：
Error: Mismatched anonymous define() module: function (){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;odereq,module,exports){*
Project文件结构如下：
Projectname
|-app
|-assets
|-index.html
|-components
|-appinit.js
|-styles
|-bower_components
|-react
|-requirejs
|-node_modules
|-public
|-bower.json
|-brunch.config
brunch.config文件，我觉得挺标准的，下面是内容：
exports.config = {
"modules": {
"definition" : "amd",
"wrapper" : "amd"
},
"files": {
"stylesheets": {
"defaultExtension": "css",
"joinTo": {
"css/app.css": /^app\/styles/,
"css/vendor.css": /^(bower_components|vendor)/
}
},
"javascripts": {
"joinTo": {
"js/app.js": /^app/,
"js/vendor.js": /^(bower_components|vendor)[\/]/,
"test/js/test.js": /^test(\/|\)(?!vendor)/,
"test/js/test-vendor.js": /^test(\/|\)(?=vendor)/
},
"order": {
"before": [
'bower_components/requirejs/require.js'
]
}
}
}
};
这里是 index.html 文件的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Application Test</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/css/app.css">
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
<script>
require.config({
"paths": {
"react": "bower_components/react/react-with-addons"
},
"shim": {
"react": {
exports: "React"
}
},
waitSeconds: 10
});
require(["components/appinit"], function (appInit) {
appInit.init();
});
</script>
</head>
<body style="height:100%; width:100%;">
<div id="main-content" style="margin-left: 100px; margin-top: 22px;">
My Main Content Goes Here.
</div>
</body>
</html>
以及appinit.js文件的内容：
define(function() {
var mainModule;
return mainModule = {
init: function () {
console.log("This is a test.");
return mainModule;
}
};
});
bower.json 文件 包含以下内容：
{
"name": “brunchreactrequirejstest",
"version": "1.0.0",
"homepage": "",
"authors": [
“person x"
],
"description": “description",
"main": "public/js/app.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"requirejs": "~2.1.15",
"react": "~0.12.2"
}
}
编辑
所以我相信我离解决这个问题越来越近了。我刚刚发现 b运行ch 只在非供应商 javascript 周围添加了定义包装器。所以，react.js 被编译成 vendor.js 文件，没有任何定义名称，所以 require.js 抛出 react.js 是匿名的异常。所以，也许我需要在编译过程中在供应商文件上添加 b运行ch 运行 r.js ？这听起来正确吗？我该如何在 b运行ch 中做到这一点？
React 项目不提供开箱即用的 AMD 接口，正如您在编辑中指出的那样，这不是 Brunch 会在供应商文件上为您做的事情。
您的选择似乎是将您的项目转换为使用 CommonJS 模块模式或使用 AMD 适配器，例如 https://github.com/philix/jsx-requirejs-plugin。
可能的解决方案：
所以我现在已经在 requirejs(AMD) 环境中运行了。我发现我的方法存在一个问题，那就是我相信一些与 React 一起工作的库期望将 React 作为全局公开 object.I 相信我可以将其填充到 requirejs export.config () 通过创建一个 requirejs 定义，手动将 react 放入浏览器 window 范围（稍后会详细介绍。）
以下是我所做的允许 React 在 AMD/RequireJS 环境中工作的更改：
（新）brunch.config 文件：
exports.config = {
"modules": {
"definition" : "amd",
"wrapper" : "amd"
},
"files": {
"stylesheets": {
"defaultExtension": "css",
"joinTo": {
"css/app.css": /^app\/styles/,
"css/vendor.css": /^(bower_components|vendor)/
}
},
"javascripts": {
"joinTo": {
"js/app.js": /^app/,
"js/vendor.js": /^(bower_components|vendor)[\/](?!react\/)/,
"test/js/test.js": /^test(\/|\)(?!vendor)/,
"test/js/test-vendor.js": /^test(\/|\)(?=vendor)/
},
"order": {
"before": [
'bower_components/requirejs/require.js'
]
}
}
},
"plugins":{
"react": {
"harmony": "yes"
}
}
};
（新）index.html'head'现在只包含这个：
<link rel="stylesheet" href="/css/app.css">
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
<script>
require(["components/appinit"], function (appInit) {
appInit.init();
});
</script>
build.js 文件： 所以我创建的这个文件在我调用项目 'npm start' 时由 node.js 执行，你将在下面的 package.json 文件中看到：
({
baseUrl: ".",
optimize: "none",
paths: {
react: "bower_components/react/react-with-addons"
},
name: "react",
out: "vendor/react-built.js"
})
基本上，它将 bower 路径分配给 react 路径，名称获取 bower 路径，以便它知道 r.js 将优化的文件的位置。 require.js 优化后的文件然后作为 react-built.js 被扔到供应商文件夹中。如果你还记得上面的内容，在我的新早午餐配置文件中，我排除了 bower-react javascript 库被编译到最终的 vendor.js 文件中，因为我已经添加了 requirejs 优化的 react 库使用此 build.js 文件生成。
因此 NPM package.json 文件的脚本部分如下所示：
"scripts": {
"start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server"
}
本质上，当您调用 'npm start' 时，r.js 会使用传递给它的 build.js 文件执行，然后调用 brunch。
因此，正如 es128 所提到的，下一部分是让任何 JSX 注释文件在 brunch 包装它们以包含 AMD 之前被预处理到 javascript。
== 编辑 所以通过 npm 安装 react-brunch 插件效果很好。保存 .jsx 文件后，.jsx 文件会编译为 javascript。我用插件信息更新了上面的 brunch-config 文件。我还没有将 React 全局填充和导出到 window 范围，但我相信这可能是一个不同的 Whosebug 主题，因为它与我原来的问题无关。