javascript - 与 webpack 一起安装时未定义 React

Question

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

本教程建议删除 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']
  }
}];

我承认我不知道所有这些设置的作用，特别是“加载器”设置，但我的理解是“入口”应该指向我的 webpack-ed javascript 的入口点，而“输出”应该指定编译后的 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 测试中包含捆绑文件时，全局变量 React、ReactDOM 等不可用。在控制台，尝试访问 React，我得到:

Uncaught ReferenceError: React is not defined

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

我认为我期望 webpack 入口文件中设置的变量可用是错误的。此外，似乎这样的变量应该在包含的文件中设置，而不是由我声明 - 就像在没有我声明和设置的情况下设置 d3 和 $ 一样他们的值(value)。但是，当我查看bundle.js时，我确实看到了var React = ....。 (在不止一个地方，我不明白，但无论如何)。所以我认为该变量至少会被定义。

简而言之，如何从我的应用程序和测试访问 React(或 webpack 中包含的任何其他库)？任何帮助表示赞赏!

Answer 1

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

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