У меня есть сценарий, который делает вызов ajax для получения данных через api. Ниже приведен скрипт (в машинописном тексте). Я использую webpack и babel-loader, чтобы сначала скомпилировать машинописный текст (.tsx) в javascript (.jsx), который затем переводится в es2015 с помощью babel в (.js)Сценарий, созданный webpack, выполняющийся дважды
Я использую скрипт, сгенерированный на html-странице , При просмотре хром-консоли он показывает два запроса ajax, которые передаются последовательно, хотя есть только один. Даже когда я удаляю вызов ajax, любая реакция на реакцию и т. Д., Я все еще вижу, что скрипт работает дважды и дважды ударяет по точке останова.
В стеке вызовов я вижу веб-пакет, вызывающий сценарий как раз. Я не понимаю, почему сценарий отображается дважды. Пожалуйста, помогите.
скрипт, который становится визуализации дважды: (PropertyDashBoard.tsx)
import * as React from 'react';
import * as DOM from 'react-dom';
import PropertyDisplay from './Components/PropertyDisplay';
var $ = require('jquery');
// Insert the div id where the main component has to be attached
const divToAttach = document.getElementById('property-list');
const Url: string = "/api/GetProperty";
$.ajax({
url: Url,
dataType: 'json',
success: (data) => DOM.render(<Main toDisplay={data}/>, divToAttach),
error:() => console.log("Some Error occurred while getting property data")
});
class Main extends React.Component<any, any>
{
constructor(props: any)
{
super(props);
}
public render()
{
var rows = [];
this.props.toDisplay.map((val, key) => rows.push(<PropertyDisplay obj={val} key={key} />));
return (
<div className="property-container">
{rows}
</div>
);
}
}
tsconfig.json:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": "./wwwroot/node/js",
"jsx": "preserve",
"module": "es6",
"moduleResolution": "node",
"noImplicitAny": false,
"outDir": "Tsbuild",
"sourceMap": true,
"target": "es6"
},
"exclude": [
"node_modules"
]
}
webpack.config.js:
/// <binding />
var webpack = require('webpack'),
path = require('path'),
WebpackNotifierPlugin = require('webpack-notifier');
//CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
devtool: 'eval',
debug: true,
entry: {
'PropertyDashBoard': './Views/ManageProperty/Scripts/PropertyDashBoard.tsx',
'EditProperty': './Views/ManageProperty/Scripts/EditProperty.tsx',
'vendor':['react','react-dom','jquery','redux','bootstrap']
},
output: {
path: './wwwroot/js',
filename: '[name].js'
},
watch: true,
resolve: {
// Look for modules in .ts(x) files first, then .js(x)
extensions: ['', '.ts', '.tsx', '.js', '.jsx','.css'],
// Add 'src' to our modulesDirectories, as all our app code will live in there, so Webpack should look in there for modules
modulesDirectories: ['src', 'node_modules'],
},
module: {
loaders: [
{ test: /\.jsx?$/,exclude: /node_modules/ ,loaders: ['babel-loader'] },
{ test: /\.tsx?$/,exclude: /node_modules/ , loaders: ['babel-loader', 'ts-loader']},
{ test: /\.css$/, exclude: /node_modules/ ,loader: "style!css" }
]
},
stats: {
colors: true,
modules: true,
reasons: true,
errorDetails: true
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new WebpackNotifierPlugin({ alwaysNotify: true }),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
],
};
Я видел для множественного включения этого скрипта в полное решение, но есть только одно включение в html, где это должно быть.
Для бэкэнд я использую ASP.NET Core 1.0, на всякий случай, если это имеет значение для этого вопроса.
[Изменить]: Это статистика порождаемые WebPack:
C:\Users\HP\documents\visual studio 2015\Projects\ThePropertyCore\src\ThePropertyCore> cmd /c SET NODE_ENV=development&& webpack -d --color
ts-loader: Using [email protected] and C:\Users\HP\documents\visual studio 2015\Projects\ThePropertyCore\src\ThePropertyCore\tsconfig.json
Hash: e3d28f770251608fe338
Version: webpack 1.14.0
Time: 7748ms
Asset Size Chunks Chunk Names
EditProperty.js 2 kB 0 [emitted] EditProperty
PropertyDashBoard.js 34.1 kB 1 [emitted] PropertyDashBoard
vendor.bundle.js 1.17 MB 2 [emitted] vendor
EditProperty.js.map 2.62 kB 0 [emitted] EditProperty
PropertyDashBoard.js.map 27.9 kB 1 [emitted] PropertyDashBoard
vendor.bundle.js.map 1.34 MB 2 [emitted] vendor
[0] multi vendor 76 bytes {2} [built]
+ 210 hidden modules
Hash: af289267d69e627d7f57
Version: webpack 1.14.0
Time: 851ms