向我的 React 应用程序添加第二页，无法读取 .js 文件错误答案

【问题标题】：Adding a 2nd page to my React app, Unable to read .js file error向我的 React 应用程序添加第二页，无法读取 .js 文件错误
【发布时间】：2018-01-02 14:44:09
【问题描述】：

我正在尝试在我的 react 应用程序中添加第二个页面，而无需安装任何新插件或进行重大修改。

我将monsters.html 添加到我的公共目录中，并将monsters.js 添加到src 中，在index.js 旁边。当我导航到 localhost:3000/monsters.html 时，我收到此错误：

SyntaxError: expected expression, got '

monsters.js:，在 src/ 旁边 index.js:

import React from 'react',
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

monsters.html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>Monsters 2</title>
  </head>
  <body>
    <div>Foo</div>
    <div id="root2"></div>
  </body>
  <script src="../src/monsters.js"></script>
</html>

monsters.html, in public

【问题讨论】：

你在使用 create-react-app 吗？
第一行以, 结尾，而不是;。根据您使用的加载程序，您可能需要指定本地文件的扩展名：import App from './App.jsx'。这有点令人困惑 - 你的文件是 App.jsx 还是 index.jsx？如果这些不是问题，请更新有关您的项目和构建设置的信息。

标签： node.js reactjs

【解决方案1】：

您不能简单地将 JSX 语法文件作为脚本包含到您的 HTML 中，首先您必须将其转译为 javascript（因此出现关于 < 语法的语法错误）。

生产解决方案

您需要重命名为monsters.jsx，并添加一些构建配置以使其按预期输出。

如果没有关于您当前构建工具或配置的信息，我只能建议，如果使用 webpack 构建，您需要将其添加为另一个入口文件（假设您希望每个 HTML 页面都有单独的包），设置输出包以映射到您的入口文件，并确保您有一个 JSX 转换规则（注意：这将输出到 /dist/index.js 和 /dist/monsters.js，这将是您在 HTML 脚本标签中指向的文件）...

var webpack = require('webpack');

module.exports ={
  entry: {
    index: './src/index.js',
    monsters: './src/monsters.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        use: {
          loader: 'babel-loader',
          exclude: /node_modules/,
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

快速而肮脏的非压倒性解决方案

或者作为一种快捷方式，这可以使用独立于 HTML 文件本身的 babel 来完成，尽管这不是构建生产 React 应用程序的标准，但如果只对使用 React 和 JSX 感兴趣，它应该可以工作。这是https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f 的教程（请记住将 react、react-dom 和 babel-standalone 的版本升级到当前版本）

【讨论】：