我正在尝试在我的.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>