使用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時未定義

回答

相關問題