javascript - webpack build没有问题，但不识别react
本文介绍了javascript - webpack build没有问题，但不识别react的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在chrome调试器中报错如下,问题应该是不识别import。
Uncaught ReferenceError: React is not defined
//webpack.config.js
var path = require('path');
module.exports = {
entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
}
]
}
};
//无法识别React
import React from 'react';
export default class Hello extends React.Component {
render() {
return <h1>Hello w</h1>;
}
}
//package.json
{
"name": "reacttodo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.0"
},
"dependencies": {
"install": "^0.7.3",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"webpack-dev-server": "^1.14.1"
}
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>解决方案
我找到了答案，es5中只有var和function会声明变量而且默认是全局对象的属性，只有全局作用域和函数作用于，也就是说nodejs中global的属性，浏览器中window的属性，这就带来了好多问题，全局污染，当一个程序里有好多同名变量的时候后面的覆盖前面的
为了解决这种问题或者其他原因已es6引入了const,import,class,let等关键字，它们是块作用域，这些关键字声明出来的不会做全局变量的属性，也就是说不会做global或者window的属性
你出现的问题是用import关键字es6的方式声明了变量，显然不会给你做window的属性，要自己手动做。当我用var React=require("react");的时候用了var关键字es5的方式，显然自动给我做了window的属性
打开下面的链接看最后一部分内容
http://es6.ruanyifeng.com/#docs/let
ps:事实证明基础的重要性
这篇关于javascript - webpack build没有问题，但不识别react的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
