与webpack一起安装时未定义React

Question

我正在尝试使用webpack安装React。 它是Rails项目的一部分。 我正在关注本教程

本教程建议从app / assets / javascripts中删除所有内容（我还没有做过-我仍然有jquery，jquery_ujs和d3），将我的javascript放在一个单独的目录中，并将其作为“源”，然后制作app / assets / javascripts我的webpack配置中的“目标”目录。 为了与本教程保持一致，我已将源目录命名为app / frontend / javascripts。

这是我的webpack.config.js文件的样子：

'use strict';

var path = require('path');
var webpack = require('webpack');

module.exports = [{
  name: 'chartComponent',
  entry: './app/frontend/javascripts/entry.js',
  output: {
    path: path.join(__dirname, 'app', 'assets', 'javascripts'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: [/\.jsx$/],
        loaders: ["jsx-loader?insertPragma=React.DOM&harmony"],
      }
    ],
  },
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.js', '.jsx']
  }
}];

我承认我不知道所有这些设置都可以做什么，尤其是“ loaders”设置，但是据我了解，“ entry”应指向我的webpack-ed javascript的入口点，而“ output”应指定目录和编译后的javascript的文件名。

我已将文件“ app / frontend / javascripts / entry.js”指定为入口。 该文件如下所示：

var React = require('react');
var ReactDOM = require('react-dom');
var Chart = require('react-d3-core').Chart;
var LineChart = require('react-d3-basic').LineChart;

Webpack运行正常，并按预期生成文件“ app / assets / javascripts / bundle.js”。 但是，当我在Rails应用程序或Jasmine测试中包含捆绑文件时，全局变量vars React，ReactDOM等都不可用。 在控制台上，尝试访问React时，我得到：

未捕获的ReferenceError：未定义React

我可以成功访问分别由d3.js和jquery.js设置的全局变量d3和$ ，但是我不是通过webpack来管理它们。

我认为期望在Webpack条目文件中设置的变量可用时一定是错误的。 而且，似乎应该在包含的文件中设置这样的变量，而不是由我自己声明-就像设置d3和$而不声明我和设置它们的值一样。 但是，当我查看bundle.js时，确实看到了var React = .... （在一个以上的地方，我不知道，但无论如何）。 因此，我认为该变量至少会被定义。

简而言之，如何从我的应用程序和测试中访问React（或Webpack随附的任何其他库）？ 任何帮助表示赞赏！

Answer 1

ES2015模块内定义的任何变量仅在此模块中可用。 导入的模块也是如此-导入模块不会使此模块在全局范围内可用。 如果确实需要使某些模块变量在全局范围内可用，则必须将其分配给window属性：

var React = require('react');
window.React = React;