Как я могу сделать приложение, скомпилированное в bundle.js? - PullRequest
Новая
       43

Как я могу сделать приложение, скомпилированное в bundle.js?

0 голосов
/ 03 ноября 2019

Итак, у меня есть приложение React, которое было скомпилировано в файл bundle.js. Файл index.tsx приложения React показывает, что компонент приложения будет отображаться в элементе DOM с идентификатором «scheduleSitesGrid2», как показано на этом рисунке:

index.tsx

Мне удалось связать это реагирующее приложение и разместить его в хранилище Azure. Фактически, если я создаю простой HTML-файл, который содержит только div и скрипт с src, указывающим на лазурный URL, я смогу увидеть bundle.js в Chrome DevTools:

dummy index.html chrome devtools

Когда я открываю фиктивный index.html, я не вижу компонент приложения React. На консоли также нет ошибок.

page

Я также пытался добавить точки останова в компоненте приложения, и они запускаются при загрузке страницы. Мне просто интересно, где страница index.html пуста, даже если я вставил 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"
  }
}

UPDATE

Когда я создал пакет, public / index.html былпустой файлЕсли я добавлю некоторый базовый HTML-код и включу div с id scheduleSitesGrid2, я вижу, что компонент приложения работает нормально: grid

Спасибо!

1 Ответ

0 голосов
/ 03 ноября 2019

Я нашел проблему. У меня была проблема в моем файле 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'
            ]
        }]
    }
};
...