1
私はAPIを介してデータを取得するためのajax呼び出しを行うスクリプトを用意しています。以下はスクリプトです（typescriptで）。私はwebpackとbabel-loaderを使ってjavascript（.jsx）にtypescript（.tsx）をコンパイルし、それをes2015にバベルで（.js）に変換します。webpackによって2回実行されるスクリプト
スクリプトを使用しているので、 。クロムコンソールから見ると、2つのAjaxリクエストが連続して渡されているようですが、1つしかありません。私がAjax呼び出しや反応の依存関係などを取り除いても、スクリプトは2回実行され、ブレークポイントは2回繰り返されます。
コールスタックでは、両方のスクリプトを呼び出すwebpackがわかります。 私はなぜスクリプトが2回レンダリングされているのか分からない。助けてください。二回レンダリングなっている
スクリプト：（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に含まれるのは1つだけです。
バックエンドの場合、私は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