Question

我试图从Node / webpack下运行的书籍React and React Native获取一个简单的＆＃34; Hello，World＆＃34; -type React.js应用 DEV-服务器。我没有看到任何错误，但我在浏览器中访问时页面为空白。

以下是我尝试和未能运行本书的very first example：

使用以下步骤安装node和npm（改编自this gist）：

$ mkdir ~/.local/node-latest-install
$ cd ~/.local/node-latest-install
$ curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
$ ./configure --prefix=~/.local
$ make -j install
$ curl https://www.npmjs.com/install.sh | sh
$ node -v; npm -v
v7.7.4
4.1.2

从书中克隆示例repo：

$ git clone https://github.com/PacktPublishing/React-and-React-Native.git

从顶级示例文件夹运行npm install：
```
$ cd React-and-React-Native
$ npm install
```

尝试编译/运行hello-jsx示例：

$ cd Chapter02/hello-jsx
$ node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js
...
ERROR in ./main.js
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove "react-hot-loader" from the "loaders" section of your Webpack configuration altogether, and instead add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If you prefer not to use Babel, replace "react-hot-loader" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of your Webpack configuration.
at Object.warnAboutIncorrectUsage (/home/evadeflow/.local/React-and-React-Native/node_modules/react-hot-loader/lib/index.js:7:11)
@ multi main
webpack: Failed to compile.

修改hello-jsx/webpack.config.js以解决上述错误：

diff --git a/Chapter02/hello-jsx/webpack.config.js b/Chapter02/hello-jsx/webpack.config.js
index 312f152..592e767 100644
--- a/Chapter02/hello-jsx/webpack.config.js
+++ b/Chapter02/hello-jsx/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loaders: ['react-hot', 'babel?presets[]=es2015'],
+        loaders: ['react-hot-loader/webpack', 'babel?presets[]=es2015'],
       },
     ],
   },

重新编译/重新运行：

$ node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js
http://localhost:8080/webpack-dev-server/  
webpack result is served from /
content is served from /home/evadeflow/.local/React-and-React-Native/Chapter02/hello-jsx
Hash: 590282c761dccbb5710a
Version: webpack 1.14.0
Time: 1260ms
         Asset    Size  Chunks             Chunk Names
main-bundle.js  978 kB       0  [emitted]  main 
chunk    {0} main-bundle.js (main) 923 kB [rendered]
    [0] multi main 52 bytes {0} [built]
    [1] (webpack)-dev-server/client?http://0.0.0.0:8080 3.97 kB {0} [built]
    [2] /home/evadeflow/.local/React-and-React-Native/~/url/url.js 23.3 kB {0} [built]
    [3] /home/evadeflow/.local/React-and-React-Native/~/url/~/punycode/punycode.js 14.6 kB {0} [built]

  <... lots of similar output omitted ...>

  [251] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMUnknownPropertyHook.js 4.32 kB {0} [built]
  [252] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMNullInputValuePropHook.js 1.37 kB {0} [built]
  [253] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {0} [built]
webpack: Compiled successfully.

在最后一步之后，node正在运行。但是，当我在浏览器中点击localhost:8080时，我看到一个空白页：

我做错了吗？

Answer 1

尝试以下方法：

1）在全局和本地安装webpack，即在代码的基本目录中执行以下操作：

npm install webpack --global
npm install webpack --save-dev

2）在全局和本地安装webpack dev服务器：

npm install webpack-dev-server --global
npm install webpack-dev-server --save-dev

3）更新webpack.config.js文件，特别是＆＃34; loader＆＃34;行，如下：

（A）替换“反应热”＆＃39;使用＆＃39; react-hot-loader / webpack＆＃39;

（B）替换＆＃39; babel＆＃39;与＆＃39; babel-loader＆＃39;

例如，＆＃34; hello-jsx＆＃34;这里的文件是OLD，ORIGINAL webpack.config.js文件中的行：

loaders: ['react-hot', 'babel?presets[]=es2015'],

这是NEW，UPDATE webpack.config.js文件中的一行：

loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=es2015'],

4）使用热门和内联选项运行webpack dev服务器（来自子目录），例如

$ pwd
[whatever_base_directory]/Chapter02/hello-jsx
$ webpack-dev-server --hot --inline

Answer 2

我已经解决了很多这些问题。尝试拉latest。

我修复的两件大事是：

使用Webpack 2作为依赖项，并在初始设置过程中添加全局安装webpack / webpack-dev-server的说明。
每个示例的简化webpack配置。我们只需要babel-loader和一个切入点。

尝试一下，让我知道它是否更容易开始。

组件无法在简单的React.js应用程序

2 个答案: