Question

问题： 我无法让React.js在requirejs和brunch情况下运行。

我在react.js库中得到了一个不匹配的定义错误，并且反应没有出现在windows对象中。我不确定该做什么，并希望这里的某个人有如何解决这个问题的指导。也许我正在使用这种技术组合不正确，也许这是不可能的？任何洞察我可能做错的事情或解决这个问题的建议都将不胜感激！

顺便说一下，如果我删除对react.js的bower引用，并从应用程序中删除所有react.js信息，那么一切正常。

请参阅下面的编辑，了解其他一些评论和发现！

实际错误：

错误：匿名的define（）模块不匹配：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”＆amp;＆amp; require; if（！u＆amp;＆amp; a）返回a（o，！0）; if（i）return i（o，！0）; var f = new Error（“找不到模块”“+ o +”'“）;抛出 f.code = “MODULE_NOT_FOUND” 中，f}变种 L = N [0] = {出口：{}}; T [O] [0] .CALL（l.exports，函数（E）{风险 n = t [o] [1] [e];返回s（n？n：e）}，l，l.exports，e，t，n，r）}返回 n [o] .exports} var i = typeof require ==“function”＆amp;＆amp; 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

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

修改

所以我相信我越来越接近解决这个问题了。我刚刚发现brunch只在非供应商的javascript中添加了定义包装器。因此，react.js被编译到vendor.js文件而没有任何定义名称，因此require.js抛出react.js匿名的异常。那么，也许我需要在编译过程中在供应商文件上运行brunch运行r.js？这听起来不错吗？我如何在早午餐中做到这一点？

Answer 1

React项目没有提供开箱即用的AMD接口，正如您在编辑中所指出的，这不是Brunch将在供应商文件上为您做的事情。

您的选项似乎是将项目转换为使用CommonJS模块模式或使用AMD适配器，例如https://github.com/philix/jsx-requirejs-plugin。

Answer 2

可能的解决方案：

所以我现在已经在requirejs（AMD）环境中起作用了。我用我的方法看到了一个问题，那就是我相信一些使用react的库期望反应被暴露为一个全局对象。我相信我可以通过创建将其填充到requirejs export.config（）中。一个requirejs定义，手动将反应放到浏览器窗口范围内（稍后会详细介绍。）

以下是我所做的更改，允许在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＆＃39; head＆＃39;现在只包含这个：

<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文件：因此，当我打电话给＆＃39; npm start＆＃39;时，我创建的这个文件由node.js执行。在项目中，您将在下面的package.json文件中看到：

({
    baseUrl: ".",
    optimize: "none",
    paths: {
        react: "bower_components/react/react-with-addons"
    },
    name: "react",
    out: "vendor/react-built.js"
})

基本上，它将凉亭路径分配给反应路径，并且名称抓住凉亭路径，以便它知道r.js将优化的文件的位置。然后，require.js优化文件将作为react-built.js投入到vendor文件夹中。如果你从上面回忆一下，在我的新早午餐配置文件中，我将bower-react javascript库排除在编译成最终的vendor.js文件之外，因为我已经添加了使用此版本生成的requirejs优化反应库。 js文件。

所以NPM package.json文件的脚本部分如下所示：

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

基本上，当你打电话给'npm start＆＃39;时，会执行r.js并将build.js文件传入其中，然后调用早午餐。

所以接下来的部分，正如es128所提到的那样，是为了让任何JSX注释文件在brunch包装它们以供AMD包含之前预先处理成javascript。

==编辑 因此，通过npm安装react-brunch插件非常有效。保存.jsx文件后，.jsx文件被编译为javascript。我用插件信息更新了上面的brunch-config文件。我还没有shim并将React全局导出到窗口范围，但我相信这可能是一个不同的StackOverflow主题，因为它与我原来的问题无关。

Brunch，RequireJS和ReactJS给了我＆＃34;错误：不匹配的匿名define（）模块＆＃34;

2 个答案: