【发布时间】：2017-08-31 07:03:30
【问题描述】：
我正在尝试使用 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 和 $ 一样。但是，当我查看 bundle.js 时，我确实看到了 var React = ....。 （在不止一个地方，我不明白，但无论如何）。所以我认为变量至少会被定义。
简而言之，我如何从我的应用和测试中访问 React（或我在 webpack 中包含的任何其他库）？任何帮助表示赞赏！
【问题讨论】：
-
我的猜测是没有安装反应。您是否在某个时候输入了
npm install --save react？ （或者react是否存在于您的 package.json 依赖项中？） -
你需要在你的 jsx 文件中使用
import React from 'react'，即使你没有明确地调用React。 jsx 将被编译成 react 的 api。 -
@Daniel 我确实安装了 react - 当我运行
npm view react version时，我得到 15.4.2。这也是我的 package.json 文件中“依赖项”下的版本号 -
不...发布您的 jsx 文件。即使您的 jsx 代码没有在任何地方显式调用 react，您也需要执行
const React = require('react')。 jsx 将被编译为 react api，确实调用 react。这不是您是否安装它的问题。 -
@DanielLizik 我什至还没有编写任何 jsx - 我创建了一个名为 'entry.js' 的文件，我已将 webpack 配置为用作入口点。在那个文件中，我正在创建
var React = require('react')。当我查看由 webpack 创建的包时，那些声明在那里，但它们似乎在一个匿名函数中，所以我认为我不能期望它们在全局命名空间中。
标签： javascript ruby-on-rails reactjs webpack jasmine