私はRequireJSプロジェクトからWebpackに移行しています。 後者は私には新しく、私はこれを学習の練習として使っています。Webpack 2:jQWidgetsのRequireJSのようなシミングですか?
shim: {
'jqxcore': {
exports: "$",
deps: ["jquery"]
},
'jqxtree': {
exports: "$",
deps: ["jquery", "jqxcore"]
},
'jqxbutton': {
exports: "$",
deps: ["jquery", "jqxcore"]
},
'jqxsplitter': {
exports: "$",
deps: ["jquery", "jqxcore"]
},
'jqxmenu': {
exports: "$",
deps: ["jquery", "jqxcore"]
}
}
をして、ちょうどそのような例えば「jqxsplitter」を必要: RequireJSでは、私はこのようなものを登録することができ
import "jqxsplitter"
とスタッフが正しく登録され、ロードされるだろう。 今度は、thisとthisのように、RequireJSからWebpackに移行する際に見つけたガイド/チュートリアル/チュートリアルをいくつか見ていました。 は、だから私は私のwebpack.config.jsにこのような何かをしようとしているものを洞察以下:どのように「の構文
"use strict";
// Required to form a complete output path
const path = require("path");
// Plagin for cleaning up the output folder (bundle) before creating a new one
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
// Path to the output folder
const bundleFolder = "./wwwroot/";
// Path to the app source code
const appFolder = "./app/";
module.exports = {
// Application entry point
entry: {
main: appFolder + "index.ts",
vendor: [
"knockout",
"jquery",
"jqxcore"
],
jqxsplitter: "jqxsplitter"
},
// Output file
output: {
filename: "[name].js",
chunkFilename: "[name].js",
path: path.resolve(bundleFolder)
},
module: {
rules: [{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}, {
test: /\.html?$/,
loader: "html-loader" //TODO: file-loader?
}],
loaders: [{
test: /jqxcore/,
loader: "imports?jquery!exports?$"
}, {
test: /jqxsplitter/,
loader: "imports?jquery,jqxcore!exports?$"
}]
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
alias: {
"jqxcore": "jqwidgets-framework/jqwidgets/jqxcore",
"jqxsplitter": "jqwidgets-framework/jqwidgets/jqxsplitter"
}
},
plugins: [
new CleanWebpackPlugin([bundleFolder]),
new HtmlWebpackPlugin({
filename: "index.html",
template: appFolder + "index.html",
chunks: ["main", "vendor"]
}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendors.js",
minChunks: Infinity
})
],
devtool: "source-map"
};
関連部分は、(私は仮定)
module: {
loaders: [{
test: /jqxcore/,
loader: "imports?jquery!exports?$"
}, {
test: /jqxsplitter/,
loader: "imports?jquery,jqxcore!exports?$"
}]
},
ているそれはかなり明らかです輸入/輸出」は、RequireJSの「deps」と「輸出」に相当すると考えられる。私は私のindex.tsにファイル(アプリケーションルート)これを行うとき しかし:
import "jqwidgets-framework/jqwidgets/jqxsplitter";
を私は私のアプリを実行しているときにエラー「jqxBaseFrameworkが定義されていません」を取得します。 jQWidgetsのフォーラムでこのエラーの参照が見つかりましたが、本当に問題に取り組んでいないか、Angularを使用していないため自分の状況に当てはまらないAOTコンパイルのようなものがあります。
私はのこの質問をjQWidgesフォーラムで行ったことがありますが、これまでのところ実際の回答はありませんでした(2週間後)、jqxwhateverplugin.jsの前にjqxcore.jsをロードするという一般的な答えが1つのみです。 さて、明らかに、それは私がシミングを使って達成しようとしていることです。
アイデア?