javascript - webpack 创建的脚本执行两次

Question

我有一个脚本，它通过 api 进行 ajax 调用以获取数据。下面是脚本( typescript )。我使用 webpack 和 babel-loader 首先将 typescript (.tsx) 编译为 javascript (.jsx)，然后通过 babel 将其转译为 es2015 (.js)

我正在使用在 html 页面中生成的脚本。当通过 chrome 控制台查看时，它显示两个 ajax 请求被连续传递，尽管只有一个。即使我删除了 ajax 调用、任何 react 依赖项等，我仍然可以看到脚本运行两次并两次击中断点。

在调用堆栈中，我可以看到 webpack 两次调用脚本。 我不明白为什么脚本被渲染了两次。请帮忙。

渲染两次的脚本:(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 typescript@2.1.4 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

Answer 1

从 webpack 配置文件可以看出，我正在为多个 vendor 库创建一个通用 vendor 脚本。检查时，我发现这个 vendor 文件包含在 html DOM 的两个位置。

虽然不清楚为什么在多个地方包含 vendor 脚本导致用户脚本执行两次 - 现在我的问题在删除多个包含后解决了。

我在将 jquery 集成到我的 typescript 文件时遇到了问题，所以我将它与 vendor.bundle.js 分开，现在我将它单独包含在内。

如果有人知道整个场景背后的原因，请也向我们解释一下。谢谢。