Javascript 早午餐、RequireJS和ReactJS给了我；错误：不匹配的匿名定义（）模块；_Javascript_Requirejs_Reactjs_Brunch

Javascript 早午餐、RequireJS和ReactJS给了我；错误：不匹配的匿名定义（）模块；

javascript requirejs reactjs

Javascript 早午餐、RequireJS和ReactJS给了我；错误：不匹配的匿名定义（）模块；,javascript,requirejs,reactjs,brunch,Javascript,Requirejs,Reactjs,Brunch,问题：我无法让React.js在requirejs和早午餐的情况下运行我在react.js库中发现一个不匹配的定义错误，并且react没有显示在windows对象中。我不确定该怎么做，希望这里的人能够提供解决此问题的指导。也许我使用这种技术的组合不正确，也许这是不可能的？任何关于我可能做错了什么的见解或解决这个问题的建议都将不胜感激顺便说一句，如果我删除react.js的bower引用，并从应用程序中删除所有react.js信息，那么所有这些都可以正常工作请参阅我下面的编辑，以获得更多的

问题： 我无法让React.js在requirejs和早午餐的情况下运行

我在react.js库中发现一个不匹配的定义错误，并且react没有显示在windows对象中。我不确定该怎么做，希望这里的人能够提供解决此问题的指导。也许我使用这种技术的组合不正确，也许这是不可能的？任何关于我可能做错了什么的见解或解决这个问题的建议都将不胜感激

顺便说一句，如果我删除react.js的bower引用，并从应用程序中删除所有react.js信息，那么所有这些都可以正常工作

请参阅我下面的编辑，以获得更多的评论和发现

实际错误：

Projectname
 |-app
   |-assets
     |-index.html
   |-components
     |-appinit.js
   |-styles
 |-bower_components
   |-react
   |-requirejs
 |-node_modules
 |-public
 |-bower.json
 |-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"
            }
    }
};

<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>

  "scripts": {
    "start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server"
  }

错误：不匹配的匿名define（）模块：函数（）{var 定义，模块，导出；返回（函数e（t，n，r）{函数 s（o，u）{if（！n[o]）{if（！t[o]）{var a=typeof require==“函数”&&require；如果（！u&&a）返回一个（o，！0）；如果（i）返回 i（o，！0）；var f=新错误（“找不到模块”'+o+“””）；抛出 f、 code=“未找到模块”，f}var l=n[o]={exports:{}；t[o][0]。调用（l.exports，函数（e）{var n=t[o][1][e]；返回s（n？n:e）}，l，l.导出，e，t，n，r）}返回 n[o].exports}var i=typeof require==“函数”&&require；for（var o=0；odereq，模块，导出）{*

项目文件结构如下：

Projectname
 |-app
   |-assets
     |-index.html
   |-components
     |-appinit.js
   |-styles
 |-bower_components
   |-react
   |-requirejs
 |-node_modules
 |-public
 |-bower.json
 |-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"
            }
    }
};

<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>

  "scripts": {
    "start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server"
  }

我认为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>  <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>

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" } }
编辑

所以我相信我离解决这个问题越来越近了。我刚刚发现brunch只在非供应商javascript周围添加了定义包装器。因此，react.js被编译到vendor.js文件中，没有任何定义名称，因此require.js抛出react.js匿名的异常。因此，也许我需要让brunch在在编译过程中编辑供应商文件？这听起来正确吗？我如何在早午餐中这样做？
React项目不提供现成的AMD接口，正如您在编辑中所指出的，早午餐不会为您提供供应商文件

您可以选择将项目转换为使用CommonJS模块模式，或者使用AMD适配器，例如。
可能的解决方案：

Projectname |-app |-assets |-index.html |-components |-appinit.js |-styles |-bower_components |-react |-requirejs |-node_modules |-public |-bower.json |-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" } } };

<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>

"scripts": { "start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server" }
因此，我现在已经在react（AMD）环境中运行了react。我发现我的方法存在一个问题，那就是我相信一些使用react的库希望react作为全局对象公开。我相信我可能可以将其填充到requirejs export.config（）中通过创建一个requirejs定义，手动将react放入浏览器窗口范围（稍后将对此进行详细介绍）
以下是我所做的更改，这些更改允许react在AMD/RequireJS环境中工作：
新的brunch.config文件：

Projectname |-app |-assets |-index.html |-components |-appinit.js |-styles |-bower_components |-react |-requirejs |-node_modules |-public |-bower.json |-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" } } };

<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>

"scripts": { "start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server" }
现在（新）index.html“head”只包含以下内容：

Projectname |-app |-assets |-index.html |-components |-appinit.js |-styles |-bower_components |-react |-requirejs |-node_modules |-public |-bower.json |-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" } } };

<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>

"scripts": { "start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server" }
基本上，它将bower路径分配给react路径，并且名称会获取bower路径，以便它知道r.js将优化的文件的位置。require.js优化的文件然后作为react-Build.js扔进供应商文件夹中。如果您从上面回忆起，在我的新早午餐配置文件中，我排除了bower react javascript库from正在编译到最终的vendor.js文件中，因为我已经添加了使用这个build.js文件生成的requirejs优化react库
因此NPM package.json文件的脚本部分如下所示：

Projectname |-app |-assets |-index.html |-components |-appinit.js |-styles |-bower_components |-react |-requirejs |-node_modules |-public |-bower.json |-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" } } };

<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>

"scripts": { "start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server" }
本质上，当您调用“npm start”时，r.js被执行，build.js文件被传递到r.js中，之后会调用brunch
因此，正如es128所提到的，下一部分是在brunch包装任何JSX注释文件以供AMD包含之前，将其预处理为javascript
==编辑
因此，通过npm安装react-brunch插件非常有效。保存.jsx文件后，jsx文件将编译为javascript。我用插件信息更新了上述brunch配置文件。我还没有填充react并将其全局导出到窗口范围中，但我相信这可能是一个不同的StackOverflow主题，因为它不相关对于我最初的问题。
Hi es128，我看一下这个线程，看看它是否有用。感谢es128的建议。我看了jsx requirejs插件，但在我看来，它所做的只是将jsx编写的文件预处理为javascript，而没有解决react.js库的AMD接口。当然，我是实际上，我没有尝试使用这个插件，所以我对它的假设可能是不正确的。而且这个插件执行的预处理似乎也会发生在早午餐范围之外，所以每次我更改一个jsx文件时，我都必须执行“npm启动”，而不是让早午餐观察更改并自动转换。也就是说，我相信我有一个在AMD环境中使用react函数的解决方案，所以请看一下我添加的第二组编辑，并告诉我您的想法。添加react-brunch插件应该将您的jsx文件编译到brunch管道中的js中，之后brunch会将每个文件包装为AMD模块。@es128您和我的想法是一样的！我遇到了同一个插件，今晚我会将它嵌入到应用程序中。如果一切顺利，我会给这个答案打勾。