我正在尝试使用 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 中包含的任何其他库)?任何帮助表示赞赏!
最佳答案
在 ES2015 模块内定义的任何变量仅在此模块中可用。这同样适用于导入的模块 - 导入模块并不会使该模块在全局范围内可用。如果您确实需要使某些模块变量在全局范围内可用,则必须将其分配给 window
属性:
var React = require('react');
window.React = React;
关于javascript - 与 webpack 一起安装时未定义 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43235020/