使用webpack安装React时未定义

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

本教程建议从app/assets/javascripts（我还没有完成 - 我仍然有jquery，jquery_ujs和d3）中删除所有内容，将我的javascript放到一个单独的目录中，我的'源'，然后在我的webpack配置中将app/assets/javascripts作为'目标'目录。我已经按照教程命名了我的源代码目录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-javascript 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运行正常，并生成文件“应用程序/资产/ Java脚本/ bundle.js”，符合市场预期。然而，当我在我的Rails应用程序或我的Jasmine测试中包含软件包文件时，全局变量React，ReactDOM等不可用。在控制台，尝试访问反应过来，我得到：

Uncaught ReferenceError: React is not defined

我可以成功访问全局变量d3和$分别由d3.js和jquery.js和设置，但我不管理这些通过的WebPack。

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

简而言之，如何从我的应用程序和测试中访问React（或包含在webpack中的任何其他库）？任何帮助感谢！

来源

2017-04-05 Fred Willmore

我的猜测是反应没有安装。你有没有在某个时候输入'npm install --save react'？（或者''react'出现在你的package.json依赖关系中？） – Daniel

即使你没有明确地调用'React'，你也需要在你的jsx文件中从'react''导入React。 jsx会被编译成react的api。 –

@Daniel我安装了反应 - 当我运行'npm view react version'时，我得到了15.4.2。这也是我的package.json文件在“依赖关系”下的版本号 –

ES2015模块内部定义的任何变量仅在本模块中可用。这同样适用于导入的模块 - 导入模块不会使该模块在全局范围内可用。如果你真的需要使一些模块变量在全球范围内可用，你必须将它分配到window属性：

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

来源

2017-04-05 16:08:04

我不一定需要全局变量;我认为我的问题是我没有完全理解webpack在做什么。我包括由webpack生成的包文件，它看起来像它有React，但我不知道如何在我的应用程序或测试中访问React –

是的，'React'库包含在捆绑销售的webpack，但webpack'封装'模块，所以他们的代码是不可用的全球。 'react'库包含在生成的bundle中，但作为内部模块 - 不是全局的。在使用之前请阅读Webpack的工作原理。此外，它不是一个webpack特定的问题，但ES2015模块的代码通常在其导入的文件之外不可用 –

感谢您的洞察 - 我看到我必须导入React才能使用它。现在我需要弄清楚如何在我的Jasmine规范中使用导入语法，但这是一个不同的问题。 –

使用webpack安装React时未定义

回答

相关问题