React未定义ReferenceError? 我正在使用webpack和webpack-dev-server
这是我的jsx :
var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>hello world</h1>, document.getElementById('content') )
我用webpack build/bundle.js
&
我将bundle.js
导入index.html
index.html的:
<!DOCTYPE html> <html> <head> ┊ <meta charset="utf-8"> ┊ <meta name="viewport" content="width=device-width"> ┊ <title></title> </head> <body> ┊ <div id="content"></div> ┊ <script src="./build/bundle.js" type="text/javascript" charset="utf-8"></script> </body> </html>
但是当我运行webpack-dev-server
,chrome控制台错误:
bundle.js:57 Uncaught ReferenceError: React is not defined
我相信,我已经运行npm install react
我怎么解决它?(-_-)ゞ゛
你应该添加到你的app.js
而不是.jsx
var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>hello world</h1>, document.getElementById('content') )
JSX是一种由React组件解释的转译语言。 所以,必须在app.js中有React组件来解释jsx!
所有浏览器都不支持JSX语法和ES6。
因此,如果我们在React代码中使用它们,我们需要使用一个工具将它们翻译成浏览器支持的格式。 巴别是一个这样的工具
Webpack使用加载器在捆绑文件之前翻译文件
要设置,请安装以下npm软件包
npm i babel-loader babel-preset-es2015 babel-preset-react -S
babel-preset-es2015和babel-preset-react是babel-loader使用的插件,分别转换ES6和JSX语法。
下一步是告诉Webpack在捆绑文件时使用babel-loader
// Existing Code .... var config = { // Existing Code .... module : { loaders : [ { test : /\.jsx?/, include : APP_DIR, loader : 'babel' } ] } }
装载机属性需要一个装载机数组,下面我使用了babel-loader
。 每个加载器属性应该指定它通过testing属性处理的文件扩展名是什么。 .js和.jsx文件可以使用正则expression式configuration为/\.jsx?/
最终的webpack.config.js
var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), devtool: "inline-sourcemap", entry: "./js/client.js", module: { loaders: [ { test: /\.jsx?/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], } } ] }, output: { path: __dirname + "/src/", filename: "client.min.js" }, plugins: [ new webpack.ProvidePlugin({ 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' }) ] };