概述

Question

概述

我正在尝试使用Babel和Webpack来构建React应用程序。我知道我可以使用create-react-app，但我想了解这些技术如何为我自己合作。

当我运行yarn run start或yarn run build时（请参阅下面的 package.json ），Webpack会报告已将捆绑包构建得很好。当我在浏览器中运行应用程序时，出现Uncaught ReferenceError: React is not defined错误。

关于同样的错误，有很多关于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 - 加载和显示需要几秒钟。

Answer 1

根据我对React的有限经验，我想做出以下观察。首先是关于devTools和debug的问题。 webpack的调试标志（根据他们的official documentation）将加载器切换到调试模式。然后，从我的理解，webpack，当在开发环境中运行时，实际上并没有将代码编译为硬文件，而是将其保存在内存中。因此，源映射也保存在内存中并链接到浏览器。当您打开浏览器开发工具并查看源时，您会看到它们的效果。

现在假设您正确配置了dev服务器，我还假设您的index.html位于源目录中。如果是这种情况，那么您的脚本引用应该只指向'/bundle.js'而不是'dist / bundle.js'，因为可能没有物理“dist”文件夹。

我还建议从webpack.config.js中的入口点删除“.js”

只是一些观察。我希望它们对你有用。

Answer 2

我知道你已经将此标记为已回答，但是因为您正在尝试学习webpack等的内部和外部......您的原始问题是您需要在webpack.config.js中指定output.publicPath：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist',
    publicPath: '/dist'  // <- was missing
  },
  devtool: 'source-map',
  debug: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

＆＃34; path＆＃34;是包含bundle.js的文件夹的物理路径。＆＃34; publicPath＆＃34;是该文件夹的虚拟路径（URL）。所以，你甚至不必使用＆＃34; dist＆＃34;。例如，如果你使用了......

  output: {
    filename: 'bundle.js',
    path: './dist',
    publicPath: '/assets'
  },

然后您的HTML会指向：

<script src="assets/bundle.js"></script>

希望有所帮助！

Answer 3

您需要在webpack.config.js文件中向模块添加查询：

module: {
loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015']
  }
}]
},
 resolve: {
   extensions: ['', '.js', '.jsx']
};

错误：未捕获的ReferenceError：未定义React

概述

问题

代码

观察

修改

3 个答案: