为什么jquery-ui没有加载webpack

时间:2017-02-17 17:26:35

标签: jquery-ui typescript autocomplete webpack .net-core

我正在尝试在我的.NET Core项目中包含jquery-ui,以便我可以在autocomplete个文件中使用typescript。我可以使用webpack将我的node_modules文件复制到我的根文件夹。我还在我的主布局中包含了jquery-ui.js文件,并在我的条目文件中添加了require("jquery-ui-bundle");

但是当我运行我的项目时,我收到一个控制台错误,指出$(...)autocomplete is not a function,当我检查开发人员工具中的sources选项卡时,我没有看到添加了jquery-ui文件,尽管我看到了另一个像jquery这样的库,我添加了相同的方式。我不确定我错过了什么。请参阅以下配置。

webpack.config.js

/// <reference path="wwwroot/lib/datatables/js/jquery.datatables.js" />
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var glob = require("glob");

module.exports = {
    target: "web",
    entry: "./Scripts/entry.ts",
    output: {
        filename: "./wwwroot/Scripts/[name].js"
    },
    devtool: "source-map",
    resolve: {
        extensions: ["", ".ts", ".less"]
    },
    module: {
        loaders: [
            { test: /\.ts/, exclude: [/node_modules/, /typings/], loader: "ts-loader" },
            { test: /\.less/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: "url-loader?limit-100000&name/css/[hash].[ext]" },
            {
                test: /datatables\.net.*/,
                loader: "imports?define=>false"
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin("./wwwroot/css/site.css", { allChunks: true }),
        new CopyWebpackPlugin([
            { from: "node_modules/jquery/dist", to: "./wwwroot/lib/jquery/dist" },
            { from: "node_modules/jquery-ui-bundle", to: "./wwwroot/lib/jquery-ui-bundle" },
            { from: "node_modules/bootstrap/dist", to: "./wwwroot/lib/bootstrap/dist" },
            { from: "node_modules/datatables.net/js", to: "./wwwroot/lib/datatables/js" },
            { from: "node_modules/datatables.net-bs/js", to: "./wwwroot/css/datatables/js" },
            { from: "node_modules/datatables.net-dt/css", to: "./wwwroot/css/datatables/css" },
            { from: "node_modules/datatables.net-bs/css", to: "./wwwroot/css/datatables/css" },
            { from: "node_modules/datatables.net-dt/images", to: "./wwwroot/css/datatables/css" }
        ])
    ],

    watch: true
}

打字稿输入文件

import $ = require("jquery");
require("jquery-ui-bundle");

布局页面中包含的脚本

<environment names="Development">
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="~/lib/jquery-ui-bundle/jquery-ui.js"></script>
    <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    @*<script type="text/javascript" src="~/lib/datatables/js/jquery.dataTables.js"></script>*@
    <script src="~/css/datatables/js/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="~/Scripts/main.js"></script>
    @RenderSection("scripts", false)
</environment>

文件路径(wwwroot) enter image description here

Chrome开发者工具未在lib文件夹下显示jquery ui enter image description here

0 个答案:

没有答案