概述
我正在尝试使用 Babel 和 Webpack 构建一个 React 应用程序。我知道我可以使用 create-react-app
,但是我想亲自了解这些技术如何协同工作。
当我运行 yarn run start
或 yarn run build
(请参阅下面的 package.json),Webpack 报告已成功构建捆绑包。当我在浏览器中运行应用程序时,我会收到 未捕获的引用错误:React 未定义
的错误信息。
关于此错误,SO 上有许多问题,但是没有一个解决方案可以解决我的问题。
问题
我缺少哪个环节才能使 React、Babel 和 Webpack 良好地协同工作?
代码
package.json
{
"private": true,
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^5.0.1",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"redux-devtools": "^3.3.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
}
.babelrc
{
"presets": ["react", "es2015"]
}
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
devtool: 'source-map',
debug: true,
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
src/index.js
import ReactDom from 'react-dom';
import React from 'react';
import App from './App';
ReactDom.render(
<App />,
document.getElementById('root'),
);
src/App.js
import React from 'react';
import { Component } from 'react';
export default class App extends Component {
render() {
return (
<h1>hello</h1>
);
}
}
观察
- 看起来Webpack/Babel期望React在全局范围内可用,或者忽略了我的
import React from 'react';
语句。 - 此外,我还没有找到在我的Webpack配置中使用
devtools
和debug
属性的正确方法,以便实际上让源映射工作。我还没有在编译输出中看到它们。
编辑
bundle.js文件太大,超出了SO的限制(21,000+行),因此这里提供一个链接:http://chopapp.com/#1a8udqpj — 它需要几秒钟的时间来加载和显示。
.jsx
扩展名的JSX源代码的充分理由。这可能会导致一些问题吗? - Tomasz Lenarcikbundle.js
文件的内容可能有助于了解错误发生的确切位置。 - Tomasz Lenarcikindex.js
和App.js
,它们位于src/
目录下。 - mjswensen