如何呈现在 bundle.js 中编译的 React 应用程序？

Question

所以我有一个编译成 bundle.js 文件的 React 应用程序。 React 应用程序的 index.tsx 文件显示 App 组件将呈现在 ID 为 "scheduleSitesGrid2" 的 DOM 元素中，如下图所示：

我已经能够捆绑此 React 应用程序并将捆绑包托管在 Azure 存储上。事实上，如果我创建一个简单的 HTML 文件，它只包含一个 div 和一个 src 指向 azure url 的脚本，我就能看到 bundle.js在 Chrome 开发者工具中：

当我打开虚拟 index.html 时，我看不到 React App 组件。控制台也没有错误。

我还尝试在 App 组件中添加断点，并在页面加载时触发它们。我只是想知道 index.html 页面在哪里是空白的，即使我插入了具有有效 ID 的 div。

这是我的 App.tsx 文件：

import React, {Component} from 'react';
import '@progress/kendo-theme-default/dist/all.css';
import './App.css';
import jobs from './jobs.json';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
import EditIconComponent from "./components/editicon.component";
import UploadIconComponent from "./components/uploadicon.component";

export default class App extends Component {

  handleDropDownChange = (e: DropDownListChangeEvent) => {
    this.setState({
      dropdownlistCategory: e.target.value.CategoryID
    });
  }

  state = { skip: 0, take: 5 }

    pageChange = (event: any) => {
        this.setState({
            skip: event.page.skip,
            take: event.page.take
        });
  }

  render() {
    return (
      <div className="App">
          <Grid
            resizable={true}
            pageable={true}
            skip={this.state.skip}
            take={this.state.take}
            total={jobs.length}
            onPageChange={this.pageChange}
            data={jobs.slice(this.state.skip, this.state.take + this.state.skip)}>
            <GridColumn field="null" title=" " cell={EditIconComponent} resizable={false} width="50px"/>
            <GridColumn field="null" title=" " cell={UploadIconComponent} resizable={false} width="50px"/>
            <GridColumn field="technology" title="Technology" />
            <GridColumn field="marketcost" title="Market/Cost"/>
            <GridColumn field="num" title="Job #" />
            <GridColumn field="locationCode" title="Location Code" />
            <GridColumn field="siteName" title="Site Name" />
            <GridColumn field="pin" title="PIN" />
            <GridColumn field="status" title="Job Status" />
          </Grid>
      </div>
    );
  }
}

这是整个 index.tsx 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: .....
serviceWorker.unregister();

这是我的 package.json

{
  "name": "kendo-grid-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@progress/kendo-data-query": "^1.5.2",
    "@progress/kendo-drawing": "^1.6.0",
    "@progress/kendo-react-dateinputs": "^3.6.0",
    "@progress/kendo-react-dialogs": "^3.6.0",
    "@progress/kendo-react-dropdowns": "^3.6.0",
    "@progress/kendo-react-grid": "^3.6.0",
    "@progress/kendo-react-inputs": "^3.6.0",
    "@progress/kendo-react-intl": "^3.6.0",
    "@progress/kendo-theme-default": "^4.5.2",
    "@types/jest": "24.0.19",
    "@types/node": "12.11.6",
    "@types/react-dom": "16.9.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "./node_modules/.bin/webpack",
    "pack": "webpack --config webpack.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "@types/react": "^16.9.9",
    "babel-loader": "^8.0.6",
    "glob": "^7.1.5",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.6.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack-cli": "^3.3.10"
  }
}

更新

当我创建包时，public/index.html 是一个空文件。如果我添加一些基本的 html 代码并包含 ID 为 scheduleSitesGrid2 的 div，我会看到 App 组件工作正常：

谢谢！

Answer 1

我发现了问题。我的 Webpack.config.js 文件有问题。我将条目设置为 src/App.tsx，但我将其更改为 src/index.tsx.

非常感谢大家的帮助！

祝你有美好的一天

如果有人需要，这是我的Webpack.config：

"use strict"

const path = require('path');

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        publicPath: "/",
        contentBase: "./public",
        hot: true
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    devtool: "inline-source-map",
    module: {
        rules: [{
            test: /\.(ts|tsx)$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    }
};

如何呈现在 bundle.js 中编译的 React 应用程序？

How can I render a react application compiled in a bundle.js?

bundle

cdn

azure-storage

typescript

reactjs